vue3中实现3D地图—

在这里插入图片描述

需求点

地图区域大小随着父盒子大小变动，窗口缩放自动适配
每个区域显示不同颜色和高度，描边
每个区域显示名字label和icon
点击区域改变其透明度，并且弹窗显示信息窗口
点击点也可以
可以自由放大缩小，360度旋转

包

在这里插入图片描述

npm install d3@^7.8.4
npm install lil-gui@^0.18.1
npm install three@^0.152.2

代码

<template><div style="width: 100%; height: 100vh; position: relative"><div id="map" style="width: 100%; height: 100%"></div><!-- 点击市或者点显示信息窗口 --><div v-if="city" class="infoPop" :style="`left:${left}px;top:${top}px`">我是{{ city }}</div></div>
</template><script setup>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import {CSS2DRenderer,CSS2DObject,
} from "three/examples/jsm/renderers/CSS2DRenderer.js";
import { ref, onMounted, onUnmounted } from "vue";
import * as d3 from "d3";const mapWidth = ref(0);
const mapHeight = ref(0);
const mapElement = ref(null);
const left = ref(0);
const top = ref(0);
const city = ref("");onMounted(() => {// 获取map地图容器的宽高，监听窗口变化更新宽高mapElement.value = document.getElementById("map"); // 获取DOM元素引用mapWidth.value = mapElement.value.clientWidth;mapHeight.value = mapElement.value.clientHeight;console.log(mapWidth.value, mapHeight.value);const scene = new THREE.Scene();// const axesHelper = new THREE.AxesHelper(5);// scene.add(axesHelper);const ambientLight = new THREE.AmbientLight(0xd4e7fd, 4);scene.add(ambientLight);const directionalLight = new THREE.DirectionalLight(0xe8eaeb, 0.2);directionalLight.position.set(0, 10, 5);const directionalLight2 = directionalLight.clone();directionalLight2.position.set(0, 10, -5);const directionalLight3 = directionalLight.clone();directionalLight3.position.set(5, 10, 0);const directionalLight4 = directionalLight.clone();directionalLight4.position.set(-5, 10, 0);scene.add(directionalLight);scene.add(directionalLight2);scene.add(directionalLight3);scene.add(directionalLight4);const camera = new THREE.PerspectiveCamera(75,mapWidth.value / mapHeight.value,0.1,1000);camera.position.y = 8;camera.position.z = 8;const labelRenderer = new CSS2DRenderer();labelRenderer.domElement.style.position = "absolute";labelRenderer.domElement.style.top = "0px";labelRenderer.domElement.style.pointerEvents = "none";labelRenderer.setSize(mapWidth.value, mapHeight.value);document.getElementById("map").appendChild(labelRenderer.domElement);const renderer = new THREE.WebGLRenderer({ alpha: true });renderer.setSize(mapWidth.value, mapHeight.value);document.getElementById("map").appendChild(renderer.domElement);const controls = new OrbitControls(camera, renderer.domElement);controls.update();const animate = () => {requestAnimationFrame(animate);controls.update();renderer.render(scene, camera);labelRenderer.render(scene, camera);};animate();window.addEventListener("resize", () => {mapWidth.value = mapElement.value.clientWidth;mapHeight.value = mapElement.value.clientHeight;camera.aspect = mapWidth.value / mapHeight.value;camera.updateProjectionMatrix();renderer.setSize(mapWidth.value, mapHeight.value);labelRenderer.setSize(mapWidth.value, mapHeight.value);});const url = "https://geo.datav.aliyun.com/areas_v3/bound/330000_full.json";fetch(url).then((res) => res.json()).then((data) => {const map = createMap(data);scene.add(map);let intersect = null;// 鼠标点击事件window.addEventListener("click", (event) => {const mouse = new THREE.Vector2();mouse.x = (event.clientX / mapWidth.value) * 2 - 1;mouse.y = -(event.clientY / mapHeight.value) * 2 + 1;const raycaster = new THREE.Raycaster();raycaster.setFromCamera(mouse, camera);const intersects = raycaster.intersectObjects(map.children).filter((item) => item.object.type !== "Line");if (intersects.length > 0) {// 点击市if (intersects[0].object.type === "Mesh") {// 打印鼠标点击的省市名称、adcode，显示信息窗口console.log(intersects[0].object.parent.name,intersects[0].object.parent.adcode);city.value = intersects[0].object.parent.name;left.value = event.clientX + 20;top.value = event.clientY + 20;if (intersect) isAplha(intersect, 1);intersect = intersects[0].object.parent;isAplha(intersect, 0.4);}// 点击iconif (intersects[0].object.type === "Sprite") {console.log(intersects[0].object);}} else {if (intersect) isAplha(intersect, 1);}function isAplha(intersect, opacity) {intersect.children.forEach((item) => {if (item.type === "Mesh") {item.material.opacity = opacity;}});}});});
});
onUnmounted(() => {window.removeEventListener("resize", resizeRenderer); // 移除窗口大小变化监听器
});
// 矫正坐标
const offsetXY = d3.geoMercator();// 根据省市的json数据创建地图
const createMap = (data) => {console.log(data, 11111);const map = new THREE.Object3D();const center = data.features[0].properties.centroid;offsetXY.center(center).translate([0, 0]);data.features.forEach((feature) => {const unit = new THREE.Object3D();const { centroid, center, name, adcode } = feature.properties;const { coordinates, type } = feature.geometry;const point = centroid || center || [0, 0];// 每个市随机颜色，随机深度const color = new THREE.Color(`hsl(${233},${Math.random() * 30 + 55}%,${Math.random() * 30 + 55}%)`).getHex();const depth = Math.random() * 0.3 + 0.3;// 绘制每个市的名称和图标const label = createLabel(name, point, depth);const icon = createIcon(center, depth);coordinates.forEach((coordinate) => {if (type === "MultiPolygon") coordinate.forEach((item) => fn(item));if (type === "Polygon") fn(coordinate);function fn(coordinate) {// 添加自定义属性，点击的时候可以打印出来unit.name = name;unit.adcode = adcode;// 绘制每个市的区域（传入颜色和深度）const mesh = createMesh(coordinate, color, depth);// 绘制每个市的边界const line = createLine(coordinate, depth);unit.add(mesh, ...line);}});// 在地图上添加标记 位置、名字、图标map.add(unit, label, icon);// 设置地图中心setCenter(map);});// ----添加任意点标记----const icon1 = createIcon([120.057576, 29.697459], 1.11);map.add(icon1);return map;
};
// 绘制每个市的区域
const createMesh = (data, color, depth, name) => {const shape = new THREE.Shape();data.forEach((item, idx) => {const [x, y] = offsetXY(item);if (idx === 0) shape.moveTo(x, -y);else shape.lineTo(x, -y);});const extrudeSettings = {depth: depth,bevelEnabled: false,};const materialSettings = {color: color,emissive: 0x000000,roughness: 0.45,metalness: 0.8,transparent: true,side: THREE.DoubleSide,};const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);const material = new THREE.MeshStandardMaterial(materialSettings);const mesh = new THREE.Mesh(geometry, material);return mesh;
};
// 绘制每个市的边界
const createLine = (data, depth) => {const points = [];data.forEach((item) => {const [x, y] = offsetXY(item);points.push(new THREE.Vector3(x, -y, 0));});const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);const uplineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });const downlineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });const upLine = new THREE.Line(lineGeometry, uplineMaterial);const downLine = new THREE.Line(lineGeometry, downlineMaterial);downLine.position.z = -0.0001;upLine.position.z = depth + 0.0001;return [upLine, downLine];
};
// 绘制每个市的名称
const createLabel = (name, point, depth) => {const div = document.createElement("div");div.style.color = "#fff";div.style.fontSize = "12px";div.style.textShadow = "1px 1px 2px #047cd6";div.textContent = name;const label = new CSS2DObject(div);label.scale.set(0.01, 0.01, 0.01);const [x, y] = offsetXY(point);label.position.set(x, -y, depth);return label;
};
// 绘制每个市的图标
const createIcon = (point, depth) => {const url = new URL("../assets/icon.png", import.meta.url).href;const map = new THREE.TextureLoader().load(url);const material = new THREE.SpriteMaterial({map: map,transparent: true,});const sprite = new THREE.Sprite(material);const [x, y] = offsetXY(point);sprite.scale.set(0.3, 0.3, 0.3);sprite.position.set(x, -y, depth + 0.2);sprite.renderOrder = 1;return sprite;
};
// 设置地图中心
const setCenter = (map) => {map.rotation.x = -Math.PI / 2;const box = new THREE.Box3().setFromObject(map);const center = box.getCenter(new THREE.Vector3());const offset = [0, 0];map.position.x = map.position.x - center.x - offset[0];map.position.z = map.position.z - center.z - offset[1];
};
</script><style>
* {padding: 0;margin: 0;box-sizing: border-box;
}
#map {background-color: #d4e7fd;
}
.infoPop {position: absolute;left: 0;top: 0;background: #fff;border: 1px solid #03c3fd;border-radius: 10px;color: #333;padding: 20px;z-index: 9999;
}
</style>