地图绘制换成高德

src/api/login.js

@@ -18,6 +18,22 @@ export function login(username, password, code, uuid) {
   })
 }
 
+// 无需验证码登录方法    TODO:缺少无需验证码登录
+export function noCodeLogin(username, password) {
+  const data = {
+    username,
+    password,
+  }
+  return request({
+    url: '/login',
+    headers: {
+      isToken: false
+    },
+    method: 'post',
+    data: data
+  })
+}
+
 // 注册方法
 export function register(data) {
   return request({

src/assets/styles/amap.scss

@@ -37,4 +37,17 @@
 }
 .amap-info-contentContainer .bottom-center {
   padding-bottom: 0;
+}
+// 文本注记
+.amap-overlay-text-container {
+  background-color: transparent;
+  border-radius: 0;
+  border: none;
+}
+
+.amap-logo{
+  display: none !important; //去掉高德地图logo
+}
+.amap-copyright {
+  opacity:0;                //去掉高德的版本号
 }

src/assets/styles/leaflet.scss

@@ -87,7 +87,7 @@
     }
 
     .btn {
-      margin-top: 19px;
+      margin-top: 10px;
       background-image: url('../images/popup/icon1btn.png');
       background-size: 100% 100%;
       width: 100%;

src/main.js

@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2023-08-14 13:58:57
  * @LastEditors: JC9527
- * @LastEditTime: 2023-12-18 13:30:31
+ * @LastEditTime: 2023-12-19 10:34:59
  */
 import Vue from 'vue'
 
@@ -25,7 +25,7 @@ import "@/utils/rem.js"; //计算rem基准
 
 import './assets/icons' // icon
 import './permission' // permission control
-import 'leaflet/dist/leaflet.css' // leaflet样式
+// import 'leaflet/dist/leaflet.css' // leaflet样式
 
 
 import moment from 'moment'

src/permission.js

@@ -11,45 +11,47 @@ NProgress.configure({ showSpinner: false })
 const whiteList = ['/login', '/register', '/bigScreen']
 
 router.beforeEach((to, from, next) => {
+  console.log('tototo',to.path);
   NProgress.start()
-  if (getToken()) {
+  next()
-    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
+  // if (getToken()) {
-    /* has token*/
+  //   to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
-    if (to.path === '/login') {
+  //   /* has token*/
-      next({ path: '/' })
+  //   if (to.path === '/login') {
-      NProgress.done()
+  //     next({ path: '/' })
-    } else {
+  //     NProgress.done()
-      console.log('store.getters.roles',store.getters.roles)
+  //   } else {
-      if (store.getters.roles.length === 0) {
+  //     console.log('store.getters.roles',store.getters.roles)
-        isRelogin.show = true
+  //     if (store.getters.roles.length === 0) {
-        // 判断当前用户是否已拉取完user_info信息
+  //       isRelogin.show = true
-        store.dispatch('GetInfo').then(() => {
+  //       // 判断当前用户是否已拉取完user_info信息
-          isRelogin.show = false
+  //       store.dispatch('GetInfo').then(() => {
-          store.dispatch('GenerateRoutes').then(accessRoutes => {
+  //         isRelogin.show = false
-            // 根据roles权限生成可访问的路由表
+  //         store.dispatch('GenerateRoutes').then(accessRoutes => {
-            router.addRoutes(accessRoutes) // 动态添加可访问路由表
+  //           // 根据roles权限生成可访问的路由表
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+  //           router.addRoutes(accessRoutes) // 动态添加可访问路由表
-          })
+  //           next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
-        }).catch(err => {
+  //         })
-            store.dispatch('LogOut').then(() => {
+  //       }).catch(err => {
-              Message.error(err)
+  //           store.dispatch('LogOut').then(() => {
-              next({ path: '/login' })
+  //             Message.error(err)
-            })
+  //             next({ path: '/' })
-          })
+  //           })
-      } else {
+  //         })
-        next()
+  //     } else {
-      }
+  //       next()
-    }
+  //     }
-  } else {
+  //   }
-    // 没有token
+  // } else {
-    if (whiteList.indexOf(to.path) !== -1) {
+  //   // 没有token
-      // 在免登录白名单，直接进入
+  //   if (whiteList.indexOf(to.path) !== -1) {
-      next()
+  //     // 在免登录白名单，直接进入
-    } else {
+  //     next()
-      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
+  //   } else {
-      NProgress.done()
+  //     next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
-    }
+  //     NProgress.done()
-  }
+  //   }
+  // }
 })
 
 router.afterEach(() => {

src/store/modules/user.js

@@ -1,4 +1,4 @@
-import { login, logout, getInfo } from '@/api/login'
+import { login, logout, getInfo, noCodeLogin } from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 
 const user = {
@@ -45,6 +45,19 @@ const user = {
         })
       })
     },
+    NoCodeLogin({ commit }, userInfo){
+      const username = userInfo.username.trim()
+      const password = userInfo.password
+      return new Promise((resolve, reject) => {
+        noCodeLogin(username, password).then(res => {
+          setToken(res.token)
+          commit('SET_TOKEN', res.token)
+          resolve()
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
 
     // 获取用户信息
     GetInfo({ commit, state }) {

src/utils/amap.js

@@ -0,0 +1,24 @@
+// 取面对象 中心点
+export function getCenter(PolygonArr) {
+  let total = PolygonArr.length;
+  let X = 0; let Y = 0; let Z = 0;
+  PolygonArr.forEach((lnglat) => {
+    let lng = lnglat[0] * Math.PI / 180;
+    let lat = lnglat[1] * Math.PI / 180;
+    let x, y, z;
+    x = Math.cos(lat) * Math.cos(lng);
+    y = Math.cos(lat) * Math.sin(lng);
+    z = Math.sin(lat);
+    X += x;
+    Y += y;
+    Z += z;
+  });
+  X = X / total;
+  Y = Y / total;
+  Z = Z / total;
+
+  let Lng = Math.atan2(Y, X);
+  let Hyp = Math.sqrt(X * X + Y * Y);
+  let Lat = Math.atan2(Z, Hyp);
+  return [Lng * 180 / Math.PI, Lat * 180 / Math.PI];
+}

src/utils/request.js

@@ -82,26 +82,30 @@ service.interceptors.response.use(res => {
       return res.data
     }
     if (code === 401) {
-      if (!isRelogin.show) {
+      if (!isRelogin.show){
         isRelogin.show = true;
-        // MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
+        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
-        //   isRelogin.show = false;
-        //   store.dispatch('LogOut').then(() => {
-        //     location.href = '/login';
-        //   })
-        // }).catch(() => {
-        //   isRelogin.show = false;
-        // });
-        // TODO:无感刷新token暂缺少不需验证码登录接口
-        store.dispatch("Login", this.loginForm).then(() => {
           isRelogin.show = false;
-          res.headers.Authorization = getToken();
+          store.dispatch('LogOut').then(() => {
-          requests.forEach((cb) => cb(getToken()))
+            location.href = '/#/login';
-          requests = [] // 重新请求完清空
+          })
-          return service(res.config)
         }).catch(() => {
           isRelogin.show = false;
         });
+        // TODO:无感刷新token暂缺少不需验证码登录接口
+        // const loginForm = {
+        //   username: "admin",
+        //   password: "admin123",
+        // }
+        // store.dispatch("Login", loginForm).then(() => {
+        //   isRelogin.show = false;
+        //   res.headers.Authorization = getToken();
+        //   requests.forEach((cb) => cb(getToken()))
+        //   requests = [] // 重新请求完清空
+        //   return service(res.config)
+        // }).catch(() => {
+        //   isRelogin.show = false;
+        // });
       } else {
         return new Promise(resolve => {
           // 用函数形式将 resolve 存入，等待刷新后再执行

src/views/bigScreen/map/index.vue

@@ -19,14 +19,17 @@
       map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518"
       :center="center"
       :zoom="zoom"
+      :zooms="zooms"
       @init="init"
       view-mode="3D"
       :extra-options="{ vectorMapForeign: 'style_zh_cn' }"
       class="amap-demo"
     >
       <el-amap-layer-satellite :visible="visible"></el-amap-layer-satellite>
+
       <!-- 江宁GeoJson文件 -->
-      <el-amap-geojson @init="initLocation" :geo="jiangninggeo" ref="geojson" :polygon-options="polygonOptions" :visible="true" :draggable="draggable"></el-amap-geojson>
+      <!-- <el-amap-geojson @init="initLocation" :geo="jiangninggeo" ref="geojson" :polygon-options="polygonOptions" :visible="true" :draggable="draggable"></el-amap-geojson> -->
+      
       <!-- 测试点位 -->
       <el-amap-marker :position="componentMarker.position" :visible="componentMarker.visible" :draggable="componentMarker.draggable">
         <div style="padding: 5px 10px;color: #fff; display:flex;" class="testMarker">
@@ -35,16 +38,19 @@
         </div>
       </el-amap-marker>
       <!-- marker标记点 -->
-      <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :draggable="false" @click="(e)=> clickMarker(marker,e)">
+      <el-amap-marker v-for="(marker, index) in markers" :key="index + 'marker'" :position="marker.position" :draggable="false" @click="(e)=> clickMarker(marker,e)">
         <div class="markerStyles">
-          <div class="marker-Text">{{marker.text}}</div>
+          <div v-if="marker.text" class="marker-Text">{{marker.text}}</div>
           <img :src="marker.imgSrc" alt="">
         </div>
       </el-amap-marker>
+
       <!-- 人员信息弹框 -->
       <el-amap-info-window
         v-if="personInfo.visible"
+        anchor="bottom-center"
         :offset="[27,0]"
+        :closeWhenClickMap="true"
         :position="personInfo.position"
         :visible.sync="personInfo.visible">
         <div class="person-popup">
@@ -59,7 +65,7 @@
               <div class="position">执法1队队员</div>
             </div>
             <div class="btns">
-              <div id='personClick'>行程轨迹</div>
+              <div @click="travelPath()">行程轨迹</div>
               <div>附近队员</div>
               <div>位置分享</div>
               <div>任务派发</div>
@@ -67,6 +73,138 @@
           </div>
         </div>
       </el-amap-info-window>
+
+      <!-- 事件弹框 -->
+      <el-amap-info-window
+        v-if="eventInfo.visible"
+        :offset="[27,0]"
+        :closeWhenClickMap="true"
+        :position="eventInfo.position"
+        :visible.sync="eventInfo.visible"
+      >
+        <div class="event-popup">
+          <div class="event-title">
+            <div class="title">事件信息</div>
+            <div class="mask" @click="markersClosePopup"></div>
+          </div>
+          <div class="event-main">
+            <div class="event-info">
+              <div class="dot"></div>
+              <div class="name">事件名称：</div>
+              <div class="position">XXX小区乱堆杂物</div>
+            </div>
+            <div class="event-info">
+              <div class="dot"></div>
+              <div class="name">事件类别：</div>
+              <div class="position">暴露垃圾</div>
+            </div>
+            <div class="event-info">
+              <div class="dot"></div>
+              <div class="name">事件地址：</div>
+              <div class="position">XX街道XX小区</div>
+            </div>
+            <div class="event-info">
+              <div class="dot"></div>
+              <div class="name">描述：</div>
+              <div class="position">XXXXXXXXXXXXXX</div>
+            </div>
+            <div class="btn" @click="eventBtn">
+              指派
+            </div>
+          </div>
+        </div>
+      </el-amap-info-window>
+
+      <!-- 执法车辆弹框 -->
+      <el-amap-info-window
+        v-if="carInfo.visible"
+        :offset="[27,0]"
+        :closeWhenClickMap="true"
+        :position="carInfo.position"
+        :visible.sync="carInfo.visible"
+      >
+        <div class="car-popup">
+          <div class="car-title">
+            <div class="title">车辆信息</div>
+            <div class="mask" @click="markersClosePopup"></div>
+          </div>
+          <div class="car-main">
+            <div class="car-info">
+              <div class="dot"></div>
+              <div class="name">执法一队1号车</div>
+              <div class="position">苏A568974</div>
+            </div>
+            <div class="btn" @click="travelPath()">行程轨迹</div>
+          </div>
+        </div>
+      </el-amap-info-window>
+      
+      <!-- 监控视频弹框 -->
+      <el-amap-info-window
+        v-if="monitoringInfo.visible"
+        :offset="[27,0]"
+        :closeWhenClickMap="true"
+        :position="monitoringInfo.position"
+        :visible.sync="monitoringInfo.visible"
+      >
+        <div class="monitoring-popup">
+          <div class="monitoring-title">
+            <div class="title">监控视频</div>
+            <div class="mask" @click="markersClosePopup"></div>
+          </div>
+          <div class="monitoring">
+            <div class="bg">
+              <img src="@/assets/images/popup/screenshot20230817.png" alt="">
+            </div>
+            <div class="btns">
+              <div class="btn" @click="monitorVideos">上墙</div>
+              <div class="btn">转发</div>
+            </div>
+          </div>
+        </div>
+      </el-amap-info-window>
+
+      <!-- 沿街商铺分布 -->
+      <el-amap-info-window
+        v-if="shopInfo.visible"
+        :offset="[27,0]"
+        :closeWhenClickMap="true"
+        :position="shopInfo.position"
+        :visible.sync="shopInfo.visible"
+      >
+        <div class="event-popup">
+          <div class="event-title">
+            <div class="title">主体基本信息</div>
+            <div class="mask" @click="markersClosePopup"></div>
+          </div>
+          <div class="event-main">
+          <div class="event-info">
+              <div class="dot"></div>
+              <div class="name">商铺名称：</div>
+              <div class="position">xxx商铺</div>
+            </div>
+            <div class="event-info">
+              <div class="dot"></div>
+              <div class="name">商铺类型：</div>
+              <div class="position">餐饮店</div>
+            </div>
+            <div class="event-info">
+              <div class="dot"></div>
+              <div class="name">所在地址：</div>
+              <div class="position">XX街道XX小区</div>
+            </div>
+            <div class="event-info">
+              <div class="dot"></div>
+              <div class="name">描述：</div>
+              <div class="position">xxxxxxxxxxxxxxxxxxxxxxxx</div>
+            </div>
+          
+            <div class="btn" @click="getShopInfo">
+              查看载体详情
+            </div>
+          </div>
+        </div>
+      </el-amap-info-window>
     </el-amap>
 
     <div class="left-bg">
@@ -246,7 +384,7 @@ import shop from "../../components/shop/index.vue";
 // import jiangningwangge from "@/utils/data/江宁开发区网格.json";
 
 import weilan from "@/utils/data/围栏1.json";
-
+import { getCenter } from "@/utils/amap"
 import {
   regionalsettings,
   roadsetting,
@@ -268,6 +406,7 @@ export default {
   data() {
     return {
       zoom: 12,
+      zooms:[10,18],
       center: [118.835418, 31.863971],  // 121.59996, 31.197646
       map: null,
       // GeoJson文件的基本样式
@@ -287,10 +426,30 @@ export default {
       markers:[],
       // 人员弹框信息
       personInfo: {
+        position: [],
+        info: {},
+        visible: false,
+      },
+      // 事件弹框
+      eventInfo: {
+        position: [],
+        visible: false,
+      },
+      // 车辆弹框信息
+      carInfo: {
+        position: [],
+        visible: false,
+      },
+      // 监控视频弹框信息
+      monitoringInfo: {
+        position: [],
+        visible: false,
+      },
+      // 沿街商铺弹框信息
+      shopInfo: {
         position: [],
         visible: false,
       },
-
 
 
 
@@ -342,14 +501,41 @@ export default {
       // o.setMapStyle('amap://styles/darkblue')
       map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
       // console.log(o.getCenter())
+      // console.log(this.map,'initMapinitMap');
+      this.$nextTick(() => {
+        // 获取网格数据
+        this.getWanggeGeoJson();
+        // 获取围栏数据
+        this.getWeilanGeoJson();
+        // 获取重点区域数据
+        this.getQuyuGeoJson();
+        // 获取重点路段数据
+        this.getLuduanGeoJson();
+        // 获取点位
+        this.getMarkers(1);
+        AMap.plugin('AMap.GeoJSON',()=>{
+          let polygon
+          var geojson = new AMap.GeoJSON({
+            geoJSON:jiangninggeo,
+            getPolygon:(geojson, lnglats)=>{
+              polygon = new AMap.Polygon({
+                path: lnglats,
+                strokeColor: '#00C5EC', 
+                fillColor: '#00AEFF',
+                fillOpacity: 0.4,
+              })
+              return polygon
+            },
+          })
+          map.add(geojson)
+          map.setFitView(polygon);
+        })
+      });
       // console.log(this.$refs.map.$$getInstance(),'TTTTTTT')
     },
-    initLocation(map){
+
-      // 获取地图实例
+
-      const mapInstance = this.$refs.map.$$getInstance();
+    
-      // 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据
-      mapInstance.setFitView();
-    },
     initMap() {
       this.globalMap = L.map("showMap", {
         center: this.townCenter, // 地图中心[纬度，经度]
@@ -665,6 +851,9 @@ export default {
         this.addMark(obj);
       });
     },
+
+
+
     // 各个点位获取
     getMarkers(id){
       let ico1 = require("../../../assets/images/icon/icon1.png");
@@ -673,9 +862,11 @@ export default {
       let ico4 = require("../../../assets/images/icon/icon4.png");
       let ico5 = require("../../../assets/images/icon/icon5.png");
       this.markers = [];
+      
       if(id == 1) {
+        this.personLine = [];
         getDeviceList({ imei: "861316060217211" }).then((res) => {
-          console.log(res,'点位信息');
+          // console.log(res,'点位信息');
           if (res.data.obj) {
             res.data.obj.forEach((element) => {
               if (element.status == 0 || element.status == 1) { 
@@ -686,6 +877,7 @@ export default {
                 obj.text = element.userName;
                 obj.imgSrc = ico1;
                 obj.userId = element.userId;
+                obj.info = element;
                 this.markers.push(obj)
               }
             })
@@ -694,25 +886,274 @@ export default {
           }
         })
       } else if(id == 2) {
-        point.forEach((element)=>{
+        point.features.forEach((element)=>{
-          
+          if (element.properties.name == "普通事件") {
+            let obj = {position:[]};
+            obj.position[0] = element.geometry.coordinates[0];
+            obj.position[1] = element.geometry.coordinates[1];
+            obj.imgSrc = ico2;
+            this.markers.push(obj)
+          } else if (element.properties.name == "重点事件") {
+            let obj = {position:[]};
+            obj.position[0] = element.geometry.coordinates[0];
+            obj.position[1] = element.geometry.coordinates[1];
+            obj.imgSrc = ico3;
+            this.markers.push(obj)
+          }
+        })
+      } else if(id == 3){
+        point.features.forEach((element)=>{
+          if (element.properties.name == "执法车辆") {
+            let obj = {position:[]};
+            obj.position[0] = element.geometry.coordinates[0];
+            obj.position[1] = element.geometry.coordinates[1];
+            obj.imgSrc = ico4;
+            obj.text = element.properties.name;
+            this.markers.push(obj)
+          }
+        })
+      } else if(id == 4){
+        point.features.forEach((element)=>{
+          if (element.properties.name == "监控视频") {
+            let obj = {position:[]};
+            obj.position[0] = element.geometry.coordinates[0];
+            obj.position[1] = element.geometry.coordinates[1];
+            obj.imgSrc = ico5;
+            this.markers.push(obj)
+          }
+        })
+      } else if(id == 5){
+        point.features.forEach((element)=>{
+          if (element.properties.name == "沿街商铺分布") {
+            let obj = {position:[]};
+            obj.position[0] = element.geometry.coordinates[0];
+            obj.position[1] = element.geometry.coordinates[1];
+            obj.imgSrc = ico2;
+            this.markers.push(obj)
+          }
         })
       }
     },
     // 点位点击事件
     clickMarker(marker,e){
-      console.log(marker,e);
+      // console.log(marker,e);
       if (this.actionMap == 1) {
         this.personInfo.position = marker.position;
+        this.personInfo.info = marker.info;
         this.personInfo.visible = true;
+      } else if (this.actionMap == 2) {
+        this.eventInfo.position = marker.position;
+        this.eventInfo.visible = true;
+      } else if (this.actionMap == 3) {
+        this.carInfo.position = marker.position;
+        this.carInfo.visible = true;
+      } else if (this.actionMap == 4) {
+        this.monitoringInfo.position = marker.position;
+        this.monitoringInfo.visible = true;
+      } else if (this.actionMap == 5) {
+        this.shopInfo.position = marker.position;
+        this.shopInfo.visible = true;
       }
     },
     // 点位关闭事件
     markersClosePopup(){
       if (this.actionMap == 1) {
         this.personInfo.visible = false;
+      } else if(this.actionMap == 2) {
+        this.eventInfo.visible = false;
+      } else if(this.actionMap == 3) {
+        this.carInfo.visible = false;
+      } else if(this.actionMap == 4) {
+        this.monitoringInfo.visible = false;
+      } else if(this,this.actionMap == 5) {
+        this.shopInfo.visible = false;
       }
     },
+    // 执法人员/执法车辆 行程轨迹
+    travelPath(){
+      if(this.actionMap == 1) {
+        this.$refs.personageTrack.open("person", this.personInfo.info);
+      } else if(this.actionMap == 3) {
+        this.$refs.personageTrack.open("car");
+      }
+    },
+    // 事件指派
+    eventBtn(){
+      this.$refs.crewAssign.open();
+    },
+    // 监控视频上墙
+    monitorVideos(){
+      this.$refs.videoWall.open();
+    },
+    // 商铺详情查看
+    getShopInfo(){
+      this.$refs.shop.open();
+    },
+
+    // 网格获取
+    getWanggeGeoJson(){
+      levelQywg({ level: 1 }).then((res) => {
+        this.wanggeData = res.data;
+        res.data.forEach((element) => {
+          let shapeStr = JSON.parse(element.shapeStr);
+          var wangge = new AMap.Polygon({
+            path:shapeStr.features[0].geometry.coordinates,
+            strokeOpacity:0,
+            fillOpacity:0,
+            editable:false,
+            visible:true,
+          })
+          var text = new AMap.Text({
+            position: shapeStr.features[1].geometry.coordinates,
+            anchor: 'bottom-center',
+            text: element.name,
+            style:{
+              'font-size': '16px',
+              'font-weight': 'bold',
+              'text-align': 'center',
+              'color': 'rgba(181, 207, 255, 0.5)',
+              'white-space': 'nowrap',
+            },
+          });
+          this.map.add(wangge);
+          this.map.add(text);
+        })
+      })
+    },
+    // 围栏获取
+    getWeilanGeoJson(){
+      fence({ pageNum: 1, pageSize: 100 }).then((res) => {
+        this.weilanData = res.rows;
+        res.rows.forEach((element) => {
+          let shapeStr = JSON.parse(element.shapeStr);
+          // 圆形围栏
+          if (shapeStr.features[0].geometry.type == "Point") {
+            var circle = new AMap.Circle({
+              center: shapeStr.features[0].geometry.coordinates,
+              radius: shapeStr.features[0].properties.radius,
+              strokeOpacity: 0.9,
+              strokeColor: "#62E1FA",
+              fillColor: "#62E1FA",
+              fillOpacity: 0.3,
+              editable:false,
+              visible:true,
+            })
+            var text = new AMap.Text({
+              position: shapeStr.features[0].geometry.coordinates,
+              anchor: 'bottom-center',
+              offset: [0, 12],
+              text: element.name,
+              style: {
+                'font-size': '14px',
+                'text-align': 'center',
+                'color': '#62E1FA',
+                'line-height': '24px',
+                'letter-spacing': '2px',
+                'white-space': 'nowrap',
+              },
+            });
+            this.map.add(circle);
+            this.map.add(text);
+            // 多边形围栏
+          } else if (shapeStr.features[0].geometry.type == "Polygon") {
+            var wangge = new AMap.Polygon({
+              path:shapeStr.features[0].geometry.coordinates,
+              strokeOpacity: 0.9,
+              strokeColor: "#62E1FA",
+              fillColor: "#62E1FA",
+              fillOpacity: 0.3,
+              editable:false,
+              visible:true,
+            })
+            // 获取多边形的中心点
+            var currentCenter = getCenter(shapeStr.features[0].geometry.coordinates[0]);
+            var text = new AMap.Text({
+              position: currentCenter,
+              anchor: 'bottom-center',
+              offset: [0, 12],
+              text: element.name,
+              style: {
+                'font-size': '14px',
+                'text-align': 'center',
+                'color': '#62E1FA',
+                'line-height': '24px',
+                'letter-spacing': '2px',
+                'white-space': 'nowrap',
+              },
+            });
+            this.map.add(wangge);
+            this.map.add(text);
+          }
+        })
+      })
+    },
+    // 重点区域获取
+    getQuyuGeoJson(){
+      regionalsettings({ pageNum: 1, pageSize: 100 }).then((res) => {
+        this.quyuData = res.rows;
+        res.rows.forEach((element) => {
+          let shapeStr = JSON.parse(element.shapeStr);
+          var quyu = new AMap.Polygon({
+            path:shapeStr.features[0].geometry.coordinates,
+            strokeOpacity: 0,
+            strokeColor: '#FF0000',
+            fillColor: '#FF0000',
+            fillOpacity:0.38,
+            editable:false,
+            visible:true,
+          })
+          var text = new AMap.Text({
+            position: shapeStr.features[1].geometry.coordinates,
+            anchor: 'bottom-center',
+            text: element.name,
+            style:{
+              'font-size': '16px',
+              'font-weight': 'bold',
+              'text-align': 'center',
+              'color': '#F44444',
+              'white-space': 'nowrap',
+            },
+          });
+          this.map.add(quyu);
+          this.map.add(text);
+        })
+      })
+    },
+    // 重点路段获取
+    getLuduanGeoJson(){
+      roadsetting({ pageNum: 1, pageSize: 100 }).then((res) => {
+        this.luduanData = res.rows;
+        // console.log(res,'resresres');
+        res.rows.forEach((element) => {
+          let shapeStr = JSON.parse(element.shapeStr);
+          // console.log(shapeStr,'shapeStrshapeStrshapeStr');
+          var luduan = new AMap.Polyline({
+            path:shapeStr.features[0].geometry.coordinates,
+            strokeOpacity: 1,
+            strokeColor: '#46FF77',
+            editable:false,
+            visible:true,
+          })
+          var text = new AMap.Text({
+            position: shapeStr.features[1].geometry.coordinates,
+            anchor: 'bottom-center',
+            text: element.name,
+            style:{
+              'font-size': '16px',
+              'font-weight': 'bold',
+              'text-align': 'center',
+              'color': '#46FF77',
+              'white-space': 'nowrap',
+            },
+          });
+          this.map.add(luduan);
+          this.map.add(text);
+        })
+      })
+    },
+    
+
+
     getIcons(name, src) {
       let icon = L.divIcon({
         className: "divIcon-marker",
@@ -1315,29 +1756,16 @@ export default {
     // 切换地图事件
     changeMap(id) {
       this.actionMap = id;
-      if (id == 1) {
+      this.personInfo.visible = false;
-        this.getTem();
+      this.eventInfo.visible = false;
-      } else {
+      this.carInfo.visible = false;
-        this.addMark();
+      this.monitoringInfo.visible = false;
-      }
+      this.shopInfo.visible = false;
-      // switch (id) {
+      this.getMarkers(id)
-      //   case 1:
+      // if (id == 1) {
-      //     this.addMark("执法人员");
+      //   this.getTem();
-      //     break;
+      // } else {
-      //   case 2:
+      //   this.addMark();
-      //     this.addMark("普通事件");
-      //     break;
-      //   case 3:
-      //     this.addMark("执法车辆");
-      //     break;
-      //   case 4:
-      //     this.addMark("监控视频");
-      //     break;
-      //   case 5:
-      //     this.addMark("沿街商铺分布");
-      //     break;
-      //   default:
-      //     return;
       // }
     },
     // 隐藏地图左侧
@@ -1356,9 +1784,7 @@ export default {
     },
   },
   mounted() {
-    this.$nextTick(() => {
+    
-      this.getMarkers(1)
-    });
   },
 };
 </script>

src/views/components/personagetrack/index.vue

@@ -85,9 +85,23 @@
               <div class="contentTitle">轨迹地图：</div>
             </div>
             <div class="contentMap">
-              <div id="personageTrackMap">
+              <!-- <div id="personageTrackMap">
 
-              </div>
+              </div> -->
+              <el-amap
+                ref="personMap"
+                map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518"
+                :center="center"
+                :zoom="zoom"
+                :zooms="zooms"
+                @init="init"
+                view-mode="3D"
+                :extra-options="{ vectorMapForeign: 'style_zh_cn' }"
+                class="amap-person"
+              >
+                <!-- 江宁GeoJson文件 -->
+                <el-amap-geojson @init="initLocation" :geo="jiangninggeo" ref="jiangningGeojson" :polygon-options="polygonOptions" :visible="true" :draggable="false"></el-amap-geojson>
+              </el-amap>
               <!-- <img src="@/assets/images/minMap.png" alt="" /> -->
             </div>
           </div>
@@ -99,10 +113,11 @@
 <script>
 import diaLog from "../../components/dialog/index.vue";
 import jiangninggeo from "@/utils/mapJson/jiangningjingkaiqugeo.json";
-import L from "leaflet";
+// import L from "leaflet";
-import "@/utils/lib/leaflet.ChineseTmsProviders.js";
+// import "@/utils/lib/leaflet.ChineseTmsProviders.js";
-import "@/utils/lib/leaflet-tilelayer-colorizr.js";
+// import "@/utils/lib/leaflet-tilelayer-colorizr.js";
 import { getLocInfoByImei } from "@/api/bigScreenApi"
+import { getCenter } from "@/utils/amap"
 export default {
   components: { diaLog },
   data() {
@@ -117,15 +132,35 @@ export default {
       heightStyle: {
         height: "500px",
       },
+      zoom: 12,
+      zooms:[10,18],
+      center: [118.835418, 31.863971],
+      map:null,
+      polygonOptions: {
+        strokeColor: '#00C5EC',   // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
+        fillColor: 'rgba(64,175,255,0.4)'  // 多边形填充颜色，使用16进制颜色代码赋值，如：#00B2D5
+      },
+      jiangninggeo:jiangninggeo,
+
       globalMap: null,
       track: null,
       mapLayer1: null,
     };
   },
   methods: {
+    init(map){
+      this.map = map;
+      map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
+    },
+    initLocation(){
+      // 获取地图实例
+      const mapInstance = this.$refs.personMap.$$getInstance();
+      // 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据
+      mapInstance.setFitView();
+    },
     open(person, item) {
       // console.log(person)
-      console.log(item);
+      // console.log(item);
       if (person == "person") {
         this.title = "人员行程轨迹";
         this.personItem = item;
@@ -135,9 +170,9 @@ export default {
         this.person = false;
       }
       this.$refs.dialog.open("1");
-      this.$nextTick(()=>{
+      // this.$nextTick(()=>{
-        this.initMap();
+      //   this.initMap();
-      })
+      // })
     },
     Close() {
       this.$refs.dialog.Close();
@@ -192,10 +227,12 @@ export default {
     // 时间重置
     reset(){
       Object.keys(this.queryTime).forEach(key=>{this.queryTime[key]=''})
-      if(this.track) {
+      if(this.map.getAllOverlays('polyline')) {
-        this.globalMap.removeLayer(this.track);
+        this.map.remove(this.map.getAllOverlays('polyline'));
       }
-      this.globalMap.fitBounds(this.mapLayer1)
+      const mapInstance = this.$refs.personMap.$$getInstance();
+      // 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据
+      mapInstance.setFitView();
     },
     // 查询
     query(){
@@ -210,20 +247,32 @@ export default {
             let arr = []
             res.data.data.forEach(element => {
               let arrTwo = [];
-              arrTwo[0] = element.latitude;
+              arrTwo[1] = element.latitude;
-              arrTwo[1] = element.longitude;
+              arrTwo[0] = element.longitude;
               arr.push(arrTwo);
             });
-            if(this.track) {
+            // if(this.track) {
-              this.globalMap.removeLayer(this.track);
+            //   this.globalMap.removeLayer(this.track);
+            // }
+            if(this.map.getAllOverlays('polyline')) {
+              this.map.remove(this.map.getAllOverlays('polyline'));
             }
-            this.track = L.polyline(arr,{
+            this.track = new AMap.Polyline({
-              pane:'mapLayer1',
+              path: arr,
-              // color: '#F894AF'
+              strokeColor: '#F44444',
-              color: 'red'
+              strokeOpacity: 1,
-            }).addTo(this.globalMap)
+            })
+            this.map.add(this.track);
+            const mapInstance = this.$refs.personMap.$$getInstance();
+            // 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据
+            mapInstance.setFitView(this.track);
+            // this.track = L.polyline(arr,{
+            //   pane:'mapLayer1',
+            //   // color: '#F894AF'
+            //   color: 'red'
+            // }).addTo(this.globalMap)
 
-            this.globalMap.fitBounds(this.track.getBounds());
+            // this.globalMap.fitBounds(this.track.getBounds());
           } else if(res.code == 200 && res.data.msg) {
             this.$modal.msgError(res.data.msg);
           }
@@ -437,6 +486,10 @@ export default {
             height: 100%;
             background-color: #fff;
           }
+          .amap-person {
+            width: 100%;
+            height: 100%;
+          }
           // img {
           //   width: 100%;
           //   height: 100%;