add 3d earth by xyh

src/views/historicTaskScreen.vue

@@ -475,8 +475,9 @@
                     </el-image>
                   </div>
 
-                  <div v-if="!echartMapFlag" id="mapData" style="height:260px; width:100%; top:-20px;"></div>
-                  <div v-if="echartMapFlag" class="tempalte_no_data" style="height:86%;"> 暂无数据</div>
+                  <!-- <div v-if="!echartMapFlag" id="mapData" style="height:260px; width:100%; top:-20px;"></div>
+                  <div v-if="echartMapFlag" class="tempalte_no_data" style="height:86%;"> 暂无数据</div> -->
+                    <div id="chart-container"></div>
 
                   <div class="center_no_data" v-if="false">
                     <el-image
@@ -707,6 +708,7 @@ import { request } from '../utils/request';
 var uploadedDataURL = require('../../public/json/taiyuan.json')
 import './taskScreen.css'
 import Videojs from "video.js"; // 引入Videojs
+import 'echarts-gl';
 
 export default {
   components:{
@@ -731,6 +733,7 @@ export default {
       websocketOrder: null, //建立的连接
 
       updatekey:'1',
+      myChart:'',
       myChart1:'',
       myChart2:'',
       myChart3:'',
@@ -802,6 +805,51 @@ export default {
       var tmp =  list.find(k => k["value"] == id)
       return tmp["label"]
     },
+    getEarth(){
+ // 获取DOM容器
+    const chartContainer = document.getElementById('chart-container');
+
+    // 初始化ECharts图表
+    this.myChart = echarts.init(chartContainer);
+    const ROOT_PATH = 'https://echarts.apache.org/examples';
+
+    // 设置图表的配置项和数据
+    const option = {
+       backgroundColor: '#000',
+  globe: {
+    baseTexture: ROOT_PATH + '/data-gl/asset/earth.jpg',
+    heightTexture: ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg',
+    displacementScale: 0.1,
+    shading: 'lambert',
+    environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
+    light: {
+      ambient: {
+        intensity: 0.1
+      },
+      main: {
+        intensity: 1.5
+      }
+    },
+    layers: [
+      {
+        type: 'blend',
+        blendTo: 'emission',
+        texture: ROOT_PATH + '/data-gl/asset/night.jpg'
+      },
+      {
+        type: 'overlay',
+        texture: ROOT_PATH + '/data-gl/asset/clouds.png',
+        shading: 'lambert',
+        distance: 5
+      }
+    ]
+  },
+  series: []
+    };
+
+    // 使用配置项和数据显示图表
+    this.myChart.setOption(option);
+    },
 
     // 表格样式修改
     changeHeaderCellStyle(row,column, rowIndex, columnIndex){
@@ -2582,6 +2630,8 @@ export default {
     this.getAllSystems()
     // 建立任务的weksocket链接
     this.initWebsoket()
+
+    this.getEarth()
   },
   beforeDestroy() {
     if(this.playerList.length){

src/views/situationScreen.vue

@@ -472,7 +472,7 @@
                       单位分布
                     </div>
                     <el-image
-                      @click="showFull('mapData')"
+                      @click="showFull('chart-earth')"
                       style="width: 20px; height: 20px; margin-right:6px; margin-top: -10px;"
                       :src="require('../assets/img/iconMore.svg')"
                       fit="contain"
@@ -481,9 +481,9 @@
                     </el-image>
                   </div>
 
-                  <div v-if="!echartMapFlag" id="mapData" style="height:260px; width:100%; top:-20px;"></div>
-                  <div v-if="echartMapFlag" class="tempalte_no_data" style="height:86%;"> 暂无数据</div>
-
+                  <!-- <div v-if="!echartMapFlag" id="mapData" style="height:260px; width:100%; top:-20px;"></div>
+                  <div v-if="echartMapFlag" class="tempalte_no_data" style="height:86%;"> 暂无数据</div> -->
+                   <div id="chart-earth" style="height:260px; width:100%; top:-20px;"></div>
                   <div class="center_no_data" v-if="false">
                     <el-image
                       style="width: 100px; height: 100px; margin-right:6px;"
@@ -713,7 +713,7 @@ import { request } from '../utils/request';
 var uploadedDataURL = require('../../public/json/taiyuan.json')
 import './taskScreen.css'
 import Videojs from "video.js"; // 引入Videojs
-
+import 'echarts-gl';
 export default {
   components:{
     myFlylineChartEnhanced,
@@ -737,6 +737,7 @@ export default {
       websocketOrder: null, //建立的连接
 
       updatekey:'1',
+      myChart:'',
       myChart1:'',
       myChart2:'',
       myChart3:'',
@@ -806,7 +807,83 @@ export default {
       // window.location.href = "/taskScreen"
       this.$router.push("/taskScreen")
     },
+    getEarth(){
+ // 获取DOM容器
+    const chartContainer = document.getElementById('chart-earth');
+    // 初始化ECharts图表
+    this.myChart = echarts.init(chartContainer);
+    var datas = [];
+    console.log('this.taiyuanMapDatas :>> ', this.taiyuanMapData);
+    for (let item in this.taiYuanMapData){ 
+        var array = this.taiYuanMapData[item]
+        let data = {
+          value:[array[0],array[1],0],
+          name:item
+        }
+        console.log('data :>> ', data);
+        datas.push(data)
+ 
+    }
+    console.log('datas :>> ', datas);
+
+    // 设置图表的配置项和数据
+    const option = {
+       backgroundColor: '#000',
+         
+  globe: {
+    baseTexture:  require('../assets/img/earth.jpg'),
+    heightTexture: require('../assets/img/bathymetry_bw_composite_4k.jpg'),
+    displacementScale: 0.1,
+    shading: 'lambert',
+    environment: require('../assets/img/starfield.jpg'),
+      viewControl: {
+    distance: 1,  // 地球与相机之间的距离
+    targetCoord: [112.548879, 37.87059],  // 设置地球的目标位置为太原市的经纬度
+    autoRotate: false,  // 自动旋转地球
 
+  },
+    light: {
+      ambient: {
+        intensity: 0.1
+      },
+      main: {
+        intensity: 1.5
+      }
+    },
+    layers: [
+      {
+        type: 'blend',
+        blendTo: 'emission',
+        texture: require('../assets/img/night.jpg')
+      },
+      {
+        type: 'overlay',
+        texture:  require('../assets/img/clouds.png'),
+        shading: 'lambert',
+        distance: 5
+      }
+    ]
+  },
+
+  series: [ {
+    type: 'scatter3D',
+    symbolSize: 10,
+    coordinateSystem: 'globe',
+    data: datas,
+    itemStyle: {
+      color: 'red'  // 设置标记点的颜色
+    },
+    label: {
+      show: true,
+      formatter: '{b}',  // 设置标记点的文本显示为数据的名称
+      position: 'top'
+    }
+  }]
+    };
+
+    // 使用配置项和数据显示图表
+    this.myChart.setOption(option);
+    },
     // 获取单位名称
     getName(list, id) {
       var tmp =  list.find(k => k["value"] == id)
@@ -1203,6 +1280,7 @@ export default {
 
       // 建立指令websocket 链接
       this.initInstructWebsoket()
+      console.log('this.taiYuanMapData :>> ', this.taiYuanMapData);
     },
 
     // 获取任务地图的信息
@@ -2592,6 +2670,10 @@ export default {
     this.getAllSystems()
     // 建立任务的weksocket链接
     this.initWebsoket()
+
+      setTimeout(() => {
+    this.getEarth();
+  }, 3000);
   },
   beforeDestroy() {
     if(this.playerList.length){