"d3": "^7.9.0",
"three": "^0.169.0",
"vue": "^3.5.10"

地图数据来源： DataV.GeoAtlas地理小工具系列 

<script setup>
import {onMounted, ref} from 'vue'
import * as THREE from 'three'
import * as d3 from "d3";  //莫开托坐标 矫正地图坐标
import map from './constant/map.json'
// 引入轨道控制器扩展库OrbitControls.js
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
// 拿到页面的宽高
const width = window.innerWidth, height = window.innerHeight;// d3投影转换函数 （109, 34.5  中心点位置）
const handleProject = d3.geoMercator().center([109, 34.5]).scale(1000).translate([0, 0])
// 存储地图容器
const mapContainer = new THREE.Object3D()// 创建场景
const scene = new THREE.Scene();
// 将背景颜色设置为白色
scene.background = new THREE.Color("#000000");// 创建相机
const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10000);
// 设置相机位置
camera.position.z = 1000;// // 辅助线 AxesHelper
const axesHelper = new THREE.AxesHelper(500);
scene.add(axesHelper);// 初始化渲染器
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
//阻尼 更真实
controls.enableDamping = true// 地图数据处理
const initGeom = () => {// 将地图数据显示在屏幕上// 如果是服务器返回的数据，需要先将数据转为geojson格式 这里默认用的本地数据handleData(map)
}const handleData = (jsonData) => {const featureList = jsonData.features;featureList.forEach((feature) => {// 创建省的容器const province = new THREE.Object3D;// 省份名称province.properties = feature.properties.nameprovince.name = feature.properties.name // 省份名称mapContainer.name = feature.properties.name // 省份名称// 省份坐标信息const coordinates = feature.geometry.coordinatesif (feature.geometry.type === 'MultiPolygon') {coordinates.forEach((cord) => {// coordinate 就是边界素组坐标系cord.forEach((coordinate) => {// 三维多边形const extrudeMesh = creatDepthPolygon(coordinate)// 给extrudeMesh对象加一个自定义的属性（properties）用来存放省份名称extrudeMesh.properties = feature.properties.name// 绘制省份边缘线条const line = createLine(coordinate);// 将面加入3d 中province.add(extrudeMesh)// 将线加入3d 中province.add(line)})})}if (feature.geometry.type === 'Polygon') {coordinates.forEach((coordinate) => {// 三维多边形const extrudeMesh = creatDepthPolygon(coordinate)extrudeMesh.properties = feature.properties.name// 线条const line = createLine(coordinate);province.add(extrudeMesh)province.add(line)})}// 将每个省份的容器加入到地图容器中mapContainer.add(province)})// 将地图容器加入到场景中scene.add(mapContainer)
}// 创建三维多边形(也就是每个省份的地图)
const creatDepthPolygon = (coordinate) => {const shape = new THREE.Shape();// 每一个item都是省份边界坐标 需要把 json 的坐标系 转化为d3的坐标系  例如：[117.429915,40.576141]coordinate.forEach((item, index) => {const [x_XYZ, y_XYZ] = handleProject(item)if (index === 0) {// moveTo 的主要作用是定义形状的起点位置shape.moveTo(x_XYZ, -y_XYZ)} else {// 依次按照坐标 形成一个多边形shape.lineTo(x_XYZ, -y_XYZ)}})const extrudeSettings = {steps: 2,depth: 16,bevelEnabled: true,bevelThickness: 1,bevelSize: 1,bevelOffset: 0,bevelSegments: 1};// ExtrudeGeometry  创建一个多边形const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings)  //挤压缓冲几何体// 设置每个身份的背景颜色const material = new THREE.MeshBasicMaterial({// color: new THREE.Color(Math.random() * 0xffffff), // 每个省随机赋色color: '#d13a34',transparent: true,opacity: 0.6})return new THREE.Mesh(geometry, material)
}// 创建省份边界线条
const createLine = (coordinate) => {const material = new THREE.LineBasicMaterial({color: '#ffffff'});const points = []coordinate.forEach((item, index) => {// 每一个item都是省份边界坐标 需要把 json 的坐标系 转化为d3的坐标系  例如：[117.429915,40.576141]const [x_XYZ, y_XYZ] = handleProject(item)points.push(new THREE.Vector3(x_XYZ, -y_XYZ, 25))})const geometry = new THREE.BufferGeometry().setFromPoints(points);return new THREE.Line(geometry, material);
}// 渲染页面
const render = () => {// 将场景（scene）和摄像机（camera 加入进来）renderer.render(scene, camera)// 渲染下一帧的时候会调用render函数requestAnimationFrame(render)controls.update()
}const initLight = () => {// 基本光源const ambLight = new THREE.AmbientLight('#ffffff', 0.3)/*** 设置聚光灯相关的的属性*/const spotLight = new THREE.SpotLight(0xFFFFFF); // 聚光灯spotLight.position.set(40, 200, 10);spotLight.castShadow = true; // 只有该属性为true时，该点光源允许产生阴影，并且下列属性可用scene.add(ambLight, spotLight); // 向场景中添加光源
}onMounted(() => {// 添加物体到场景initGeom()// 渲染render()// 设置环境光initLight()// 将渲染加入到页面上document.body.appendChild(renderer.domElement);
})
</script><template><div id="info"></div>
</template><style scoped></style>

下一篇：Threejs 实现3D 地图（03）3d 地图的上钻下钻操作-CSDN博客