fix

src/views/prometheusMonitor/earth.vue

@@ -9,6 +9,7 @@ import * as Three from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { getEarthRegion, getEarthDetails } from '@/api/top-menu/TotalNum'
 import chinaJson from './chinaProvince.json'
+import continentsJson from './worldContinents.json'
 
 export default {
   data() {
@@ -127,7 +128,7 @@ export default {
       var geometry = new Three.SphereGeometry(100, 40, 40) // 创建一个球体几何对象
       // 设置纹理贴图
       var textureLoader = new Three.TextureLoader()
-      textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/earth.png', (texture) => {
+      textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/earth.jpg', (texture) => {
         var material = new Three.MeshLambertMaterial({
           // color: 0x0000ff,
           transparent: true,
@@ -161,7 +162,7 @@ export default {
         // this.renderer.setClearColor(0x03060f, 1) // 设置背景颜色
         const earth = document.getElementById('earth')
         earth.appendChild(this.renderer.domElement)
-        this.setSatellitesAnimate()
+        // this.setSatellitesAnimate()
         this.animate()
       })
     },
@@ -181,10 +182,15 @@ export default {
             const positions = []
             const linGeometry = new Three.BufferGeometry()
             for (let i = 0; i < polygon.length; i++) {
-              var pos = this.getPosition(polygon[i][0], polygon[i][1], 100)
-              positions.push(pos.x, pos.y, pos.z)
+              var pos = this.getPosition(polygon[i][0] + 90, polygon[i][1], 100)
+              if (pos.x) {
+                positions.push(pos.x, pos.y, pos.z)
+              } else {
+                console.log(polygon[i])
+              }
             }
-            linGeometry.setAttribute('position', new Three.Float32BufferAttribute(positions, 3))
+            const ps = new Three.Float32BufferAttribute(positions, 3)
+            linGeometry.setAttribute('position', ps)
             const line = new Three.Line(linGeometry, lineMaterial)
             province.add(line)
           })
@@ -192,6 +198,49 @@ export default {
         map.add(province)
       })
       this.scene.add(map)
+
+      const map1 = new Three.Object3D()
+      continentsJson.features.forEach(elem => {
+        const continents = new Three.Object3D()
+        const coordinates = elem.geometry.coordinates
+        coordinates.forEach(multiPolygon => {
+          if (elem.geometry.type === 'MultiPolygon') {
+            // multiPolygon.forEach(polygon => {
+            //   const lineMaterial = new Three.LineBasicMaterial({ color: 0x3BFA9E }) // 0x3BFA9E
+            //   const positions = []
+            //   const linGeometry = new Three.BufferGeometry()
+            //   for (let i = 0; i < polygon.length; i++) {
+            //     var pos = this.getPosition(polygon[i][0] + 90, polygon[i][1], 100)
+            //     if (pos.x) {
+            //       positions.push(pos.x, pos.y, pos.z)
+            //     } else {
+            //       console.log(polygon[i])
+            //     }
+            //   }
+            //   linGeometry.setAttribute('position', new Three.Float32BufferAttribute(positions, 3))
+            //   const line = new Three.Line(linGeometry, lineMaterial)
+            //   continents.add(line)
+            // })
+          } else {
+            const lineMaterial = new Three.LineBasicMaterial({ color: 0x3BFA9E }) // 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)
+              if (pos.x) {
+                positions.push(pos.x, pos.y, pos.z)
+              } else {
+                console.log(multiPolygon[i])
+              }
+            }
+            linGeometry.setAttribute('position', new Three.Float32BufferAttribute(positions, 3))
+            const line = new Three.Line(linGeometry, lineMaterial)
+            continents.add(line)
+          }
+        })
+        map1.add(continents)
+      })
+      this.scene.add(map1)
     },
     init() {
       this.initRender()