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