fix

package-lock.json

@@ -33,6 +33,7 @@
         "normalize.css": "7.0.0",
         "nprogress": "0.2.0",
         "path-to-regexp": "2.4.0",
+        "proj4": "^2.8.1",
         "randomstring": "^1.2.1",
         "screenfull": "4.2.0",
         "script-loader": "0.7.2",
@@ -14967,6 +14968,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mgrs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz",
+      "integrity": "sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA=="
+    },
     "node_modules/microargs": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/microargs/-/microargs-1.1.0.tgz",
@@ -18067,6 +18073,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/proj4": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.8.1.tgz",
+      "integrity": "sha512-KK/bgM6oIwxdpeCaJ/JK3V1D8LMQCKKKzndab4/pYQNd+NVKTcddUNtds053Q110GxTALXVjx98L9f5q8xPVXQ==",
+      "dependencies": {
+        "mgrs": "1.0.0",
+        "wkt-parser": "^1.3.1"
+      }
+    },
     "node_modules/promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@@ -23519,6 +23534,11 @@
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
       "dev": true
     },
+    "node_modules/wkt-parser": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.3.2.tgz",
+      "integrity": "sha512-A26BOOo7sHAagyxG7iuRhnKMO7Q3mEOiOT4oGUmohtN/Li5wameeU4S6f8vWw6NADTVKljBs8bzA8JPQgSEMVQ=="
+    },
     "node_modules/word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -35709,6 +35729,11 @@
       "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
       "dev": true
     },
+    "mgrs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz",
+      "integrity": "sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA=="
+    },
     "microargs": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/microargs/-/microargs-1.1.0.tgz",
@@ -38253,6 +38278,15 @@
       "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
       "dev": true
     },
+    "proj4": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.8.1.tgz",
+      "integrity": "sha512-KK/bgM6oIwxdpeCaJ/JK3V1D8LMQCKKKzndab4/pYQNd+NVKTcddUNtds053Q110GxTALXVjx98L9f5q8xPVXQ==",
+      "requires": {
+        "mgrs": "1.0.0",
+        "wkt-parser": "^1.3.1"
+      }
+    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@@ -42660,6 +42694,11 @@
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
       "dev": true
     },
+    "wkt-parser": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.3.2.tgz",
+      "integrity": "sha512-A26BOOo7sHAagyxG7iuRhnKMO7Q3mEOiOT4oGUmohtN/Li5wameeU4S6f8vWw6NADTVKljBs8bzA8JPQgSEMVQ=="
+    },
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",

package.json

@@ -39,6 +39,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "proj4": "^2.8.1",
     "randomstring": "^1.2.1",
     "screenfull": "4.2.0",
     "script-loader": "0.7.2",

src/views/prometheusMonitor/earth.vue

@@ -6,6 +6,7 @@
 </template>
 <script>
 import * as Three from 'three'
+import proj4 from 'proj4'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { getEarthRegion, getEarthDetails } from '@/api/top-menu/TotalNum'
 import chinaJson from './chinaProvince.json'
