From bd9cb65c8ee634f1f7bad5a69e891e3a4f46b768 Mon Sep 17 00:00:00 2001 From: ZhangXianQiang <1135831638@qq.com> Date: 星期一, 01 四月 2024 15:54:41 +0800 Subject: [PATCH] feat:绘制地图 --- src/views/screen/components/screen-map-three/experience/world/world.js | 4 package.json | 1 src/assets/map/zigong1.json | 33 +---------- src/views/screen/components/screen-map-three/experience/world/map.js | 94 ++++++++++++++++++++++++++---- 4 files changed, 86 insertions(+), 46 deletions(-) diff --git a/package.json b/package.json index b700b9c..7311195 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "axios": "0.24.0", "clipboard": "2.0.8", "core-js": "3.25.3", + "d3": "^7.9.0", "echarts": "5.4.0", "echarts-gl": "^2.0.9", "element-ui": "2.15.14", diff --git a/src/assets/map/zigong1.json b/src/assets/map/zigong1.json index 79a7a15..1afbf17 100644 --- a/src/assets/map/zigong1.json +++ b/src/assets/map/zigong1.json @@ -13724,7 +13724,7 @@ { "type": "Feature", "geometry": { - "type": "Polygon", + "type": "MultiPolygon", "coordinates": [ [ [ @@ -15232,35 +15232,7 @@ 29.3673757219045, 0 ] - ] - ] - }, - "properties": { - "name": "鑷祦浜�", - "styleUrl": "#msn_ylw-pushpin", - "fill-opacity": 0.7019607843137254, - "fill": "#323232", - "stroke-opacity": 1, - "stroke": "#686868", - "stroke-width": 5, - "icon-scale": 1.1, - "icon-offset": [ - 20, - 2 - ], - "icon-offset-units": [ - "pixels", - "pixels" - ], - "icon": "http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png", - "Style": "BRUSH(id:ogr-brush-1);PEN(c:#4d90feff,w:1.000000px,id:ogr-pen-0);LABEL(f:榛戜綋,s:11.000000pt,c:#ffffffff,w:100.000000,o:#000000ff)" - } - }, - { - "type": "Feature", - "geometry": { - "type": "Polygon", - "coordinates": [ + ], [ [ 104.734902857524, @@ -20511,6 +20483,7 @@ "Style": "BRUSH(id:ogr-brush-1);PEN(c:#4d90feff,w:1.000000px,id:ogr-pen-0);LABEL(f:榛戜綋,s:11.000000pt,c:#ffffffff,w:100.000000,o:#000000ff)" } }, + { "type": "Feature", "geometry": { diff --git a/src/views/screen/components/screen-map-three/experience/world/map.js b/src/views/screen/components/screen-map-three/experience/world/map.js index 599d3df..e32efc6 100644 --- a/src/views/screen/components/screen-map-three/experience/world/map.js +++ b/src/views/screen/components/screen-map-three/experience/world/map.js @@ -1,24 +1,90 @@ import * as THREE from 'three'; +import * as d3 from 'd3'; +import mapData from '@/assets/map/zigong.json'; -export default class Test { + +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; - this.setGeometry(); - this.setMaterial(); - this.setMesh(); - } - setGeometry() { - this.geometry = new THREE.BoxGeometry(2,2,2); - } - setMaterial() { - this.geometryMaterial = new THREE.MeshStandardMaterial({ - color: '#db929d' + // 澶氫釜鎯呭喌 + 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); } - setMesh() { - this.geometrytMesh = new THREE.Mesh(this.geometry, this.geometryMaterial); - this.scene.add(this.geometrytMesh); + 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); } } \ No newline at end of file diff --git a/src/views/screen/components/screen-map-three/experience/world/world.js b/src/views/screen/components/screen-map-three/experience/world/world.js index 3a2bbe0..1b2690f 100644 --- a/src/views/screen/components/screen-map-three/experience/world/world.js +++ b/src/views/screen/components/screen-map-three/experience/world/world.js @@ -1,13 +1,13 @@ import EventEmitter from '../utils/eventEmitter'; -import Test from "./test"; +import Map from './map'; export default class World extends EventEmitter { constructor(experience) { super(); this.experience = experience; this.scene = this.experience.scene; - this.Test = new Test(this.experience); + this.Map = new Map(this.experience); } update() { -- Gitblit v1.8.0