地图底层加载完成，webgl性能问题遗留

components/Map.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="mars3dContainer" ref="mapRef" id="mars3dContainer"></div>
+</template>
+
+<script>
+import { ms3dConfig } from '@/config/mapConfig'
+export default {
+  name: "Map",
+  mounted() {
+    this.$nextTick(() => {
+      if (this.$refs.mapRef) {
+        this.initMap()
+      }
+    })
+  },
+  methods: {
+    //创建三维地球场景
+    initMap () {
+      this.map = new mars3d.Map(this.$refs.mapRef, ms3dConfig)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .map-container {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    transform: translateX(-50%);
+    left: 50%;
+    top: 0;
+    z-index: 1;
+  }
+</style>

nuxt.config.js

@@ -16,10 +16,20 @@ export default {
       { name: 'format-detection', content: 'telephone=no' }
     ],
     link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+      { rel: 'stylesheet', href: '/libs/mars3d-cesium/Widgets/widgets.css' },
+      { rel: 'stylesheet', href: '/libs/mars3d/mars3d.css' },
     ],
-    css: [],
+    css: [
-    js: []
+    ],
+    js: [],
+
+    script: [
+      '/libs/mars3d-cesium/Cesium.js',
+      // '/libs/turf.min.js',
+      '/libs/mars3d/mars3d.js',
+      // '/libs/mars3d/plugins/space/mars3d-space.js',
+    ].map(src => ({ src }))
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css

pages/visual/PeakCoalView.vue

@@ -1,65 +1,69 @@
 <template>
-  <div class="peak-coal-content" :style="autoStyle">
+  <div class="peak-coal-content">
-    <div class="header-content">
+    <div class="container">
+      <div class="header-content point">
 
-    </div>
+      </div>
 
-    <div class="body-content">
+      <div class="body-content point">
-      <!--      左侧内容-->
+        <!--      左侧内容-->
-      <div class="left-content">
+        <div class="left-content point">
-        <div class="left-data-panel">
+          <div class="left-data-panel">
-          <a-row :gutter="24">
+            <a-row :gutter="24">
-            <a-col :span="12">
+              <a-col :span="12">
-              <air-quality/>
+                <air-quality/>
-            </a-col>
+              </a-col>
-            <a-col :span="12">
+              <a-col :span="12">
-              <pollutant-trends/>
+                <pollutant-trends/>
-            </a-col>
+              </a-col>
-            <a-col :span="24">
+              <a-col :span="24">
-              <overview-pollutants/>
+                <overview-pollutants/>
-            </a-col>
+              </a-col>
-            <a-col :span="24">
+              <a-col :span="24">
-              <check-data/>
+                <check-data/>
-            </a-col>
+              </a-col>
-          </a-row>
+            </a-row>
+          </div>
+        </div>
+
+        <!--      中间内容-->
+        <div class="center-content point-none">
+
+        </div>
+        <!--      右侧内容-->
+        <div class="right-content point">
+          <div class="right-data-panel">
+            <a-row :gutter="24">
+              <a-col :span="12">
+                <energy-use/>
+              </a-col>
+              <a-col :span="12">
+                <enterprise-operations/>
+              </a-col>
+              <a-col :span="24">
+                <device-run/>
+              </a-col>
+              <a-col :span="12">
+                <warning-statistics/>
+              </a-col>
+              <a-col :span="12">
+                <latest-warning/>
+              </a-col>
+            </a-row>
+          </div>
         </div>
       </div>
 
-      <!--      中间内容-->
+      <div class="footer-content point">
-      <div class="center-content">
 
       </div>
-      <!--      右侧内容-->
+
-      <div class="right-content">
+      <div class="left-icon point"></div>
-        <div class="right-data-panel">
+
-          <a-row :gutter="24">
+      <div class="right-icon point"></div>
-            <a-col :span="12">
-              <energy-use/>
-            </a-col>
-            <a-col :span="12">
-              <enterprise-operations/>
-            </a-col>
-            <a-col :span="24">
-              <device-run/>
-            </a-col>
-            <a-col :span="12">
-              <warning-statistics/>
-            </a-col>
-            <a-col :span="12">
-              <latest-warning/>
-            </a-col>
-          </a-row>
-        </div>
-      </div>
     </div>
 
-    <div class="footer-content">
+    <Map />
-
-    </div>
-
-    <div class="left-icon"></div>
-
-    <div class="right-icon"></div>
 
   </div>
 </template>
@@ -67,6 +71,7 @@
 <script>
 export default {
   name: "PeakCoalView",
+  components: {},
   data() {
     return {
       autoStyle: {}
@@ -144,6 +149,22 @@ body, html, #__nuxt, #__layout {
   overflow: hidden;
   position: relative;
   user-select: none;
+  .point-none {
+    pointer-events: none;
+  }
+  .point {
+    pointer-events: auto;
+  }
+  .container {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 2;
+    pointer-events: none;
+
+  }
 
   .header-content {
     position: absolute;
@@ -151,6 +172,7 @@ body, html, #__nuxt, #__layout {
     height: 507px;
     width: 100%;
     background: url("assets/peakCoalImages/header/first-title-bg.png") no-repeat center center;
+
   }
 
   .body-content {
@@ -201,6 +223,7 @@ body, html, #__nuxt, #__layout {
       width: 4383px;
       height: 2628px;
       background: url("assets/peakCoalImages/center/center-content-bg.png") no-repeat center center;
+      pointer-events: none;
     }
   }
 

static/libs/mars3d-cesium/Assets/Textures/NaturalEarthII/tilemapresource.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+    <TileMap version="1.0.0" tilemapservice="http://tms.osgeo.org/1.0.0">
+      <Title>NE2_HR_LC_SR_W_DR_recolored.tif</Title>
+      <Abstract></Abstract>
+      <SRS>EPSG:4326</SRS>
+      <BoundingBox miny="-90.00000000000000" minx="-180.00000000000000" maxy="90.00000000000000" maxx="180.00000000000000"/>
+      <Origin y="-90.00000000000000" x="-180.00000000000000"/>
+      <TileFormat width="256" height="256" mime-type="image/jpg" extension="jpg"/>
+      <TileSets profile="geodetic">
+        <TileSet href="0" units-per-pixel="0.70312500000000" order="0"/>
+        <TileSet href="1" units-per-pixel="0.35156250000000" order="1"/>
+        <TileSet href="2" units-per-pixel="0.17578125000000" order="2"/>
+      </TileSets>
+    </TileMap>