china map color

src/utils/earth-calcu.js

@@ -1,5 +1,6 @@
 import proj4 from 'proj4'
 import * as Three from 'three'
+import borderJson from '../views/prometheusMonitor/border.json'
 
 // geojson转化
 export function transformToLatLon(a, b) {
@@ -271,6 +272,65 @@ export function setSatellites(rotation, speed, monitorColor) {
   return { satellite: centerMesh, speed: speed }
 }
 
+const toChinaPosition = (longitude, latitude) => {
+  const cSCALE = 2048 / 360
+  return {
+    x: 1024 + (longitude) * cSCALE,
+    y: 512 + (-latitude) * cSCALE
+  }
+}
+export function getChinaCanvas() {
+  // getBoxArea()
+  const ctx = document.createElement('canvas').getContext('2d')
+  const canvasW = ctx.canvas.width = 2048
+  const canvasH = ctx.canvas.height = 1024
+  ctx.clearRect(0, 0, canvasW, canvasH)
+  // 画布背景
+  ctx.fillStyle = 'rgba(5,155,252,0)'
+  ctx.fillRect(0, 0, canvasW, canvasH)
+  ctx.beginPath()
+  ctx.strokeStyle = '#0c345385'
+  ctx.lineWidth = 1
+
+  borderJson.features.forEach(elem => {
+    // 新建一个省份容器：用来存放省份对应的模型和轮廓线
+    const coordinates = elem.geometry.coordinates
+    // const centerX = canvasW / 2
+    // const centerY = canvasH / 2
+    ctx.save()
+    // ctx.beginPath()
+    // ctx.translate(centerX, centerY)
+    coordinates.forEach(multiPolygon => {
+      multiPolygon.forEach(polygon => {
+        for (let i = 0; i < polygon.length; i++) {
+          // console.log(polygon[i])
+          const position = toChinaPosition(polygon[i][0], polygon[i][1])
+          if (i === 0) {
+            ctx.moveTo(position.x, position.y)
+          } else {
+            ctx.lineTo(position.x, position.y)
+          }
+        }
+      })
+    })
+  })
+  ctx.closePath()
+  // ctx.strokeStyle = '#00cccc'
+  // ctx.lineWidth = 1
+  // var gr = ctx.createLinearGradient(0, 0, 100, 100)
+  var g = ctx.createRadialGradient(700, 600, 50, 1000, 600, 600)
+  g.addColorStop(0, '#033e6a85')
+  g.addColorStop(1, '#0c345385')
+  // gr.addColorStop(0, 'RGBA(55,58,70,0.5)')
+  // // gr.addColorStop(0.5, 'rgb(0,255,0)')
+  // gr.addColorStop(1, 'RGBA(17,95,135,0.5)')
+
+  ctx.fillStyle = g
+  ctx.fill()
+  ctx.stroke()
+  ctx.restore()
+  return ctx.canvas
+}
 export {
   defaultFlyLineOptions
 }

src/views/prometheusMonitor/earth.vue

@@ -32,7 +32,7 @@
 </template>
 <script>
 import * as Three from 'three'
-import { defaultFlyLineOptions, getLineTexture, setSatellites, setCurPoint, setCurLinePoint, getChinaFont, filterRepeatPoint, getPosition, transformToLatLon } from '@/utils/earth-calcu'
+import { defaultFlyLineOptions, getLineTexture, setSatellites, setCurPoint, setCurLinePoint, getChinaFont, filterRepeatPoint, getPosition, transformToLatLon, getChinaCanvas } from '@/utils/earth-calcu'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { getEarthRegion, getProvinceDetail } from '@/api/top-menu/TotalNum'
 import chinaJson from './chinaProvince.json'
@@ -719,6 +719,7 @@ export default {
       var textureLoader = new Three.TextureLoader()
       this.worldMapTexture = textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/earth.jpg')
       this.chinaMapTexture = textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/china_under.jpg')
+      var chinaCanvasTexture = new Three.CanvasTexture(getChinaCanvas())
       textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/earth.jpg', (texture) => {
         var material = new Three.MeshLambertMaterial({
           // color: 0x0a263e,
@@ -733,6 +734,11 @@ export default {
           // blending: Three.AdditiveBlending,
           map: textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/earth_cloud.png')
         })
+        var material3 = new Three.MeshLambertMaterial({
+          transparent: true,
+          // opacity: 0.5,
+          map: chinaCanvasTexture
+        })
         this.mesh = new Three.Mesh(geometry, material)
         this.mesh.name = 'earth'
         // this.mesh.visible = false
@@ -740,6 +746,9 @@ export default {
         this.mesh2.name = 'earth-cloud'
         this.scene.add(this.mesh) // 5地球
         this.scene.add(this.mesh2) // 6
+        this.mesh3 = new Three.Mesh(geometry, material3)
+        this.mesh3.name = 'china-canvas'
+        this.scene.add(this.mesh3)
         this.setMark(this.mapMarks.concat(this.center)) // 打点
         // this.setAreaMark(this.area)
         // this.scene.rotation.z = Math.PI / 10