森林资源地图样式调整

src/components/amap.vue

@@ -45,7 +45,12 @@ export default {
           this.map.clearMap();
         }
       }
-    }
+    },
+    // '$store.state.addr.page':{
+    //   handler(val) {
+    //     console.log(val);
+    //   }
+    // }
   },
   computed: {
     ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList'])
@@ -130,6 +135,25 @@ export default {
           });
           polygon.setPath(pathArray);
           that.map.add(polygon);
+          var cityArr = result.districtList[0].districtList;
+          for (let i = 0; i < cityArr.length; i++) {
+            let marker = new AMap.Text({
+              //c城市指示标
+              text: cityArr[i].name,
+              zIndex: 120,
+              anchor: 'center', // 设置文本标记锚点
+              cursor: 'pointer',
+              style: {
+                padding: '0px 6px',
+                color: '#fff',
+                border: 'none',
+                fontSize: '12px',
+                'background-color': '#E6810C'
+              },
+              position: [cityArr[i].center.lng, cityArr[i].center.lat]
+            });
+            that.map.add(marker);
+          }
 
           // AMap.plugin(['AMap.Object3DLayer', 'AMap.Object3D'], function () {
           //   //object3Dlayer可以看做一个容器,用来放多个3d对象
@@ -208,12 +232,12 @@ export default {
           if (valCode == item.areaCode) {
             areaId = item.areaId;
           }
-        }); 
+        });
         this.vuexDistrictList.forEach((item) => {
           if (valCode == item.areaCode) {
             areaId = item.areaId;
           }
-        }); 
+        });
         if (props.level == 'city') {
           this.changeSelectCity({
             value: valCode,
@@ -230,6 +254,7 @@ export default {
       });
       this.switch2AreaNode(adcode);
       that.getDistrict(adName, mapLevel);
+      
     },
     //根据Hover状态设置相关样式
     toggleHoverFeature(feature, isHover, position) {
@@ -310,8 +335,13 @@ export default {
         }
 
         this.currentAreaNode = areaNode;
+        if (mapLevel == 'city' || mapLevel == undefined) {
+          this.setMarker();
+        }
         if (mapLevel === 'district') {
-          this.addPolygon();
+          if (this.$store.state.addr.page === 'forest') {
+             this.addPolygon();
+          }
         }
         //设置当前使用的定位用节点
         this.districtExplorer.setAreaNodesForLocating([this.currentAreaNode]);
@@ -340,7 +370,6 @@ export default {
     getSmallClass() {
       let that = this;
       smallClassMap().then((res) => {
-        // console.log(res.rows);
         this.smallClassMapArr = res.rows;
       });
     },
@@ -351,20 +380,18 @@ export default {
         let polygon = new AMap.Polygon({
           map: this.map,
           path: polyData.features[0].geometry.coordinates,
-          // fillColor: 'red',
           strokeOpacity: 1,
           fillOpacity: 0,
           strokeColor: 'red',
           strokeWeight: 2,
           zIndex: 999,
           cursor: 'pointer'
-          // strokeStyle: 'dashed',
-          // strokeDasharray: [5, 5]
         });
         var lanLatArr = [];
 
         polygon.on('mouseover', (e) => {
           lanLatArr = [e.lnglat.lng, e.lnglat.lat];
+          console.log(lanLatArr);
           let smallLabel =
             "<div class='info-small'>" +
             "<h5 class='marker-title'>" +
@@ -417,15 +444,66 @@ export default {
         this.map.add(polygon);
       });
       forestSample().then((res) => {
+        console.log(res.rows);
+        let sampleMarker = require('@/assets/img/sample-marker.png');
+        let iconMeta = [28, 28];
+        let sampleIcon = new AMap.Icon({
+          size: new AMap.Size(iconMeta[0], iconMeta[1]), // 图标尺寸
+          image: sampleMarker,
+          imageSize: new AMap.Size(iconMeta[0], iconMeta[1]) // 根据所设置的大小拉伸或压缩图片
+        });
         res.rows.forEach((item) => {
-          let zoom = this.map.getZoom();
-          let pixel = new AMap.Pixel(item.longitude, item.latitude);
-          item.lnglat = this.map.pixelToLngLat(pixel, zoom);
+          let lngLat = [item.longitude, item.latitude];
+          var marker = new AMap.Marker({
+            position: lngLat,
+            icon: sampleIcon,
+            anchor: 'bottom-center',
+            offset: new AMap.Pixel(0, 0)
+          });
+          marker.setLabel({
+            direction: 'right',
+            offset: new AMap.Pixel(-8, 0), //设置文本标注偏移量
+            content: `<div style="color:#05dfff">${item.smallNumber}-${item.sampleNumber}</div>` //设置文本标注内容
+          });
+          marker.setMap(this.map);
         });
-        console.log(res.rows);
       });
     },
-    setMarker() {}
+    setMarker() {
+      let forestFarm = [
+        {
+          label: '清镇林场',
+          lng: '106.361446',
+          lat: '26.636267'
+        },
+        {
+          label: '榕江林场',
+          lng: '108.298933',
+          lat: '26.043956'
+        },
+        {
+          label: '三都林场',
+          lng: '107.992916',
+          lat: '26.008507'
+        }
+      ];
+      let parentMarker = require('@/assets/img/pre-marker.png');
+      forestFarm.forEach((item) => {
+        let lngLat = [item.lng, item.lat];
+        var marker = new AMap.Marker({
+          position: lngLat,
+          icon: parentMarker,
+          anchor: 'bottom-center',
+          offset: new AMap.Pixel(0, 0)
+        });
+        marker.setLabel({
+          direction: 'bottom',
+          offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
+          content: `<div>${item.label}</div>` //设置文本标注内容
+        });
+        marker.setMap(this.map);
+      });
+    }
   }
 };
 </script>
@@ -480,8 +558,8 @@ export default {
   visibility: inherit !important;
 }
 /deep/ .amap-icon img {
-  max-width: 2rem !important;
-  max-height: 2rem !important;
+  max-width: 3rem !important;
+  max-height: 3rem !important;
 }
 /deep/ .info-small {
   background-image: url('../assets/img/small-label.png');