@@ -47,7 +48,6 @@ export default {
       getEarthRegion().then(res => {
         const demo = res.data
         const that = this
-        // console.log(demo)
         for (let i = 0; i < demo.length; i++) {
           const modelItem = []
           const value = []
@@ -58,7 +58,6 @@ export default {
           modelItem['value'] = value
           that.mapMarks[i] = modelItem
         }
-        // console.log(that.mapMarks)
       })
       getEarthDetails('杭州').then(res => {
         const demo = res.data
@@ -132,11 +131,19 @@ export default {
         var material = new Three.MeshLambertMaterial({
           // color: 0x0000ff,
           transparent: true,
-          opacity: 0.99,
+          opacity: 0.96,
           map: texture
         })
+        var material2 = new Three.MeshLambertMaterial({
+          transparent: true,
+          opacity: 0.2,
+          // blending: Three.AdditiveBlending,
+          map: textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/earth_cloud.png')
+        })
         this.mesh = new Three.Mesh(geometry, material) // 网格模型对象Mesh
+        this.mesh2 = new Three.Mesh(geometry, material2)
         this.scene.add(this.mesh) // 网格模型添加到场景中
+        this.scene.add(this.mesh2)
         this.setMark(this.mapMarks) // 打点
         this.setAreaMark(this.area)
         // 执行渲染操作   指定场景、相机作为参数
@@ -162,7 +169,6 @@ export default {
         // this.renderer.setClearColor(0x03060f, 1) // 设置背景颜色
         const earth = document.getElementById('earth')
         earth.appendChild(this.renderer.domElement)
-        // this.setSatellitesAnimate()
         this.animate()
       })
     },
@@ -205,28 +211,31 @@ export default {
         const coordinates = elem.geometry.coordinates
         coordinates.forEach(multiPolygon => {
           if (elem.geometry.type === 'MultiPolygon') {
-            // multiPolygon.forEach(polygon => {
+            multiPolygon.forEach(polygon => {
-            //   const lineMaterial = new Three.LineBasicMaterial({ color: 0x3BFA9E }) // 0x3BFA9E
+              const lineMaterial = new Three.LineBasicMaterial({ color: 0x0d4178b5 }) // 0x3BFA9E
-            //   const positions = []
+              const positions = []
-            //   const linGeometry = new Three.BufferGeometry()
+              const linGeometry = new Three.BufferGeometry()
-            //   for (let i = 0; i < polygon.length; i++) {
+              for (let i = 0; i < polygon.length; i++) {
-            //     var pos = this.getPosition(polygon[i][0] + 90, polygon[i][1], 100)
+                const LL = this.transformToLatLon(polygon[i], continentsJson['hc-transform'].default)
-            //     if (pos.x) {
+                var pos = this.getPosition(LL.x + 90, LL.y, 100)
-            //       positions.push(pos.x, pos.y, pos.z)
+                if (pos.x) {
-            //     } else {
+                  positions.push(pos.x, pos.y, pos.z)
-            //       console.log(polygon[i])
+                } else {
-            //     }
+                  console.log(multiPolygon[i])
-            //   }
+                }
-            //   linGeometry.setAttribute('position', new Three.Float32BufferAttribute(positions, 3))
+              }
-            //   const line = new Three.Line(linGeometry, lineMaterial)
+              linGeometry.setAttribute('position', new Three.Float32BufferAttribute(positions, 3))
-            //   continents.add(line)
+              const line = new Three.Line(linGeometry, lineMaterial)
-            // })
+              continents.add(line)
+            })
           } else {
-            const lineMaterial = new Three.LineBasicMaterial({ color: 0x3BFA9E }) // 0x3BFA9E
+            const lineMaterial = new Three.LineBasicMaterial({ color: 0x0d4178b5 }) // 0x3BFA9E
             const positions = []
             const linGeometry = new Three.BufferGeometry()
             for (let i = 0; i < multiPolygon.length; i++) {
-              var pos = this.getPosition(multiPolygon[i][0] + 90, multiPolygon[i][1], 100)
+              // var pos = this.getPosition(multiPolygon[i][0] + 90, multiPolygon[i][1], 100)
+              const LL = this.transformToLatLon(multiPolygon[i], continentsJson['hc-transform'].default)
+              var pos = this.getPosition(LL.x + 90, LL.y, 100)
               if (pos.x) {
                 positions.push(pos.x, pos.y, pos.z)
               } else {
@@ -242,6 +251,45 @@ export default {
       })
       this.scene.add(map1)
     },
+    transformToLatLon(a, b) {
+      var d = b.jsonmarginX
+      var f = b.jsonmarginY
+      var e = b.jsonres
+      e = void 0 === e ? 1 : e
+      var n = b.scale
+      n = void 0 === n ? 1 : n
+      var t = b.xoffset
+      var r = b.xpan
+      var m = b.yoffset
+      var h = b.ypan
+      a = {
+        x: ((a[0] - (void 0 === d ? 0 : d)) / e - (void 0 === r ? 0 : r)) / n + (void 0 === t ? 0 : t),
+        y: ((a[1] - (void 0 === f ? 0 : f)) / e + (void 0 === h ? 0 : h)) / n + (void 0 === m ? 0 : m)
+      }
+      d = b.cosAngle || b.rotation && Math.cos(b.rotation)
+      f = b.sinAngle || b.rotation && Math.sin(b.rotation)
+      b = proj4(b.crs, 'WGS84', b.rotation ? {
+        x: a.x * d + a.y * -f,
+        y: a.x * f + a.y * d
+      } : a)
+      return {
+        y: b.y,
+        x: b.x
+      }
+    },
+    // getPosition(_longitude, _latitude, _radius) {
+    //   var lg = Three.Math.degToRad(_longitude)
+    //   var lt = Three.Math.degToRad(_latitude)
+    //   var temp = _radius * Math.cos(lt)
+    //   var x = temp * Math.sin(lg)
+    //   var y = _radius * Math.sin(lt)
+    //   var z = temp * Math.cos(lg)
+    //   return {
+    //     x: x,
+    //     y: y,
+    //     z: z
+    //   }
+    // },
     init() {
       this.initRender()
       this.initScene()
@@ -262,29 +310,6 @@ export default {
       }
       document.addEventListener('mousedown', this.onDocumentMouseDown, false)
     },
-    setSatellitesAnimate() {
-      // 定点光圈动画
-      if (this.scene.children[3].children.length) {
-        this.scene.children[3].children.forEach((mesh) => {
-          this.mshs += 0.005
-          mesh.scale.set(this.mshs, this.mshs, 3 * this.mshs)
-          if (this.mshs <= 1.5) {
-            // mesh._s=1，透明度=0 mesh._s=1.5，透明度=1
-            mesh.material.opacity = (this.mshs - 1) * 2
-          } else if (this.mshs > 1.5 && this.mshs <= 2) {
-            // mesh._s=1.5，透明度=1 mesh._s=2，透明度=0
-            mesh.material.opacity = 1 - (this.mshs - 1.5) * 2
-          } else {
-            this.mshs = 1.0
-          }
-        })
-      }
-      // 小卫星飞行轨道动画
-      for (let i = 0; i < this.satellitesArr.length; i++) {
-        this.satellitesArr[i].satellite.rotation.z -= this.satellitesArr[i].speed
-      }
-      this.saaniId = requestAnimationFrame(this.setSatellitesAnimate)
-    },
     onDocumentMouseDown(event) {
       // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
       console.log('fk')
@@ -477,6 +502,26 @@ export default {
       this.scene.rotation.y += 0.005
       this.clock = new Three.Clock()// 用于更新轨道控制器
       // const delta = this.clock.getDelta()
+      // 定点光圈动画
+      if (this.scene.children[6].children.length) {
+        this.scene.children[6].children.forEach((mesh) => {
+          this.mshs += 0.005
+          mesh.scale.set(this.mshs, this.mshs, 3 * this.mshs)
+          if (this.mshs <= 1.5) {
+            // mesh._s=1，透明度=0 mesh._s=1.5，透明度=1
+            mesh.material.opacity = (this.mshs - 1) * 2
+          } else if (this.mshs > 1.5 && this.mshs <= 2) {
+            // mesh._s=1.5，透明度=1 mesh._s=2，透明度=0
+            mesh.material.opacity = 1 - (this.mshs - 1.5) * 2
+          } else {
+            this.mshs = 1.0
+          }
+        })
+      }
+      // 小卫星飞行轨道动画
+      for (let i = 0; i < this.satellitesArr.length; i++) {
+        this.satellitesArr[i].satellite.rotation.z -= this.satellitesArr[i].speed
+      }
       this.render()
       this.orbitControls.update()
       this.aniId = requestAnimationFrame(this.animate)

yarn.lock

@@ -8388,6 +8388,11 @@
   "resolved" "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz"
   "version" "1.1.2"
 
+"mgrs@1.0.0":
+  "integrity" "sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA=="
+  "resolved" "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz"
+  "version" "1.0.0"
+
 "microargs@1.1.0":
   "integrity" "sha1-XsPNi9dzf1fUhVlBMZM+qUMJ+1k="
   "resolved" "https://registry.npmjs.org/microargs/-/microargs-1.1.0.tgz"
@@ -10195,6 +10200,14 @@
   "resolved" "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz"
   "version" "2.0.3"
 
+"proj4@^2.8.1":
+  "integrity" "sha512-KK/bgM6oIwxdpeCaJ/JK3V1D8LMQCKKKzndab4/pYQNd+NVKTcddUNtds053Q110GxTALXVjx98L9f5q8xPVXQ=="
+  "resolved" "https://registry.npmjs.org/proj4/-/proj4-2.8.1.tgz"
+  "version" "2.8.1"
+  dependencies:
+    "mgrs" "1.0.0"
+    "wkt-parser" "^1.3.1"
+
 "promise-inflight@^1.0.1":
   "integrity" "sha1-mEcocL8igTL8vdhoEputEsPAKeM="
   "resolved" "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz"
@@ -13080,6 +13093,11 @@
   dependencies:
     "isexe" "^2.0.0"
 
+"wkt-parser@^1.3.1":
+  "integrity" "sha512-A26BOOo7sHAagyxG7iuRhnKMO7Q3mEOiOT4oGUmohtN/Li5wameeU4S6f8vWw6NADTVKljBs8bzA8JPQgSEMVQ=="
+  "resolved" "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.3.2.tgz"
+  "version" "1.3.2"
+
 "word-wrap@~1.2.3":
   "integrity" "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ=="
   "resolved" "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz"