地图林下经济作物排版

src/components/amapPow.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2022-10-19 09:32:46
  * @LastEditors: wangcc
- * @LastEditTime: 2022-11-14 16:27:59
+ * @LastEditTime: 2022-12-12 17:31:55
  * @FilePath: \castgroup_bigscreen\src\components\amapPow.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
@@ -179,22 +179,24 @@ export default {
         let _this = this;
         let labelTown = val.label;
         if (labelTown == '水尾乡') {
-          labelTown = '水尾水族乡'
+          labelTown = '水尾水族乡';
         }
         AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {
           var placeSearch = new AMap.PlaceSearch({
             // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
-            city: '贵州省',
+            city: '贵州省'
           });
           placeSearch.search(labelTown, function (status, result) {
             // 查询成功时，result即对应匹配的POI信息
             if (status === 'complete') {
-              let center = [result.poiList.pois[0].location.lng, result.poiList.pois[0].location.lat]
-              _this.map.setZoomAndCenter(12, center, false, 12)
+              let center = [
+                result.poiList.pois[0].location.lng,
+                result.poiList.pois[0].location.lat
+              ];
+              _this.map.setZoomAndCenter(12, center, false, 12);
             }
           });
-        })
-
+        });
       }
     },
     '$store.state.addr.page': {
@@ -1084,7 +1086,7 @@ export default {
           let areaCode = areaPolygon.properties.name;
           district.search(areaCode, function (status, result) {
             let streetArr = result.districtList[0].districtList;
-            _this.zoom = result.districtList[0]
+            _this.zoom = result.districtList[0];
             for (let elementLs in streetArr) {
               _this.streetMarker = new AMap.Text({
                 //c城市指示标
@@ -1930,37 +1932,43 @@ export default {
         let economicsList = [];
         let baseList = [];
         res.rows.forEach((element) => {
-          economicsList.push({
-            longitude: element.cateLongitude,
-            latitude: element.cateLatitude,
-            icon: element.image
-          });
-          baseList.push({
-            baseId: element.baseId,
-            baseName: element.baseName,
-            longitude: element.baseLongitude,
-            latitude: element.baseLatitude
-          });
-        });
-        economicsList.forEach((item) => {
-          let lanLatArr = [item.longitude, item.latitude];
-          let beeIcon = item.icon;
-          let iconMeta = [35, 26];
-          let sampleIcon = new AMap.Icon({
-            size: new AMap.Size(iconMeta[0], iconMeta[1]), // 图标尺寸
-            image: beeIcon,
-            imageSize: new AMap.Size(iconMeta[0], iconMeta[1]) // 根据所设置的大小拉伸或压缩图片
-          });
-          this.smallMarker = new AMap.Marker({
-            map: _this.map,
-            position: lanLatArr,
-            icon: sampleIcon,
-            anchor: 'bottom-center',
-            offset: new AMap.Pixel(0, 0)
-          });
-          this.economicsArr.push(this.smallMarker);
-          // this.smallMarker.setMap(this.map);
+          if (element.cateLongitude && element.cateLatitude) {
+            economicsList.push({
+              longitude: element.cateLongitude,
+              latitude: element.cateLatitude,
+              icon: element.image
+            });
+          }
+          if (element.baseLongitude && element.baseLatitude) {
+            baseList.push({
+              baseId: element.baseId,
+              baseName: element.baseName,
+              longitude: element.baseLongitude,
+              latitude: element.baseLatitude,
+              icon: element.image
+            });
+          }
         });
+        // economicsList.forEach((item) => {
+        //   let lanLatArr = [item.longitude, item.latitude];
+        //   let beeIcon = item.icon;
+        //   let iconMeta = [35, 26];
+        //   let sampleIcon = new AMap.Icon({
+        //     size: new AMap.Size(iconMeta[0], iconMeta[1]), // 图标尺寸
+        //     image: beeIcon,
+        //     imageSize: new AMap.Size(iconMeta[0], iconMeta[1]) // 根据所设置的大小拉伸或压缩图片
+        //   });
+        //   // this.smallMarker = new AMap.Marker({
+        //   //   map: _this.map,
+        //   //   position: lanLatArr,
+        //   //   icon: sampleIcon,
+        //   //   anchor: 'bottom-center',
+        //   //   offset: new AMap.Pixel(0, 0)
+        //   // });
+        //   // this.economicsArr.push(this.smallMarker);
+        //   // this.smallMarker.setMap(this.map);
+        // });
+        console.log(baseList);
         baseList.forEach((element) => {
           let lanLatArr = [element.longitude, element.latitude];
           let baseIcon = require('@/assets/img/postion.png');
@@ -1970,17 +1978,29 @@ export default {
             image: baseIcon,
             imageSize: new AMap.Size(iconMeta[0], iconMeta[1]) // 根据所设置的大小拉伸或压缩图片
           });
-          this.baseMarker = new AMap.Marker({
+          let imgList = [];
+          console.log(element.icon);
+          if (element.icon) {
+            imgList.push(`<img id="baseMarkerLabel" src="${element.icon}"/>`);
+          } else {
+            imgList.push('暂无图片');
+          }
+          this.baseMarker = new AMap.Text({
             map: this.map,
             position: lanLatArr,
-            icon: sampleIcon,
+            text: element.baseName,
             anchor: 'bottom-center',
-            offset: new AMap.Pixel(0, 0)
+            offset: new AMap.Pixel(0, 0),
+            style: {
+              'background-color': 'transparent',
+              border: 'none',
+              'font-size': '12px'
+            }
           });
           this.baseMarker.setLabel({
-            direction: 'right',
+            direction: 'bottom',
             offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
-            content: `<div>${element.baseName}</div>` //设置文本标注内容
+            content: '<div class="base-marker-imgs">' + imgList + '</div>' //设置文本标注内容
           });
           this.baseMarkerArr.push(this.baseMarker);
           this.baseMarker.on('click', function (e) {
@@ -2220,17 +2240,20 @@ export default {
 
   34% {
     // opacity: 1;
-    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(34vw, 0px, 0px);
+    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
+      translate3d(34vw, 0px, 0px);
   }
 
   67% {
     // opacity: 1;
-    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(67vw, 0px, 0px);
+    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
+      translate3d(67vw, 0px, 0px);
   }
 
   100% {
     // opacity: 0;
-    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(160vw, 0px, 0px);
+    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
+      translate3d(160vw, 0px, 0px);
   }
 }
 
@@ -2300,4 +2323,19 @@ export default {
     width: 100%;
   }
 }
+/deep/ .base-marker-imgs {
+  // display: flex;
+    // line-height: 18px !important;
+    // width: 376px;
+    // overflow: auto;
+    // justify-content: left;
+    // align-items: center;
+
+  img {
+    width: 30px;
+    height: 30px;
+    margin: 0 4px;
+    cursor: pointer;
+  }
+}
 </style>