import * as THREE from 'three'; import * as d3 from 'd3'; import mapData from '@/assets/map/zigong.json'; const projection = d3.geoMercator().center([104.779307, 29.33924]).translate([0, 0, 0]); export default class Map { constructor(experience) { this.experience = experience; this.scene = this.experience.scene; this.operationData(mapData); } operationData(jsondata) { this.map = new THREE.Object3D(); // geo信息 const features = jsondata.features; features.forEach((feature) => { // 单个省份 对象 const province = new THREE.Object3D(); // 地址 province.properties = feature.properties.name; const coordinates = feature.geometry.coordinates; // 多个情况 if (feature.geometry.type === "MultiPolygon") { coordinates.forEach((coordinate) => { coordinate.forEach((rows) => { const line = this.drawBoundary(rows); const mesh = this.drawExtrudeMesh(rows); province.add(line); province.add(mesh); }); }); } // 单个情况 if (feature.geometry.type === "Polygon") { coordinates.forEach((coordinate) => { const line = this.drawBoundary(coordinate); const mesh = this.drawExtrudeMesh(coordinate); province.add(line); province.add(mesh); }); } this.map.add(province); this.map.position.set(0, 0, 0); }); this.scene.add(this.map); } drawBoundary(polygon) { const points = []; for (let i = 0; i < polygon.length; i++) { const [x, y] = projection(polygon[i]); points.push(new THREE.Vector3(x, -y, 0)); } const lineGeometry = new THREE.BufferGeometry().setFromPoints(points); const lineMaterial = new THREE.LineBasicMaterial({ color: 'yellow' }); return new THREE.Line(lineGeometry, lineMaterial); } drawExtrudeMesh(polygon) { const shape = new THREE.Shape(); for (let i = 0; i < polygon.length; i++) { const [x, y] = projection(polygon[i]); if (i === 0) { shape.moveTo(x, -y); } shape.lineTo(x, -y); } const geometry = new THREE.ExtrudeGeometry(shape, { depth: 0, bevelEnabled: false }); const material = new THREE.MeshBasicMaterial({ color: '#fff', transparent: true, opacity: 0.2, }) return new THREE.Mesh(geometry, material); } }