gddev

package-lock.json

@@ -8,6 +8,7 @@
       "name": "globe-map",
       "version": "1.0.0",
       "dependencies": {
+        "@amap/amap-jsapi-loader": "^1.0.1",
         "autofit.js": "^3.1.0",
         "d3-geo": "^3.1.0",
         "delaunator": "^5.0.0",
@@ -32,6 +33,12 @@
         "vite": "^4.3.2"
       }
     },
+    "node_modules/@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw==",
+      "license": "MIT"
+    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "autofit.js": "^3.1.0",
     "d3-geo": "^3.1.0",
     "delaunator": "^5.0.0",

src/views/gdMap/map.js

@@ -28,6 +28,7 @@ import {
   AddEquation,
   DstColorFactor,
   OneFactor,
+  CanvasTexture,
 } from "three"
 import {
   Mini3d,
@@ -60,6 +61,8 @@ function sortByValue(data) {
   data.sort((a, b) => b.value - a.value)
   return data
 }
+import AMapLoader from '@amap/amap-jsapi-loader';
+
 export class World extends Mini3d {
   constructor(canvas, assets) {
     super(canvas)
@@ -154,7 +157,7 @@ export class World extends Mini3d {
     // 创建轮廓
     this.createStorke()
     // 创造3d地形
-    this.createTerrain()
+    // this.createTerrain()
     // this.time.on("tick", () => {
     //   console.log(this.camera.instance.position);
     // });
@@ -406,14 +409,16 @@ export class World extends Mini3d {
     let focusMapGroup = new Group()
     this.focusMapGroup = focusMapGroup
     let { china, chinaTopLine } = this.createChina()
-    let { map, mapTop, mapLine } = this.createProvince()
+    // let { map, mapTop, mapLine } = this.createProvince()
+    this.createProvince().then(({ map, mapTop, mapLine }) => {
+      map.setParent(focusMapGroup)
+      mapTop.setParent(focusMapGroup)
+      mapLine.setParent(focusMapGroup)
+    })
     china.setParent(mapGroup)
     chinaTopLine.setParent(mapGroup)
     // 创建扩散
     this.createDiffuse()
-    map.setParent(focusMapGroup)
-    mapTop.setParent(focusMapGroup)
-    mapLine.setParent(focusMapGroup)
     focusMapGroup.position.set(0, 0, -0.01)
     focusMapGroup.scale.set(1, 1, 0)
     mapGroup.add(focusMapGroup)
@@ -456,11 +461,63 @@ export class World extends Mini3d {
     chinaTopLine.lineGroup.position.z += 0.01
     return { china, chinaTopLine }
   }
-  createProvince() {
-    let mapJsonData = this.assets.instance.getResource("mapJson")
-    let [topMaterial, sideMaterial] = this.createProvinceMaterial()
-    this.focusMapTopMaterial = topMaterial
-    this.focusMapSideMaterial = sideMaterial
+  async createProvince() {
+    let mapJsonData = this.assets.instance.getResource("mapJson");
+    let [topMaterial, sideMaterial] = this.createProvinceMaterial();
+    this.focusMapTopMaterial = topMaterial;
+    this.focusMapSideMaterial = sideMaterial;
+
+    try {
+      const AMap = await AMapLoader.load({
+        key: 'f2d901f327047698b57f1f9ef955eaaf', // 请替换为你的真实密钥
+        version: '2.0',
+        plugins: []
+      });
+
+      // 创建隐藏的地图容器
+      const mapContainer = document.createElement('div');
+      mapContainer.style.display = 'none';
+      document.body.appendChild(mapContainer);
+
+      const amap = new AMap.Map(mapContainer, {
+        zoom: 10,
+        center: this.geoProjectionCenter
+      });
+
+      // 等待地图加载完成
+      await new Promise((resolve) => {
+        amap.on('complete', () => {
+          resolve();
+        });
+      });
+
+      // 获取地图的 Canvas 元素
+      const mapCanvas = amap.getContainer().querySelector('canvas');
+      if (mapCanvas) {
+        if (mapCanvas.width > 0 && mapCanvas.height > 0) {
+          const texture = new CanvasTexture(mapCanvas);
+          texture.needsUpdate = true;
+      
+          // 更新顶部材质
+          topMaterial.map = texture;
+          topMaterial.transparent = true;
+          topMaterial.opacity = 1;
+          topMaterial.needsUpdate = true;
+        } else {
+          console.error('高德地图 canvas 尺寸为零，无法创建纹理');
+        }
+      } else {
+        console.error('未能获取到高德地图的 Canvas 元素');
+      }
+      // 更新顶部材质
+      topMaterial.map = texture;
+      topMaterial.transparent = true;
+      topMaterial.opacity = 1;
+      topMaterial.needsUpdate = true;
+    } catch (error) {
+      console.error('加载高德地图失败:', error);
+    }
+
     let map = new ExtrudeMap(this, {
       geoProjectionCenter: this.geoProjectionCenter,
       geoProjectionScale: this.geoProjectionScale,
@@ -470,25 +527,27 @@ export class World extends Mini3d {
       topFaceMaterial: topMaterial,
       sideMaterial: sideMaterial,
       renderOrder: 9,
-    })
+    });
+
     let faceMaterial = new MeshStandardMaterial({
       color: 0xffffff,
       transparent: true,
       opacity: 0.5,
       // fog: false,
-    })
+    });
+
     let faceGradientShader = new GradientShader(faceMaterial, {
       // uColor1: 0x2a6e92,
       // uColor2: 0x102736,
       uColor1: 0x12bbe0,
       uColor2: 0x0094b5,
-    })
-    this.defaultMaterial = faceMaterial
-    this.defaultLightMaterial = this.defaultMaterial.clone()
-    this.defaultLightMaterial.color = new Color("rgba(115,208,255,1)")
-    this.defaultLightMaterial.opacity = 0.8
-    // this.defaultLightMaterial.emissive.setHex(new Color("rgba(115,208,255,1)"));
-    // this.defaultLightMaterial.emissiveIntensity = 3.5;
+    });
+
+    this.defaultMaterial = faceMaterial;
+    this.defaultLightMaterial = this.defaultMaterial.clone();
+    this.defaultLightMaterial.color = new Color("rgba(115,208,255,1)");
+    this.defaultLightMaterial.opacity = 0.8;
+
     let mapTop = new BaseMap(this, {
       geoProjectionCenter: this.geoProjectionCenter,
       geoProjectionScale: this.geoProjectionScale,
@@ -496,33 +555,38 @@ export class World extends Mini3d {
       data: mapJsonData,
       material: faceMaterial,
       renderOrder: 2,
-    })
+    });
+
     mapTop.mapGroup.children.map((group) => {
       group.children.map((mesh) => {
         if (mesh.type === "Mesh") {
-          this.eventElement.push(mesh)
+          this.eventElement.push(mesh);
         }
-      })
-    })
+      });
+    });
+
     this.mapLineMaterial = new LineBasicMaterial({
       color: 0xffffff,
       opacity: 0,
       transparent: true,
       fog: false,
-    })
+    });
+
     let mapLine = new Line(this, {
       geoProjectionCenter: this.geoProjectionCenter,
       geoProjectionScale: this.geoProjectionScale,
       data: mapJsonData,
       material: this.mapLineMaterial,
       renderOrder: 3,
-    })
-    mapLine.lineGroup.position.z += this.depth + 0.23
+    });
+
+    mapLine.lineGroup.position.z += this.depth + 0.23;
+
     return {
       map,
       mapTop,
       mapLine,
-    }
+    };
   }
   createProvinceMaterial() {
     let topMaterial = new MeshLambertMaterial({