引入行政区边界线部分代码

src/main.js

@@ -27,6 +27,14 @@ const app = createApp(App);
 
 import Interface from "../public/InterfaceReturn.json"
 
+// import AMap from "AMap";
+// app.use(AMap)
+// AMap.initAMapApiLoader({
+//     plugin: ['AMap.DistrictSearch']
+
+// })
+
+
 app.config.globalProperties.$Interface = Interface
 app.config.globalProperties.$UCore = UCore;
 app.config.globalProperties.$axios = axios;
@@ -45,8 +53,8 @@ router.beforeEach((to, from, next) => {
 
     if (to.path !== '/') {
         if (localStorage.getItem('accessToken') === null) {
-            removeToken()//不用管
-            // if (localStorage.getItem('userInfo') === null) {
+            removeToken() //不用管
+                // if (localStorage.getItem('userInfo') === null) {
 
             // 本地存储的accessToken不存在时，跳转至后台登录页
             // alert('本地存储的accessToken不存在')
@@ -61,12 +69,12 @@ router.beforeEach((to, from, next) => {
             }
 
             document.getElementById('routers').style.display = "none"
-            // setTimeout(() => {
-            //     ElMessage.warning({
-            //         message: '请登录后重试!',
-            //         type: 'warning'
-            //     })
-            // }, 100);
+                // setTimeout(() => {
+                //     ElMessage.warning({
+                //         message: '请登录后重试!',
+                //         type: 'warning'
+                //     })
+                // }, 100);
 
         } else {
             // alert('本地存储的accessToken存在')
@@ -74,7 +82,7 @@ router.beforeEach((to, from, next) => {
         }
     } else {
         document.getElementById('routers').style.display = "block"
-        //路由的next必须存在,否则无法进入下一页
+            //路由的next必须存在,否则无法进入下一页
         if (localStorage.getItem('accessToken') != null) {
             next({ path: '/home' })
         } else {

src/views/home/index.vue

@@ -124,6 +124,7 @@ mapData;
 
 // 地图
 import AMap from "AMap";
+
 // import AMapUI from "AMapUI";
 
 import api from "@/api/home/home.js";
@@ -183,6 +184,9 @@ export default {
         ["#7dc", "#F33"],
       ],
       colorIndList: [-1, 7, 21, 26, 31, 37, 46, 52, 57, 66, 68, 71, 74, 100],
+
+      district: null,
+      polygons: [],
     };
   },
   watch: {
@@ -207,6 +211,8 @@ export default {
     this.htAnalogData_api();
     // this.eptrendIco_api();
     this.eptrendIcoMonth_api();
+
+    
   },
   methods: {
     // searchSite(){
@@ -282,7 +288,6 @@ export default {
         this.initMap();
       });
     },
-
     //地图撒点
 
     // 日月年用电量
@@ -313,6 +318,7 @@ export default {
     Overview() {
       // this.$router.push({ path: "/Overview" }); //, query: { title: title }
     },
+
     async initMap() {
       this.map = await new AMap.Map("mapF", {
         mapStyle: "amap://styles/blue", //设置地图的显示样式
@@ -321,7 +327,6 @@ export default {
         zooms: [3, 16],
         // features: [] //清空背景道路等
       });
-      // this.initMapUi();
 
       var con = `<div class="siteModelBox" >
                   <h2>
@@ -368,6 +373,8 @@ export default {
       });
 
       this.addMarker(dataList, "water");
+
+      this.drawBounds();
     },
 
     addMarker(lnglats) {
@@ -472,7 +479,6 @@ export default {
         });
       });
     },
-
     // 添加标点
     addMarkerInfo(position, content, value = "") {
       value;
@@ -488,57 +494,58 @@ export default {
       infoWindow.open(this.map, position);
     },
 
-    poiPickerReady(poiPicker) {
-      // console.log(poiPicker);
-      var marker = new AMap.Marker();
-
-      var infoWindow = new AMap.InfoWindow({
-        offset: new AMap.Pixel(0, -20),
-      });
-
-      //选取了某个POI
-      poiPicker.on("poiPicked", (poiResult) => {
-        var source = poiResult.source,
-          poi = poiResult.item,
-          info = {
-            source: source,
-            id: poi.id,
-            name: poi.name,
-            location: poi.location.toString(),
-            address: poi.address,
-          };
-
-        marker.setMap(this.map);
-        infoWindow.setMap(this.map);
-
-        marker.setPosition(poi.location);
-        infoWindow.setPosition(poi.location);
-
-        infoWindow.setContent(
-          "POI信息: <pre>" + JSON.stringify(info, null, 2) + "</pre>"
-        );
-        // infoWindow.open(this.map, marker.getPosition());
-
-        this.map.setCenter(marker.getPosition());
-      });
-
-      poiPicker.onCityReady(() => {
-        // poiPicker.suggest("美食");
-      });
+    // 嘉定区边界高亮 start
+    drawBounds() {
+      //加载行政区划插件
+      if (!this.district) {
+        //实例化DistrictSearch
+        // alert(1)
+
+        AMap.plugin("AMap.DistrictSearch", function () {
+          this.district = new AMap.DistrictSearch({
+            subdistrict: 0, //获取边界不需要返回下级行政区
+            extensions: "all", //返回行政区边界坐标组等具体信息
+            level: "district", //查询行政级别为 市
+          });
+           alert(2)
+           console.log('this.district');
+          console.log(this.district);
+
+          //行政区查询
+          this.district.search("嘉定区", function (status, result) {
+            this.map.remove(this.polygons); //清除上次结果
+            this.polygons = [];
+            var bounds = result.districtList[0].boundaries;
+            if (bounds) {
+              for (var i = 0, l = bounds.length; i < l; i++) {
+                //生成行政区划polygon
+                var polygon = new AMap.Polygon({
+                  strokeWeight: 1,
+                  path: bounds[i],  
+                  fillOpacity:1,
+                  fillColor: "green",
+                  strokeColor: "green",
+                });
+                this.polygons.push(polygon);
+              }
+            }
+            this.map.add(this.polygons);
+            this.map.setFitView(this.polygons); //视口自适应
+          });
+        });
+      }
     },
-    // initMapUi() {
-    //   AMapUI.load(["ui/misc/PoiPicker"], (PoiPicker) => {
-    //     // console.log(PoiPicker);
-    //     let poiPickers = new PoiPicker({
-    //       input: "pickerInput",
-    //     });
-    //     this.poiPickerReady(poiPickers);
-    //   });
-    // },
+
+    // 嘉定区边界高亮 end
   },
 };
 </script>
 
+
+
+
+
+
 <style lang="scss">
 #pickerBox {
   position: absolute;
@@ -569,7 +576,6 @@ export default {
   color: #fff;
 }
 
-
 #poiInfo {
   background: #fff;
 }
@@ -577,5 +583,4 @@ export default {
 .amap-icon img {
   width: 25px;
 }
-
 </style>