地图优化

src/components/amapPow.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2022-10-19 09:32:46
  * @LastEditors: wangcc
- * @LastEditTime: 2022-11-04 14:28:08
+ * @LastEditTime: 2022-11-04 17:34:50
  * @FilePath: \castgroup_bigscreen\src\components\amapPow.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
@@ -229,6 +229,9 @@ export default {
         }
         if (val != 'event') {
           this.map.remove(this.eventMarkersArr);
+          if (this.eventMarkers) {
+            this.map.remove(this.eventMarkers);
+          }
         }
       }
     },
@@ -323,12 +326,16 @@ export default {
         let _this = this;
         if (val) {
           if (val.longitude && val.latitude && !val.name) {
+            if (_this.eventMarkers) {
+              _this.map.remove(_this.eventMarkers);
+            }
             let lanLatArr = [val.longitude, val.latitude];
             let baseIcon = '';
             let fireIcon = require('@/assets/img/fire.png');
             let cutTreeIcon = require('@/assets/img/cutTree.png');
             let insectpestIcon = require('@/assets/img/insectpest.png');
             let stealIcon = require('@/assets/img/steal.png');
+
             if (val.eventType == 1) {
               val.eventContLabel = '火灾';
               baseIcon = fireIcon;
@@ -342,6 +349,11 @@ export default {
               val.eventContLabel = '偷盗林木';
               baseIcon = stealIcon;
             }
+            let baseIconData = new AMap.Icon({
+              size: new AMap.Size(35, 35), // 图标尺寸
+              image: baseIcon,
+              imageSize: new AMap.Size(35, 35) // 根据所设置的大小拉伸或压缩图片
+            });
             let treeSmallLabel =
               "<div class='info-small'>" +
               "<h5 class='marker-title'>历史事件" +
@@ -367,7 +379,7 @@ export default {
             this.eventMarker = new AMap.Marker({
               map: this.map,
               position: lanLatArr,
-              icon: baseIcon,
+              icon: baseIconData,
               anchor: 'bottom-center',
               offset: new AMap.Pixel(0, 0),
               zIndex: 9999
@@ -379,6 +391,11 @@ export default {
             });
             this.eventMarkers.push(this.eventMarker);
             // this.map.add(this.eventMarker);
+            _this.eventMarker.on('click', (e) => {
+              if (_this.eventMarkers) {
+                _this.map.remove(_this.eventMarkers);
+              }
+            });
           } else if (val.name == false && this.eventMarker) {
             this.map.on('rightclick', function (e) {
               _this.map.remove(_this.eventMarkers);
@@ -394,6 +411,9 @@ export default {
         let _this = this;
         if (val) {
           if (val.baseLongitude && val.baseLatitude && !val.name) {
+            if (_this.baseMarkers) {
+              _this.map.remove(_this.baseMarkers);
+            }
             let lanLatArr = [val.baseLongitude, val.baseLatitude];
             let treeSmallLabel =
               "<div class='info-small'>" +
@@ -433,6 +453,9 @@ export default {
               content: treeSmallLabel //设置文本标注内容
             });
             this.baseMarkers.push(_this.baseMarker);
+            this.baseMarker.on('click', (e) => {
+              _this.map.remove(_this.baseMarkers);
+            });
           } else if (val.name == false && _this.baseMarker) {
             this.map.on('rightclick', function (e) {
               _this.map.remove(_this.baseMarkers);
@@ -1790,58 +1813,55 @@ export default {
             item.eventContLabel = '偷盗林木';
             baseIcon = stealIcon;
           }
+          let baseIconData = new AMap.Icon({
+            size: new AMap.Size(35, 35), // 图标尺寸
+            image: baseIcon,
+            imageSize: new AMap.Size(35, 35) // 根据所设置的大小拉伸或压缩图片
+          });
+          let treeSmallLabel =
+            "<div class='info-small'>" +
+            "<h5 class='marker-title'>最新事件" +
+            '</h5>' +
+            "<div class='marker-content'>" +
+            '<p>事件类型：' +
+            item.eventContLabel +
+            '</p>' +
+            '<p>上报时间：' +
+            item.createTime +
+            '</p>' +
+            '<p>上报人：' +
+            item.createBy +
+            '</p>' +
+            '<p>位置：' +
+            item.cityName +
+            item.countyName +
+            item.townName +
+            item.villageName +
+            '</p>' +
+            '</div>' +
+            '</div>';
           _this.smallMarker = new AMap.Marker({
             map: _this.map,
             position: lanLatArr,
-            icon: baseIcon,
+            icon: baseIconData,
             anchor: 'bottom-center',
             offset: new AMap.Pixel(0, 0),
             zIndex: 999
           });
+
           _this.eventMarkersArr.push(_this.smallMarker);
+
           _this.smallMarker.on('click', function (e) {
-            let treeSmallLabel =
-              "<div class='info-small'>" +
-              "<h5 class='marker-title'>最新事件" +
-              '</h5>' +
-              "<div class='marker-content'>" +
-              '<p>事件类型：' +
-              item.eventContLabel +
-              '</p>' +
-              '<p>上报时间：' +
-              item.createTime +
-              '</p>' +
-              '<p>上报人：' +
-              item.createBy +
-              '</p>' +
-              '<p>位置：' +
-              item.cityName +
-              item.countyName +
-              item.townName +
-              item.villageName +
-              '</p>' +
-              '</div>' +
-              '</div>';
-            _this.eventMarker = new AMap.Marker({
-              position: lanLatArr,
-              icon: baseIcon,
-              anchor: 'bottom-center',
-              offset: new AMap.Pixel(0, 0),
-              zIndex: 999
-            });
-            _this.eventMarker.setLabel({
-              direction: 'top',
-              offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
-              content: treeSmallLabel //设置文本标注内容
+            let infoWindow = new AMap.InfoWindow({
+              isCustom: true,
+              offset: new AMap.Pixel(0, -20),
+              content: treeSmallLabel,
+              position: lanLatArr
             });
-            _this.map.add(_this.eventMarker);
+            infoWindow.open(_this.map, lanLatArr);
           });
           _this.smallMarker.on('mouseout', function (e) {
-            if (!_this.eventMarker) {
-              return;
-            } else {
-              _this.map.remove(_this.eventMarker);
-            }
+            _this.map.clearInfoWindow();
           });
         });
       });
@@ -1872,7 +1892,7 @@ export default {
         economicsList.forEach((item) => {
           let lanLatArr = [item.longitude, item.latitude];
           let beeIcon = item.icon;
-          let iconMeta = [82, 26];
+          let iconMeta = [35, 26];
           let sampleIcon = new AMap.Icon({
             size: new AMap.Size(iconMeta[0], iconMeta[1]), // 图标尺寸
             image: beeIcon,
@@ -1936,20 +1956,18 @@ export default {
                   '</p>' +
                   '</div>' +
                   '</div>';
-                _this.baseMarker.setLabel({
-                  direction: 'top',
-                  offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
-                  content: treeSmallLabel //设置文本标注内容
+                let infoWindow = new AMap.InfoWindow({
+                  isCustom: true,
+                  offset: new AMap.Pixel(0, -20),
+                  content: treeSmallLabel,
+                  position: lanLatArr
                 });
+                infoWindow.open(_this.map, lanLatArr);
               }
             });
           });
           this.baseMarker.on('mouseout', function (e) {
-            _this.baseMarker.setLabel({
-              direction: 'right',
-              offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
-              content: `<div>${element.baseName}</div>` //设置文本标注内容
-            });
+            _this.map.clearInfoWindow();
           });
         });
       });