底图更换

package.json

@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@riophae/vue-treeselect": "0.4.0",
+    "@vuemap/vue-amap": "^0.1.17",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",

src/main.js

@@ -77,6 +77,18 @@ Vue.use(plugins)
 Vue.use(VueMeta)
 DictData.install()
 
+import VueAMap from '@vuemap/vue-amap';
+import '@vuemap/vue-amap/dist/style.css'
+Vue.use(VueAMap);
+VueAMap.initAMapApiLoader({
+  key: 'b3c7a7ce466721c3be1d4ea539f82421',
+  securityJsCode: 'ec84db9c5dfc3d304ca9219e764ffeb8',
+});
+
+//如果需要使用自定义的threeJS相关的组件，需要格外引入库中的three。该包只提供常用的模型加载，灯光，HDR等相关能力，更细致的控制需要在模型初始化后获取对象进行操作
+import VueAmapThree from '@vuemap/vue-amap/dist/three'
+Vue.use(VueAmapThree);
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/views/bigScreen/map/index.vue

@@ -1,12 +1,36 @@
 <template>
   <div class="map-main">
-    <div id="showMap" class="showMap"></div>
+    <!-- <div id="showMap" class="showMap"></div> -->
+    <!-- <el-amap
+      ref="map"
+      :min-zoom="10"
+      :max-zoom="22"
+      :center="center"
+      :zoom="zoom"
+      @init="init"
+      @click="click"
+      class="bmap-demo"
+      :events="selfMapEv"
+    >
+    </el-amap> -->
+
+    <el-amap
+      ref="map"
+      map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518"
+      :center="center"
+      :zoom="zoom"
+      @init="init"
+      view-mode="3D"
+      :extra-options="{ vectorMapForeign: 'style_zh_cn' }"
+      class="amap-demo"
+    />
+
     <div class="left-bg">
       <div class="bgt"></div>
     </div>
     <transition name="left-animationMap">
       <div class="map-left" v-if="leftAnimationData">
-        <map-left :personLine='personLine'></map-left>
+        <map-left :personLine="personLine"></map-left>
       </div>
     </transition>
 
@@ -93,7 +117,12 @@
     </div>
     <transition name="right-animationMap">
       <div class="map-right" v-if="rightAnimationData">
-        <map-right :quyuData="quyuData" :weilanData="weilanData" :luduanData="luduanData" :wanggeData="wanggeData"></map-right>
+        <map-right
+          :quyuData="quyuData"
+          :weilanData="weilanData"
+          :luduanData="luduanData"
+          :wanggeData="wanggeData"
+        ></map-right>
       </div>
     </transition>
 
@@ -141,10 +170,10 @@ import L from "leaflet";
 // import "proj4";
 // import "proj4leaflet";
 //引入中国底图插件
-import "@/utils/lib/leaflet.ChineseTmsProviders.js";
+// import "@/utils/lib/leaflet.ChineseTmsProviders.js";
 //引入坐标系偏移插件
 // import "@/utils/lib/leaflet.mapCorrection.min.js";//
-import "@/utils/lib/leaflet-tilelayer-colorizr.js";
+// import "@/utils/lib/leaflet-tilelayer-colorizr.js";
 // import zhifarenyuan from "@/utils/mapJson/zhifarenyuan.json"
 // import shijianfenbu from "@/utils/mapJson/shijianfenbu.json"
 // import zhifacheliang from "@/utils/mapJson/zhifacheliang.json"
@@ -160,7 +189,6 @@ import detachment4 from "@/utils/mapJson/detachment4.json";
 // import zhongdianluduan from "@/utils/mapJson/zhongdianluduan.json";
 // import zhongdianquyu from "@/utils/mapJson/zhongdianquyu.json";
 
-
 import mapLeft from "../components/mapLeftContent.vue";
 import mapRight from "../components/mapRightContent.vue";
 // import mapCentre from "../components/mapCentre.vue"
@@ -174,7 +202,13 @@ import shop from "../../components/shop/index.vue";
 
 import weilan from "@/utils/data/围栏1.json";
 
