修改地图扎点的marker图标

src/permission.js

@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2024-01-09 23:08:15
  * @LastEditors: JC9527
- * @LastEditTime: 2024-01-17 11:08:57
+ * @LastEditTime: 2024-01-31 09:15:33
  */
 import router from './router'
 import store from './store'
@@ -22,7 +22,7 @@ const whiteList = ['/login', '/register', '/bigScreen']
 router.beforeEach((to, from, next) => {
   NProgress.start()
   // console.log('tototo',to.path);
-  if(localStorage.getItem('accessToken') && localStorage.getItem('robotToken')) {
+  if(localStorage.getItem('accessToken')) {
     next()
     NProgress.done()
   } else {
@@ -31,10 +31,14 @@ router.beforeEach((to, from, next) => {
       var c = window.location.href.match(reg);
       const code = c && c[1];
       getAccesstoken({code:code}).then(res=>{
-        console.log(res,"res")
+        // console.log(res,"res")
         // setAccessToken(res.data.accessToken)
         localStorage.setItem('accessToken',res.data.accessToken)
-        next()
+        let url = window.location.href;
+        var modifiedUrl = url.replace(/[\?&](code)=.*?(#\/|$)/g, '');
+        // console.log(modifiedUrl,'modifiedUrl');
+        window.location.href = modifiedUrl;
+        // next()
         NProgress.done()
         // return getUserinfo({accessToken:res.data.accessToken})
       })

src/views/bigScreen/map/index.vue

@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2024-01-09 23:08:15
  * @LastEditors: JC9527
- * @LastEditTime: 2024-01-29 16:28:49
+ * @LastEditTime: 2024-01-31 15:25:55
 -->
 <template>
   <div class="map-main">
@@ -57,7 +57,6 @@
         <div class="person-popup">
           <div class="person-title">
             <div class="title">人员信息</div>
-            <!-- <div class="mask" @click="markersClosePopup"></div> -->
             <img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
           </div>
           <div class="person-main">
@@ -309,11 +308,11 @@
           @select="handleSelect"
         ></el-autocomplete>
       </div>
-      <div class="laser-positioning" @click="positioning">
+      <div class="laser-positioning" @click="positioning" v-if="zadian">
         <span>地图扎点</span>
         <img src="@/assets/images/positioning.png" alt="" />
       </div>
-      <div class="creation-task" @click="createdTask">
+      <div class="creation-task" @click="createdTask" v-if="zadian">
         <span>新增事件</span>
         <img src="@/assets/images/createdTask.png" alt="" />
       </div>
@@ -422,7 +421,7 @@
     <!-- 商铺详情 -->
     <shop ref="shop" width="50%" title="商铺详情查看" />
     <!-- 新增事件 -->
-    <new-event ref="newEvent" @cancel="cancel"></new-event>
+    <new-event ref="newEvent" @cancel="cancel" @confirm="confirm"></new-event>
     <!-- 任务派发 -->
     <personage-task ref="personageTask"></personage-task>
     <!-- 强制观摩弹框 -->
@@ -587,6 +586,7 @@ export default {
       cluster:null,
       personMarkers:[],
       MyInput:true,
+      zadian:false,
 
 
 
@@ -838,9 +838,16 @@ export default {
           // console.log(e,'this.layers.layer2的点击事件');
           if(this.isPositioning) {
             // console.log(e,'eeeeeeee');
+            const icon = new AMap.Icon({
+              size: new AMap.Size(25, 34), //图标尺寸
+              image: require('../../../assets/images/icon/icon2.png'), //Icon 的图像
+              imageOffset: new AMap.Pixel(-9, -3), //图像相对展示区域的偏移量，适于雪碧图等
+              imageSize: new AMap.Size(135, 40), //根据所设置的大小拉伸或压缩图片
+            });
             var marker = new AMap.Marker({
               position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
               anchor: 'bottom-center',
+              icon: icon
             })
             this.layers.layer4.addOverlay(marker);
             map.add(this.layers.layer4)
@@ -937,18 +944,12 @@ export default {
       var offset = new AMap.Pixel(-30.5, -48.5);
       context.marker.setContent(content);
       context.marker.setOffset(offset);
-      // let obj = {};
-      // obj.markers = context.marker;
-      // obj.imei = context.data[0].info.imei;
-      // this.personMarkers.push(obj)
       context.marker.on('click',(ev)=>{
         // 根据imei获取人员信息
         getUserByImei({imei:context.data[0].info.imei}).then(res=>{
-          console.log(res,"获取人员信息");
           if(res.code == 200) {
             this.personInfo.position = context.data[0].position;
             this.personInfo.info = context.data[0].info;
-            console.log(res.data[0],"res.data[0]");
             this.personInfo.personinfo = res.data[0];
             this.personInfo.visible = true;
           }
@@ -1033,6 +1034,7 @@ export default {
       if(id == 1) {
         this.personLine = [];
         let videoPoint = [];
+        // 获取人员信息
         getDeviceList().then((res) => {
           this.mapLoading = false;
           // console.log(res,'点位信息');
@@ -1054,8 +1056,6 @@ export default {
               }
             })
             this.count = videoPoint.length;
-            // console.log(videoPoint,'videoPoint');
-            // console.log(this.count,'this.count');
             AMap.plugin(['AMap.MarkerCluster'],()=>{
               this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
                 gridSize: 60, // 设置网格像素大小
@@ -1380,7 +1380,6 @@ export default {
     getWanggeGeoJson(){
       
       bgridsetting({pageNum:1,pageSize:100,level:1}).then(res=>{
-        console.log(res,"网格数据");
         let W = []
         res.rows.forEach((element)=>{
           let shapeStr = JSON.parse(element.shapeStr)
@@ -1413,9 +1412,6 @@ export default {
           });
           shapeStr.myPolygon = wangge;
           shapeStr.text = text;
-          // this.myWange.push(wangge);
-          // this.layers.layer.addLayer(wangge);
-          // this.layers.layer.addLayer(text);
           this.layers.layer2.addOverlay(wangge);
           this.layers.text1.addOverlay(text);
           this.map.add(this.layers.layer2);
@@ -1426,7 +1422,7 @@ export default {
       // console.log(this.layers.layer,'this.layers.layer');
       // this.map.add(this.layers.layer);
     },
-    // 围栏获取
+    // 围栏网格获取
     getWeilanGeoJson(){
       fence({ pageNum: 1, pageSize: 100 }).then((res) => {
         // console.log(res,"围栏数据");
@@ -1440,7 +1436,8 @@ export default {
               radius: shapeStr.features[0].properties.radius,
               bubble: true,
               extData:{
-                id: '围栏polygon'
+                id: '围栏polygon',
+                name: shapeStr.features[0].properties.NAME
               },
               strokeOpacity: 0.9,
               strokeColor: "#62E1FA",
@@ -1455,7 +1452,7 @@ export default {
               offset: [0, 12],
               text: element.name,
               extData:{
-                id: '围栏text'
+                id: '围栏text',
               },
               style: {
                 'font-size': '14px',
@@ -1480,7 +1477,8 @@ export default {
               path:shapeStr.features[0].geometry.coordinates,
               bubble: true,
               extData:{
-                id: '围栏polygon'
+                id: '围栏polygon',
+                name: shapeStr.features[0].properties.NAME
               },
               strokeOpacity: 0.9,
               strokeColor: "#62E1FA",
@@ -1497,7 +1495,7 @@ export default {
               offset: [0, 12],
               text: element.name,
               extData:{
-                id: '围栏text' 
+                id: '围栏text' ,
               },
               style: {
                 'font-size': '14px',
@@ -1616,15 +1614,24 @@ export default {
         if(this.isPositioning) {
           let latlng = e.lnglat
           let name;
-          this.layers.layer.eachOverlay((item)=>{
+          this.layers.layer3.eachOverlay((item)=>{
             // console.log(item,'item');
             if(item.getBounds().contains(latlng)){
               name = item.getExtData().name
             }
           })
+          // console.log(name,"点击的网格名称");
+          // 拿到点击的网格⌈ 围栏 ⌋名称
+          const icon = new AMap.Icon({
+            size: new AMap.Size(26, 26), //图标尺寸
+            image: require('../../../assets/images/icon/icon2.png'), //Icon 的图像
+            imageOffset: new AMap.Pixel(0, 0), //图像相对展示区域的偏移量，适于雪碧图等
+            imageSize: new AMap.Size(26, 26) //根据所设置的大小拉伸或压缩图片
+          });
           var marker = new AMap.Marker({
             position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
             anchor: 'bottom-center',
+            icon: icon
           })
           this.layers.layer4.addOverlay(marker);
           this.map.add(this.layers.layer4)
@@ -2384,11 +2391,17 @@ export default {
     },
     // 弹框点击取消事件
     cancel(marker){
-      this.layers.layer4.removeOverlay(marker)
+      // this.layers.layer4.removeOverlay(marker);
+      
+    },
+    confirm() {
+      // 事件新增完毕重新请求事件列表及经纬度
+      
     },
     // 切换地图事件
     changeMap(id) {
       this.MyInput = true;
+      this.zadian = false;
       this.actionMap = id;
       this.input = "";
       this.personInfo.visible = false;
@@ -2399,6 +2412,7 @@ export default {
       if (id == 1) {
         this.markerOffset = new AMap.Pixel(-35, -123);
       } else if (id == 2) {
+        this.zadian = true;
         this.markerOffset = new AMap.Pixel(-13.5, -15);
       } else if (id == 3) {
         this.markerOffset = new AMap.Pixel(-30.5, -48.5);
@@ -2424,6 +2438,7 @@ export default {
       }, 200);
       this.$emit("rightAnimationAction");
     },
+    // 获取车辆信息
     getCarList(){
       getCarManageList({pageNum: 1,pageSize: 10}).then(res=>{
         // console.log(res);

src/views/components/newEvent/index.vue

@@ -1677,6 +1677,9 @@ export default {
     },
     Close() {
       this.$refs.formInline.resetFields();
+      if(this.marker) {
+        this.$emit('cancel',this.marker)
+      }
     },
     handleChange(){},
     // 取消按钮
@@ -1703,6 +1706,7 @@ export default {
             if(res.code == 200 && res.success == true) {
               this.cancel();
               this.$modal.msgSuccess("新增成功");
+              this.$emit('confirm')
             }
           })
         }