3d行政区划-中国地图

前言

技术调研：做底代码平台的3d行政区组件 写的demo

效果图：

实现的功能项
地标、打点、飞线、three.js 3d 中国地图的一些基础配置

补充
geo中国地图文件获取

其他项:包

 "dependencies": {"d3": "^7.9.0","d3-geo": "^3.1.0","three": "^0.142.0","vue": "^3.3.4"},

源码

以下代码所需的图片可以在iconfont官网进行搜索，这里不做提供

<script setup>
import * as THREE from "three";import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import Stats from "three/examples/jsm/libs/stats.module.js";
import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js";import { Line2 } from 'three/examples/jsm/lines/Line2.js';
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js';import * as d3 from "d3";// 渲染性能监测工具
const stats = new Stats();
document.body.appendChild(stats.dom);// 初始化场景
const scene = new THREE.Scene();// 创建透视相机
const camera = new THREE.PerspectiveCamera(90,window.innerHeight / window.innerHeight,0.1,100000
);
// 设置相机位置
camera.position.set(0, 0, 120);
// 更新摄像头
camera.aspect = window.innerWidth / window.innerHeight;
// 更新摄像机的投影矩阵
camera.updateProjectionMatrix();
scene.add(camera);// // 加入辅助轴，帮助我们查看3维坐标轴
// const axesHelper = new THREE.AxesHelper(10);
// scene.add(axesHelper);// 添加环境光和直射光
const light = new THREE.AmbientLight(0xffffff, 100); // soft white light
scene.add(light);
const directionalLight = new THREE.DirectionalLight(0xffffff, 100);
scene.add(directionalLight);// 初始化渲染器
const renderer = new THREE.WebGLRenderer({ alpha: false, antialias: true });
// 设置渲染尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器添加到body
document.body.appendChild(renderer.domElement);// 初始化控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼
controls.enableDamping = true;// 监听屏幕大小改变的变化，动态设置渲染的尺寸
window.addEventListener("resize", () => {// 更新摄像头camera.aspect = window.innerWidth / window.innerHeight;// 更新摄像机的投影矩阵camera.updateProjectionMatrix();// 更新渲染器renderer.setSize(window.innerWidth, window.innerHeight);// 设置渲染器的像素比例renderer.setPixelRatio(window.devicePixelRatio);
});const canvas = renderer.domElement;
// 构造生成三维物体对象
const map = new THREE.Object3D();// 地图geojson的json文件得到的坐标点是经纬度数据，需要把它转为坐标数据，
// 这里使用插件d3 geoMercator()方法转换
// .center: 以北京经纬度坐标(116.23, 39.54)为中心点
// .translate 移动地图位置
const projection = d3.geoMercator().center([103.8, 35.0]).translate([0, 0, 0]);
const fileLoader = new THREE.FileLoader();
fileLoader.load("../public/中华人民共和国.geojson", (data) => {const loader = new FontLoader();loader.load("Alibaba PuHuiTi_Regular.json", (font) => {const chinaJsonData = JSON.parse(data);handleData(chinaJsonData, font);})
})/*** 处理地图数据* @param {Object} jsonData */
function handleData(jsonData, font) {// createPlane()// 全国信息const features = jsonData.features;features.forEach((feature) => {// 单个省份 对象const province = new THREE.Object3D();// 地址province.propertiesName = feature.properties.name;const coordinates = feature.geometry.coordinates;const color = "#ffffff"; // if (feature.geometry.type === "MultiPolygon") {// 多个，多边形const text = drawText(feature.properties, projection, font)if (text) {province.add(text)}coordinates.forEach((coordinate) => {// coordinate 多边形数据coordinate.forEach((coord) => {const mesh = drawExtrudeMesh(coord, 0x3a6877, projection, {depth: 6, borderColor: 0xffffff, borderWidth: 0.1, code:feature.properties.code});// const line = drawLine(coord, color, projection);// 唯一标识mesh.name = feature.properties.name;mesh.userData.originalColor = 0x3a6877; // 初始颜色province.add(mesh);// province.add(line);});});}if (feature.geometry.type === "Polygon") {const text = drawText(feature.properties, projection, font)if (text) {province.add(text)}// 多边形coordinates.forEach((coordinate) => {const mesh = drawExtrudeMesh(coordinate, 0x3a6877, projection, {depth: 6, borderColor: 0xffffff, borderWidth: 0.1, code: feature.properties.code||feature.properties.filename});// const line = drawLine(coordinate, color, projection);// 唯一标识mesh.userData.originalColor = 0x3a6877; // 初始颜色mesh.name = feature.properties.name;province.add(mesh);// province.add(line);});}map.add(province);map.rotation.x = -Math.PI / 5;});scene.add(map);createLine(projection)}
function createPlane() {var gridHelper = new THREE.GridHelper(300, 15, 0xff0000, 0x003333);gridHelper.material.depthWrite = false; // 禁止写入深度缓冲区gridHelper.material.depthTest = false;gridHelper.position.y = -10.1gridHelper.rotateX(Math.PI / 3);scene.add(gridHelper);// 创建一个平面作为地面var geometry = new THREE.PlaneGeometry(310, 310);var material = new THREE.MeshLambertMaterial({color: 0xffffff, // 白色transparent: true, // 开启透明效果opacity: 0.1, // 设置透明度side: THREE.DoubleSide, // 双面渲染});var mesh = new THREE.Mesh(geometry, material);scene.add(mesh);mesh.position.y = -10mesh.rotateX(-Math.PI / 6);
}function drawText(properties, projection, font) {// console.log('properties', properties)let center = properties.centroid || properties.centerlet name = properties.nameconst geometry = new TextGeometry(name, {font,depth: 0.1,size: 1, // 文本大小，默认为100width: 16,height:0.2 // 文字厚度});geometry.computeBoundingBox(); // 计算包围盒const boundingBox = geometry.boundingBox;const xOffset = (boundingBox.max.x - boundingBox.min.x) / 2; // X 方向偏移const yOffset = (boundingBox.max.y - boundingBox.min.y) / 2; // Y 方向偏移geometry.translate(-xOffset, -yOffset, 0);const textMaterial = new THREE.MeshBasicMaterial({color: 0x00fff0||0xb0c4ca,});const mesh = new THREE.Mesh(geometry, textMaterial);if (center) {let [x, y] = projection(center)mesh.position.set(x, -y, 6.5);return mesh}return null
}/*** 根据经纬度坐标生成几何物体* @param {Array} polygon 经纬度坐标数据* @param {string} color 物体颜色* @param {Function} projectionFun 经纬度转平面坐标函数* @returns THREE.Mesh*/
function drawExtrudeMesh(polygon, color, projectionFun, options = {}) {const { depth = 6, borderColor = 0xffffff, borderWidth = 0.1 } = options;// 创建形状const shape = new THREE.Shape();polygon.forEach((row, i) => {const [x, y] = projectionFun(row);if (i === 0) {shape.moveTo(x, -y);}shape.lineTo(x, -y);});// 挤压缓冲几何体const geometry = new THREE.ExtrudeGeometry(shape, {depth: depth, // 这里是高度参数bevelEnabled: true,bevelSegments: 10,steps: 1, // 用于分段的数量，默认 1bevelSize: 0.5, // 倒角大小bevelThickness: 0.5 // 倒角深度});// 材质const randomColor = (Math.random() * 0.5 + 0.5) * 0xffffff;const material = new THREE.MeshBasicMaterial({color: 0x3a6877 || randomColor,transparent: true,opacity: 0.5,});const mesh = new THREE.Mesh(geometry, material);// 添加边界const edges = new THREE.EdgesGeometry(geometry);const lineMaterial = new THREE.LineBasicMaterial({color: borderColor, // 边界颜色linewidth: borderWidth,    // 边界线宽度});const edgeLines = new THREE.LineSegments(edges, lineMaterial);mesh.add(edgeLines);mesh.userData = {originalColor: color,fillMaterial: material, // 默认材质originalBorderMaterial: lineMaterial, // 保存默认材质edgeLines: edgeLines, // 保存边界线};return mesh;
}/*** 根据坐标点一条连续的线* @param {*} polygon 经纬度坐标数据* @param {*} color 线的颜色* @param {*} projectionFun 经纬度转平面坐标函数* @returns THREE.Line*/
function drawLine(polygon, color, projectionFun) {const lineGeometry = new THREE.BufferGeometry();const pointsArr = [];polygon.forEach((row) => {const [x, y] = projectionFun(row);// 创建三维点pointsArr.push(new THREE.Vector3(x, -y, 6.4));});// console.log(pointsArr, 'pointsArr')// 放入多个点lineGeometry.setFromPoints(pointsArr);// 生成随机颜色const lineColor = new THREE.Color(Math.random() * 0.5 + 0.5,Math.random() * 0.5 + 0.5,Math.random() * 0.5 + 0.5);const lineMaterial = new THREE.LineBasicMaterial({color: '#ffffff',linewidth: 200});return new THREE.Line(lineGeometry, lineMaterial);
}// 地标
const rippleMaterial = new THREE.ShaderMaterial({uniforms: {uTime: { value: 0.0 },  // 时间uColor: { value: new THREE.Color(0xff00ff) },  // 气泡颜色},vertexShader: `varying vec2 vUv;void main() {vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);}`,fragmentShader: `uniform float uTime;uniform vec3 uColor;varying vec2 vUv;void main() {float dist = length(vUv - 0.5);  // 计算像素到中心的距离float ripple = sin(dist * 10.0 - uTime) * 0.5 + 0.5;  // 波纹效果gl_FragColor = vec4(uColor, ripple * (1.0 - 0.0));}`,transparent: true,  // 使气泡透明
});
let pos = [[116.23, 39.54], [117.2857, 31.8612]]
for (let p of pos) {const geometry = new THREE.CircleGeometry(3, 64); // 半径1，分段64const ripple = new THREE.Mesh(geometry, rippleMaterial);const [x, y] = projection(p);console.log(x, y, 'xy')ripple.position.set(x, -y, 7)map.add(ripple);
}// 创建圆形波纹的几何体 引入图片 打点
let pos2 = [[116.4074, 39.9042],  // 北京[117.3616, 39.3434],  // 天津[112.9834, 28.1127],  // 湖南[113.4244, 23.3417],  // 广东[108.7880, 23.8298],  // 广西[110.3492, 20.0174],  // 海南[104.0665, 30.5723],  // 四川
];
for (let p of pos2) {const texture = new THREE.TextureLoader().load('../public/坐标-fill.png');const material = new THREE.MeshBasicMaterial({ map: texture, color: 0x7777ff, transparent: true, side: THREE.DoubleSide });const plane = new THREE.Mesh(new THREE.PlaneGeometry(4, 4), material);const [x, y] = projection(p);plane.position.set(x, -y, 8.5);plane.rotateX(Math.PI / 2) // 将平面旋转到水平位置// plane.rotateY(Math.PI / 4); // 旋转 Y 轴，增加立体感plane.lookAt(camera.position); // plane.renderOrder = 1;map.add(plane);
}
// 创建圆形波纹的几何体function getPoint(startPoint, endPoint, projection) {// const startPoint = [116.4074, 39.9042]// const endPoint = [87.6177, 43.7928]let [sx, sy] = projection(startPoint)let [ex, ey] = projection(endPoint)// 定义起始点和终止点const sp = new THREE.Vector3(sx, -sy, 7.5);const ep = new THREE.Vector3(ex, -ey, 7.5);return [sp, ep]
}let curvature = 0.3;
const curveList = []
function createCurve(endPoint, startPoint) {// 计算起点到终点的方向向量和距离const direction = new THREE.Vector3().subVectors(endPoint, startPoint).normalize(); // 单位方向向量const distance = startPoint.distanceTo(endPoint); // 两点间距离// 计算垂直于方向向量的偏移向量（用来确定控制点）// const perpendicular = new THREE.Vector3(-direction.y, direction.x, 0).normalize();// 计算控制点位置：沿垂直方向偏移，偏移量与距离和曲率相关const controlPoint = new THREE.Vector3().addVectors(startPoint.clone().add(endPoint).multiplyScalar(0.5),  // 中点new THREE.Vector3(0, 0, curvature * distance)// perpendicular.multiplyScalar(curvature * distance * 0.5)  // 曲率控制的偏移量);// 创建二次贝塞尔曲线const curve = new THREE.QuadraticBezierCurve3(startPoint, controlPoint, endPoint);const points = curve.getPoints(500);if (points.some(point => isNaN(point.x) || isNaN(point.y) || isNaN(point.z))) {console.error("生成的点数组包含无效值");}return {curve,points};
}
function createLine(projection) {let pointList = [[[116.4074, 39.9042], [117.2857, 31.8612]], [[110.3492, 20.0174], [117.2857, 31.8612]],[[87.6177, 43.7928], [117.2857, 31.8612]], [[91.1164, 29.6500], [117.2857, 31.8612]],[[126.6617, 45.7421], [117.2857, 31.8612]], [[120.0934, 29.1828], [117.2857, 31.8612]], [[102.7097, 25.0453], [117.2857, 31.8612]]]for (let point of pointList) {let [sp, ep] = pointlet [startPoint, endPoint] = getPoint(sp, ep, projection)const texture = new THREE.TextureLoader().load('飞机-客机.png');texture.center.set(0.5, 0.5);const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true, side: THREE.DoubleSide });const planeMesh = new THREE.Mesh(new THREE.PlaneGeometry(6, 6), material);planeMesh.position.set(endPoint.x, endPoint.y, 8.5);map.add(planeMesh);// 创建线材质和几何体const lineMaterial = new LineMaterial({color: 0xffffff,linewidth: 4, // 设置线条宽度opacity: 0,transparent: true,depthWrite: false,depthTest: false});lineMaterial.needsUpdate = true;lineMaterial.resolution.set(window.innerWidth, window.innerHeight);// 创建线对象const lineGeometry = new LineGeometry();let { points, curve } = createCurve(startPoint, endPoint);let plane = createFlyLine(points)curveList.push({points,curve,plane,planeMesh})let pr = []for (let p of points) {pr.push(p.x, p.y, p.z)}lineGeometry.setPositions(pr); // 设置点的位置const line = new Line2(lineGeometry, lineMaterial);line.computeLineDistances(); // 计算线段的距离line.renderOrder = 1;map.add(line);}
}const uniforms = {// uTime: { value: 0.0 },// uSColor: { value: new THREE.Color(0xff0000) },// uEColor: { value: new THREE.Color(0xffffff) },// uWidth: { value: 5.0 },// uSpeed: { value: 1 },// uLength: { value: 0.8 }uTime: { value: 0.0 }, // 用于控制时间的 uniformuScale: { value: 1.0 }, // 点的缩放比例uColor: { value: new THREE.Color(0xffffff) }, // 颜色数组
};const commonUniforms = {u_time: {value: 0.0}
}
function initLineMaterial(setting) {let number = setting ? (Number(setting.number) || 1.0) : 4.0; // 在一个路径中同时存在的个数let speed = setting ? (Number(setting.speed) || 1.0) : 0.6;// 速度约大越快let length = setting ? (Number(setting.length) || 0.5) : 0.3;// 单根线的长度0-1之间1代表全满let size = setting ? (Number(setting.size) || 3.0) : 6.0;// 在最大的地方的大小 默认为3像素let color = setting ? setting.color || new THREE.Vector3(0, 1, 1) : new THREE.Vector3(0, 1, 1);// 颜色此处以Vector3的方式传入分别为RBG值 都是0-1的范围let singleUniforms = {u_time: commonUniforms.u_time,number: { type: 'f', value: number },speed: { type: 'f', value: speed },length: { type: 'f', value: length },size: { type: 'f', value: size },color: { type: 'v3', value: color },initialOpacity: { value: 1 }};let lineMaterial = new THREE.ShaderMaterial({uniforms: singleUniforms,vertexShader: `varying vec2 vUv;attribute float percent;varying float opacity;uniform float u_time;uniform float number;uniform float speed;uniform float length;uniform float size;void main(){vUv = uv;vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );float l = clamp(1.0-length,0.0,1.0);//空白部分长度占比gl_PointSize = clamp(fract(percent*number + l - u_time*number*speed)-l ,0.0,1.) * size * (1./length);opacity = gl_PointSize/size;gl_Position = projectionMatrix * mvPosition;}`,//顶点着色器部分fragmentShader: `precision mediump float;varying float opacity;uniform vec3 color;uniform float initialOpacity;void main(){if(opacity <=0.1){discard;}gl_FragColor = vec4(color,1.0);}`,// 片元着色器部分transparent: true,blending:THREE.AdditiveBlending,});return lineMaterial;
}function createFlyLine(points) {var geometry = new THREE.BufferGeometry().setFromPoints(points);let length = points.length;var percents = new Float32Array(length);for (let i = 0; i < points.length; i += 1) {percents[i] = (i / length);}geometry.setAttribute('percent', new THREE.BufferAttribute(percents, 1));let lineMaterial = initLineMaterial({color: new THREE.Color(0xffffff),});var flyLine = new THREE.Points(geometry, lineMaterial);// let euler = new THREE.Euler(Math.random() * Math.PI, Math.random() * Math.PI, 0);// flyLine.setRotationFromEuler(euler);map.add(flyLine)
}let t = 0
function animate(time) {controls.update();stats.update();if(rippleMaterial&&rippleMaterial.uniforms){rippleMaterial.uniforms.uTime.value += 0.1;}requestAnimationFrame(animate);// console.log(uniforms, 'uniforms')const speed = 0.001for (let obj of curveList) {// obj.planeMesh.uTime.value += 0.001;const curve = obj.curve;const position = curve.getPointAt(t);const tangent = curve.getTangentAt(t).normalize();const axis = new THREE.Vector3(0, 1, 0);const quaternion = new THREE.Quaternion().setFromUnitVectors(axis, tangent);// planeMesh.position.copy(position); // 更新位置obj.planeMesh.lookAt(position.clone().add(tangent)); // 设置朝向obj.planeMesh.position.set(position.x, position.y, position.z + 0.2)obj.planeMesh.quaternion.copy(quaternion);}t += speed;if (t > 1) t = 0;// uniforms.uTime.value += 0.01;if(commonUniforms&&commonUniforms.u_time){commonUniforms.u_time.value += 0.01;}// 使用渲染器渲染相机看这个场景的内容渲染出来renderer.render(scene, camera);}
animate();</script>