-import { regionalsettings, roadsetting, fence, getDeviceList, levelQywg } from "@/api/bigScreenApi"
+import {
+  regionalsettings,
+  roadsetting,
+  fence,
+  getDeviceList,
+  levelQywg,
+} from "@/api/bigScreenApi";
 
 export default {
   name: "myMap",
@@ -188,6 +222,9 @@ export default {
   },
   data() {
     return {
+      zoom: 16,
+      center: [121.59996, 31.197646],
+      map: null,
       globalMap: null,
       basemap: null,
       townCenter: [31.863971, 118.835418],
@@ -230,6 +267,13 @@ export default {
     };
   },
   methods: {
+    init(o) {
+      this.map = o;
+      // o.setMapStyle('amap://styles/darkblue')
+      o.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
+      // console.log(o.getCenter())
+      // console.log(this.$refs.map.$$getInstance())
+    },
     initMap() {
       this.globalMap = L.map("showMap", {
         center: this.townCenter, // 地图中心[纬度，经度]
@@ -298,7 +342,7 @@ export default {
       //     minZoom: 5,
       //     color: { r: 10, g: 38, b: 74 }, //自定义颜色滤镜
       //   })
-      this.globalMap.addLayer(this.basemap)
+      this.globalMap.addLayer(this.basemap);
       // L.tileLayer
       //   .chinaProvider("GaoDe.Satellite.Annotion", {
       //     maxZoom: 18,
@@ -382,7 +426,7 @@ export default {
       // 网格
       levelQywg({ level: 1 }).then((res) => {
         this.wanggeData = res.data;
-        res.data.forEach(element=>{
+        res.data.forEach((element) => {
           let shapeStr = JSON.parse(element.shapeStr);
           let geojson = L.geoJSON(shapeStr.features[0], {
             pane: "mapLayer2",
@@ -405,33 +449,45 @@ export default {
                 iconAnchor: [75, 12],
               });
               // 多边形上的标记点;
-              L.marker({lng:shapeStr.features[1].geometry.coordinates[0],lat:shapeStr.features[1].geometry.coordinates[1]}, {
+              L.marker(
+                {
+                  lng: shapeStr.features[1].geometry.coordinates[0],
+                  lat: shapeStr.features[1].geometry.coordinates[1],
+                },
+                {
                   pane: "mapLayer3",
                   icon: myIcon,
-              }).addTo(this.mapLayers.mapLayer8);
+                }
+              ).addTo(this.mapLayers.mapLayer8);
             },
           });
-        })
+        });
-        console.log(res,'网格');
+        console.log(res, "网格");
-      })
+      });
       // .addTo(this.mapLayers.mapLayer8);
 
       // 加载围栏
-      fence({ pageNum: 1, pageSize: 100 }).then(res=>{
+      fence({ pageNum: 1, pageSize: 100 }).then((res) => {
         // console.log(res,'考勤围栏');
         this.weilanData = res.rows;
-        res.rows.forEach(element=>{
+        res.rows.forEach((element) => {
           let shapeStr = JSON.parse(element.shapeStr);
           // 圆形围栏
           if (shapeStr.features[0].geometry.type == "Point") {
-            let geojson2 = L.circle([shapeStr.features[0].geometry.coordinates[1], shapeStr.features[0].geometry.coordinates[0]], {
+            let geojson2 = L.circle(
+              [
+                shapeStr.features[0].geometry.coordinates[1],
+                shapeStr.features[0].geometry.coordinates[0],
+              ],
+              {
                 radius: shapeStr.features[0].properties.radius,
                 color: "#62E1FA",
                 weight: 1,
                 fillColor: "#62E1FA",
                 fillOpacity: 0.3,
-              pane: "mapLayer2"
+                pane: "mapLayer2",
-            }).addTo(this.mapLayers.mapLayer8);
+              }
+            ).addTo(this.mapLayers.mapLayer8);
             let myIcon = L.divIcon({
               className: "land-name5",
               html: element.name,
@@ -439,11 +495,16 @@ export default {
               iconAnchor: [75, 12],
             });
             // 多边形上的标记点;
-            L.marker([shapeStr.features[0].geometry.coordinates[1], shapeStr.features[0].geometry.coordinates[0]], {
+            L.marker(
+              [
+                shapeStr.features[0].geometry.coordinates[1],
+                shapeStr.features[0].geometry.coordinates[0],
+              ],
+              {
                 pane: "mapLayer3",
                 icon: myIcon,
-            }).addTo(this.mapLayers.mapLayer8);
+              }
-
+            ).addTo(this.mapLayers.mapLayer8);
           } else if (shapeStr.features[0].geometry.type == "Polygon") {
             // 多边形围栏
             let geojson2 = L.geoJSON(shapeStr.features[0], {
@@ -474,8 +535,8 @@ export default {
               },
             }).addTo(this.mapLayers.mapLayer8);
           }
-        })
+        });
-      })
+      });
     },
     addLayer1() {
       this.mapLayers.mapLayer1.clearLayers();
@@ -504,41 +565,41 @@ export default {
     // 执法人员点位
     getTem() {
       this.personLine = [];
-      getDeviceList({imei:'861316060217211'}).then(res=>{
+      getDeviceList({ imei: "861316060217211" }).then((res) => {
-        console.log('res0',res);
+        console.log("res0", res);
         let obj = [];
         if (res.data.obj) {
-          res.data.obj.forEach(element => {
+          res.data.obj.forEach((element) => {
             if (element.status == 0) {
               // 离线
-              obj.push(element)
+              obj.push(element);
               this.personLine.push(element);
             } else if (element.status == 1) {
               // 在线
-              obj.push(element)
+              obj.push(element);
               this.personLine.push(element);
-              console.log(this.personLine,'请求回来的在线情况');
+              console.log(this.personLine, "请求回来的在线情况");
             } else if (element.status == 9) {
               // 掉线
             }
           });
         } else {
-          this.$modal.msgError('执法人员' + res.data.msg);
+          this.$modal.msgError("执法人员" + res.data.msg);
         }
         this.addMark(obj);
-      })
+      });
     },
     getIcons(name, src) {
       let icon = L.divIcon({
-        className: 'divIcon-marker',
+        className: "divIcon-marker",
         html: `<div class="markers"><div class="marker-title">${name}</div><img src="${src}" /></div>`,
         iconSize: [100, 50],
       });
-      return icon
+      return icon;
     },
     addMark(obj) {
       this.mapEvent.mapEvent1.clearLayers();
-      let ico1 = require("../../../assets/images/icon/icon1.png")
+      let ico1 = require("../../../assets/images/icon/icon1.png");
       // let ico1 = L.icon({
       //   iconUrl: require("../../../assets/images/icon/icon1.png"),
       //   iconSize: [52, 81],
@@ -597,15 +658,11 @@ export default {
             .openPopup();
           marker.addTo(this.mapEvent.mapEvent1);
           this.markerClick(marker, index, item);
-        })
+        });
       } else if (this.actionMap == 2) {
-
       } else if (this.actionMap == 3) {
-
       } else if (this.actionMap == 4) {
-
       } else if (this.actionMap == 5) {
-
       }
       point.features.map((item, index) => {
         // if (this.actionMap == 1) {
@@ -1016,11 +1073,11 @@ export default {
     // 重点区域
     addLayer6() {
       // this.mapLayers.mapLayer5.clearLayers();
-      regionalsettings({ pageNum: 1, pageSize: 100 }).then(res=>{
+      regionalsettings({ pageNum: 1, pageSize: 100 }).then((res) => {
         // console.log(res,'重点区域');
         this.quyuData = res.rows;
-        res.rows.forEach(element => {
+        res.rows.forEach((element) => {
-          let shapeStr = JSON.parse(element.shapeStr)
+          let shapeStr = JSON.parse(element.shapeStr);
           let geojson = L.geoJSON(
             shapeStr.features[0],
             {
@@ -1042,22 +1099,28 @@ export default {
             html: element.name,
             iconSize: [120, 68],
           });
-          L.marker({lng:shapeStr.features[1].geometry.coordinates[0],lat:shapeStr.features[1].geometry.coordinates[1]}, {
+          L.marker(
+            {
+              lng: shapeStr.features[1].geometry.coordinates[0],
+              lat: shapeStr.features[1].geometry.coordinates[1],
+            },
+            {
               pane: "mapLayer4",
               icon: myIcon1,
-          }).addTo(this.mapLayers.mapLayer6);
+            }
+          ).addTo(this.mapLayers.mapLayer6);
+        });
       });
-      })
       // this.mapLayer5 = geojson.getBounds()
     },
     // 重点路段
     addLayer7() {
       // this.mapLayers.mapLayer7.clearLayers();
-      roadsetting({ pageNum: 1, pageSize: 100 }).then(res=>{
+      roadsetting({ pageNum: 1, pageSize: 100 }).then((res) => {
         // console.log(res,'重点路段');
         this.luduanData = res.rows;
-        res.rows.forEach(element=>{
+        res.rows.forEach((element) => {
-          let shapeStr = JSON.parse(element.shapeStr)
+          let shapeStr = JSON.parse(element.shapeStr);
           let geojson = L.geoJSON(
             shapeStr.features[0],
             {
@@ -1083,12 +1146,18 @@ export default {
             html: element.name,
             iconSize: [120, 68],
           });
-          L.marker({lng:shapeStr.features[1].geometry.coordinates[0],lat:shapeStr.features[1].geometry.coordinates[1]}, {
+          L.marker(
+            {
+              lng: shapeStr.features[1].geometry.coordinates[0],
+              lat: shapeStr.features[1].geometry.coordinates[1],
+            },
+            {
               pane: "mapLayer4",
               icon: myIcon1,
-          }).addTo(this.mapLayers.mapLayer7);
+            }
-        })
+          ).addTo(this.mapLayers.mapLayer7);
-      })
+        });
+      });
     },
     actionBtn(id) {
       this.action = id;
@@ -1160,7 +1229,7 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      this.initMap();
+      // this.initMap();
     });
   },
 };