three.js通过GEO数据生成3D地图

GeoJSON是一种对地理数据结构进行编码的格式

地图下载 https://datav.aliyun.com/portal/school/atlas/area_selector

生成3D地图

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import * as d3 from 'd3';// 场景
const scene = new THREE.Scene();// 相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);// 辅助线
const axesHelper = new THREE.AxesHelper(5); // 长度
scene.add(axesHelper);// 初始化渲染器
const renderer = new THREE.WebGLRenderer({antialias: true // 锯齿模糊
});
// renderer.setClearColor(0x444444, 1); // 设置背景颜色
renderer.setSize(window.innerWidth, window.innerHeight); //设置three.js渲染区域的尺寸(像素px)
document.body.appendChild(renderer.domElement);
// renderer.render(scene, camera);// 相机围绕目标进行轨道运动; 注意OrbitControls会影响 camera.lookAt(x,y,z)失效，需设置controls.target.set(x,y,z)才能生效
const controls = new OrbitControls(camera, renderer.domElement);
// 可设置控制器阻尼，让控制器更有真实效果，必须在你的动画循环里调用.update()
controls.enableDamping = true// 浏览器动画
const clock = new THREE.Clock()
function render(time) {controls.update() // 阻尼控制器更新renderer.render(scene, camera);requestAnimationFrame(render); // 请求动画帧
}
render()const loader = new THREE.FileLoader(); // 加载文件
loader.load('./100000_full.json', (data) => {const jsonData = JSON.parse(data); // 解析json文件operationData(jsonData)
})const map = new THREE.Object3D()
const operationData = (json) => {// console.log(json);const features = json.features; // 数据features.forEach((feature) => {// 创建省份的物体const province = new THREE.Object3D()province.name = feature.properties.name// 获取经纬度坐标const coordinates = feature.geometry.coordinates// console.log(feature.geometry);if (feature.geometry.type === 'Polygon') { // 多边形coordinates.forEach((item) => {const mesh = createMesh(item) // 创建多边形mesh.name = feature.properties.nameprovince.add(mesh) // 添加到省份})} else if (feature.geometry.type === 'MultiPolygon') { // 多多边形coordinates.forEach((item) => {item.forEach((item) => {const mesh = createMesh(item) // 创建多边形mesh.name = feature.properties.nameprovince.add(mesh) // 添加到省份})})}map.add(province) // 添加到地图})// console.log(map);scene.add(map)
}const projection = d3.geoMercator().center([116.4074, 39.9042]).translate([0, 0, 0]) // 以北京为中心，转换后的坐标（本身是一个球, 转换为平面）
const createMesh = (polygon) => {// console.log(polygon);// 根据经纬度创建平面const shape = new THREE.Shape();polygon.forEach((row, i) => {// console.log(row, projection(row));const [longitude, latitude] = projection(row) // 转换后的坐标if (i === 0) {shape.moveTo(longitude, -latitude) // 移动到第一个点} else {shape.lineTo(longitude, -latitude) // 连接到第二个点}})// 根据形状挤出几何体const geometry = new THREE.ExtrudeGeometry(shape, {depth: 5, // 挤出的深度})const color = new THREE.Color(Math.random() * 0xffffff) // 随机颜色const material = new THREE.MeshBasicMaterial({color, // 颜色transparent: true, // 透明opacity: 0.5, // 透明度})return new THREE.Mesh(geometry, material)
}// 监听画面变化，更新渲染画面
window.addEventListener('resize', () => {// 更新摄像头camera.aspect = window.innerWidth / window.innerHeight;// 更新摄像机的投影矩阵camera.updateProjectionMatrix();// 更新渲染器renderer.setSize(window.innerWidth, window.innerHeight);// 设置渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio)
})
</script>

选中高亮效果

let lastPicker = null; // 上一次选中的物体
window.addEventListener('click', (e) => {// 获取鼠标的位置const mouse = new THREE.Vector2();mouse.x = (e.clientX / window.innerWidth) * 2 - 1; // 横坐标mouse.y = -(e.clientY / window.innerHeight) * 2 + 1; // 纵坐标// 获取鼠标点击的位置const raycaster = new THREE.Raycaster(); // 射线raycaster.setFromCamera(mouse, camera); // 设置射线const intersects = raycaster.intersectObjects(map.children); // 获取射线与物体的交点if (intersects.length > 0) {// console.log(intersects[0].object.name); // 输出交点的物体名称if (lastPicker) { // 上一次选中的物体lastPicker.material.color.copy(lastPicker.material.oldColor) // 恢复原来的颜色}lastPicker = intersects[0].object; // 上一次选中的物体lastPicker.material.oldColor = lastPicker.material.color.clone() // 保存原来的颜色lastPicker.material.color.set(0xffffff) // 选中的物体颜色（此时设置的白色）} else {if (lastPicker) { // 上一次选中的物体lastPicker.material.color.copy(lastPicker.material.oldColor) // 恢复原来的颜色}}
})

生成地图3D线

// 根据经纬度画线
const createLine = (polygon) => {const lineGeometry = new THREE.BufferGeometry(); // 缓冲区const pointsArray = []; // 点polygon.forEach((row) => {const [longitude, latitude] = projection(row) // 转换后的坐标pointsArray.push(new THREE.Vector3(longitude, -latitude, 10)); // 点})lineGeometry.setFromPoints(pointsArray); // 设置点const color = new THREE.Color(Math.random() * 0xffffff) // 随机颜色 // 线const lineMaterial = new THREE.LineBasicMaterial({color, // 颜色}); // 材质return new THREE.Line(lineGeometry, lineMaterial); // 线
}

这里需要改

    if (feature.geometry.type === 'Polygon') { // 多边形coordinates.forEach((item) => {const mesh = createMesh(item) // 创建多边形mesh.name = feature.properties.nameprovince.add(mesh) // 添加到省份const line = createLine(item) // 创建线province.add(line) // 添加到省份})} else if (feature.geometry.type === 'MultiPolygon') { // 多多边形coordinates.forEach((item) => {item.forEach((item) => {const mesh = createMesh(item) // 创建多边形mesh.name = feature.properties.nameprovince.add(mesh) // 添加到省份const line = createLine(item) // 创建线province.add(line) // 添加到省份})})}