修改首頁地圖

package.json

@@ -42,6 +42,7 @@
     "dist": "electron-builder"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.14.4",
     "axios": "^0.20.0",
@@ -84,7 +85,7 @@
     "winsea-component-library": "http://maven.zthymaoyi.com/nexus/repository/npm-hosted/winsea-component-library/-/winsea-component-library-1.0.1.tgz",
     "winseaview": "^2.5.11",
     "xe-utils": "^2.3.0",
-    "xlsx": "^0.17.2"
+    "xlsx": "^0.17.4"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

src/components/mapdrag/indexMap.vue

@@ -86,6 +86,7 @@
     TextToCode
   } from 'element-china-area-data'
   import image from '../../../public/img/ic_locationmarker.jpg'
+  import AMapLoader from '@amap/amap-jsapi-loader';
   export default {
     data() {
       return {
@@ -116,138 +117,141 @@
     },
     watch: {},
     async created() {
-      debugger
-      // 已载入高德地图API，则直接初始化地图
-      if (window.AMap && window.AMapUI && window.Loca) {
-        this.loadmap()
-        // 未载入高德地图API，则先载入API再初始化
-      } else {
-     await remoteLoad(`https://webapi.amap.com/maps?v=2.0&key=211dd6f989e719022aaf47ddb0659c47&plugin=AMap.Scale,AMap.ToolBar`)
-        await remoteLoad('https://webapi.amap.com/loca?v=2.0.0&key=211dd6f989e719022aaf47ddb0659c47')
+      // debugger
+      // // 已载入高德地图API，则直接初始化地图
+      // if (window.AMap && window.AMapUI && window.Loca) {
+      //   this.loadmap()
+      //   // 未载入高德地图API，则先载入API再初始化
+      // } else {
+      //   this.remoteLoad()
+      //   //  await remoteLoad(`https://webapi.amap.com/maps?v=2.0&key=211dd6f989e719022aaf47ddb0659c47&plugin=AMap.Scale,AMap.ToolBar`)
+      //   //     await remoteLoad('https://webapi.amap.com/loca?v=2.0.0&key=211dd6f989e719022aaf47ddb0659c47')
 
-      }
+      // }
     },
     mounted() {
+      AMapLoader.reset();
+      delete window.AMap;
+      AMapLoader.load({
+        "key": "211dd6f989e719022aaf47ddb0659c47", // 申请好的Web端开发者Key，首次调用 load 时必填
+        "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        "plugins": ['plugin=AMap.Scale', 'AMap.ToolBar'],
+        "Loca": { // 是否加载 Loca， 缺省不加载
+          "version": '2.0.0' // Loca 版本，缺省 1.3.2
+        },
+      }).then((AMap) => {
+  
+
+        this.loadmap()
+      }).catch(e => {
+        console.log(e);
+      })
+
 
-      this.loadmap()
     },
     methods: {
-remoteLoad(){debugger
-  let scriptElement1 = document.createElement('script')
-  scriptElement1.src =
-    "https://webapi.amap.com/maps?v=2.0&key=211dd6f989e719022aaf47ddb0659c47&plugin=AMap.Scale,AMap.ToolBar"
-  document.body.appendChild(scriptElement1)
-  let scriptElement2 = document.createElement('script')
-  scriptElement2.src = "https://webapi.amap.com/loca?v=2.0.0&key=211dd6f989e719022aaf47ddb0659c47"
-  document.body.appendChild(scriptElement2)
-   // window.Loca = Loca
-   console.log(Loca)
-  
-},
       loadmap(val) {
-       setTimeout(() => {debugger
-         var map = new AMap.Map('mapContainer', {
-           zoom: 5.29,
-           // showLabel: false,
-           // viewMode: '3D',
-           pitch: 48,
-           center: [104.780269, 34.955403],
-           mapStyle: 'amap://styles/dark',
-         });
-
-         var loca = new Loca.Container({
-           map,
-         });
-
-         // 颜色配置
-         var headColors = ['#ECFFB1', '#146968', '#146968', '#146968', '#146968', '#146968', '#146968', '#146968'];
-         var trailColors = [
-           'rgba(255,178,6, 0.2)',
-           'rgba(255,178,6, 0.2)',
-           'rgba(20,105,104, 0.2)',
-           'rgba(20,105,104, 0.2)',
-           'rgba(20,105,104, 0.2)',
-           'rgba(20,105,104, 0.2)',
-           'rgba(20,105,104, 0.2)',
-           'rgba(20,105,104, 0.2)',
-         ];
-
-         // 进入北京方向的线
-         var inLineSource = new Loca.GeoJSONSource({
-           url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-in.json',
-         });
-
-         var inLinelayer = new Loca.PulseLineLayer({
-           // loca,
-           zIndex: 11,
-           opacity: 1,
-           visible: true,
-           zooms: [2, 22],
-         });
-
-         inLinelayer.setStyle({
-           altitude: 0,
-           lineWidth: (_, feature) => feature.properties.lineWidthRatio * 4 + 1,
-           headColor: (_, feature) => headColors[feature.properties.type],
-           trailColor: (_, feature) => trailColors[feature.properties.type],
-           interval: 0.5,
-           duration: 2000,
-         });
-         inLinelayer.setSource(inLineSource);
-         loca.add(inLinelayer);
-
-         // 出北京方向的线
-         var outLineSource = new Loca.GeoJSONSource({
-           url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-out.json',
-         });
-
-         var outLinelayer = new Loca.PulseLineLayer({
-           // loca,
-           zIndex: 11,
-           opacity: 1,
-           visible: true,
-           zooms: [2, 22],
-         });
-
-         outLinelayer.setStyle({
-           altitude: 0,
-           lineWidth: (_, feature) => feature.properties.lineWidthRatio * 1 + 3,
-           headColor: (_, feature) => headColors[feature.properties.type],
-           trailColor: (_, feature) => trailColors[feature.properties.type],
-           interval: 0.25,
-           duration: 5000,
-         });
-         outLinelayer.setSource(outLineSource);
-         loca.add(outLinelayer);
-
-         // 下方呼吸点层
-         var scatter = new Loca.ScatterLayer({
-           loca,
-           zIndex: 10,
-           opacity: 1,
-           visible: true,
-           zooms: [2, 22],
-         });
-
-         var scatterGeo = new Loca.GeoJSONSource({
-           url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-scatter.json',
-         });
-         scatter.setSource(scatterGeo);
-         scatter.setStyle({
-           unit: 'px',
-           size: (_, feature) => {
-             var size = feature.properties.lineWidthRatio * 2 + 30;
-             return [size, size];
-           },
-           borderWidth: 0,
-           texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_yellow.png',
-           duration: 2000,
-           animate: true,
-         });
-         loca.add(scatter);
-
-         loca.animate.start();
-       }, 500)
+          var map = new AMap.Map('mapContainer', {
+            zoom: 5.29,
+            showLabel: false,
+            viewMode: '3D',
+            pitch: 48,
+            center: [104.780269, 34.955403],
+            mapStyle: 'amap://styles/dark',
+          });
+
+          var loca = new Loca.Container({
+            map,
+          });
+
+          // 颜色配置
+          var headColors = ['#ECFFB1', '#146968', '#146968', '#146968', '#146968', '#146968', '#146968', '#146968'];
+          var trailColors = [
+            'rgba(255,178,6, 0.2)',
+            'rgba(255,178,6, 0.2)',
+            'rgba(20,105,104, 0.2)',
+            'rgba(20,105,104, 0.2)',
+            'rgba(20,105,104, 0.2)',
+            'rgba(20,105,104, 0.2)',
+            'rgba(20,105,104, 0.2)',
+            'rgba(20,105,104, 0.2)',
+          ];
+
+          // 进入北京方向的线
+          var inLineSource = new Loca.GeoJSONSource({
+            url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-in.json',
+          });
+
+          var inLinelayer = new Loca.PulseLineLayer({
+            // loca,
+            zIndex: 11,
+            opacity: 1,
+            visible: true,
+            zooms: [2, 22],
+          });
+
+          inLinelayer.setStyle({
+            altitude: 0,
+            lineWidth: (_, feature) => feature.properties.lineWidthRatio * 4 + 1,
+            headColor: (_, feature) => headColors[feature.properties.type],
+            trailColor: (_, feature) => trailColors[feature.properties.type],
+            interval: 0.5,
+            duration: 2000,
+          });
+          inLinelayer.setSource(inLineSource);
+          loca.add(inLinelayer);
+
+          // 出北京方向的线
+          var outLineSource = new Loca.GeoJSONSource({
+            url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-out.json',
+          });
+
+          var outLinelayer = new Loca.PulseLineLayer({
+            // loca,
+            zIndex: 11,
+            opacity: 1,
+            visible: true,
+            zooms: [2, 22],
+          });
+
+          outLinelayer.setStyle({
+            altitude: 0,
+            lineWidth: (_, feature) => feature.properties.lineWidthRatio * 1 + 3,
+            headColor: (_, feature) => headColors[feature.properties.type],
+            trailColor: (_, feature) => trailColors[feature.properties.type],
+            interval: 0.25,
+            duration: 5000,
+          });
+          outLinelayer.setSource(outLineSource);
+          loca.add(outLinelayer);
+
+          // 下方呼吸点层
+          var scatter = new Loca.ScatterLayer({
+            loca,
+            zIndex: 10,
+            opacity: 1,
+            visible: true,
+            zooms: [2, 22],
+          });
+
+          var scatterGeo = new Loca.GeoJSONSource({
+            url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-scatter.json',
+          });
+          scatter.setSource(scatterGeo);
+          scatter.setStyle({
+            unit: 'px',
+            size: (_, feature) => {
+              var size = feature.properties.lineWidthRatio * 2 + 30;
+              return [size, size];
+            },
+            borderWidth: 0,
+            texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_yellow.png',
+            duration: 2000,
+            animate: true,
+          });
+          loca.add(scatter);
+
+          loca.animate.start();
       }
     },
   }