Browse Source

林下经济添加静态数据

wangcc 2 years ago
parent
commit
2bba135564
2 changed files with 123 additions and 0 deletions
  1. BIN
      src/assets/img/bee.png
  2. 123 0
      src/components/amap.vue

BIN
src/assets/img/bee.png


+ 123 - 0
src/components/amap.vue

@@ -373,6 +373,8 @@ export default {
             this.addTreeSpeciesPolygon();
           } else if (this.$store.state.addr.page === 'event') {
             this.getEven();
+          } else if (this.$store.state.addr.page === 'economics') {
+            this.getEconomics();
           }
         }
         //设置当前使用的定位用节点
@@ -691,6 +693,127 @@ export default {
         });
       });
     },
+    getEconomics() {
+      this.smallClassMapArr.forEach((item) => {
+        let polyData = JSON.parse(item.mapInfo);
+        let polygon = new AMap.Polygon({
+          map: this.map,
+          path: polyData.features[0].geometry.coordinates,
+          strokeOpacity: 1,
+          fillOpacity: 0,
+          strokeColor: 'red',
+          strokeWeight: 2,
+          zIndex: 999,
+          cursor: 'pointer'
+        });
+
+        polygon.on('mouseover', (e) => {
+          polygon.setOptions({
+            fillOpacity: 0.7,
+            fillColor: 'yellow'
+          });
+        });
+        polygon.on('mouseout', () => {
+          polygon.setOptions({
+            fillOpacity: 0,
+            fillColor: '#ccebc5'
+          });
+        });
+        this.map.add(polygon);
+      });
+      let economicsList = [
+        {
+          longitude: '108.568423',
+          latitude: '26.2042',
+          eventType: 1,
+          titleName: '投入点1',
+          eventContLabel: '蜜蜂',
+          measure: '15',
+          num: '109',
+          cityName: '1号养蜂基地'
+        }
+      ];
+      economicsList.forEach((item) => {
+        let lanLatArr = [item.longitude, item.latitude];
+        let beeIcon = require('@/assets/img/bee.png');
+        let cutTreeIcon = require('@/assets/img/cutTree.png');
+        let insectpestIcon = require('@/assets/img/insectpest.png');
+        let iconMeta = [82, 46];
+        let sampleIcon = new AMap.Icon({
+          size: new AMap.Size(iconMeta[0], iconMeta[1]), // 图标尺寸
+          image: beeIcon,
+          imageSize: new AMap.Size(iconMeta[0], iconMeta[1]) // 根据所设置的大小拉伸或压缩图片
+        });
+        let treeSmallLabel =
+          "<div class='info-small'>" +
+          "<h5 class='marker-title'>" +
+          item.titleName +
+          '</h5>' +
+          "<div class='marker-content'>" +
+          '<p>种植/养殖/加工作物:' +
+          item.eventContLabel +
+          '</p>' +
+          '<p>占地面积:' +
+          item.measure +
+          '亩' +
+          '</p>' +
+          '<p>当前数量:' +
+          item.num +
+          '箱' +
+          '</p>' +
+          '<p>位置:' +
+          item.cityName +
+          '</p>' +
+          '</div>' +
+          '</div>';
+
+        switch (item.eventType) {
+          case 1:
+            this.smallMarker = new AMap.Marker({
+              position: lanLatArr,
+              icon: sampleIcon,
+              anchor: 'bottom-center',
+              offset: new AMap.Pixel(0, 0)
+            });
+            this.smallMarker.setLabel({
+              direction: 'top',
+              offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
+              content: treeSmallLabel //设置文本标注内容
+            });
+            break;
+          case 2:
+            this.smallMarker = new AMap.Marker({
+              position: lanLatArr,
+              icon: cutTreeIcon,
+              anchor: 'bottom-center',
+              offset: new AMap.Pixel(0, 0)
+            });
+            this.smallMarker.setLabel({
+              direction: 'top',
+              offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
+              content: treeSmallLabel //设置文本标注内容
+            });
+            break;
+          case 3:
+            this.smallMarker = new AMap.Marker({
+              position: lanLatArr,
+              icon: insectpestIcon,
+              anchor: 'bottom-center',
+              offset: new AMap.Pixel(0, 0)
+            });
+            this.smallMarker.setLabel({
+              direction: 'top',
+              offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
+              content: treeSmallLabel //设置文本标注内容
+            });
+
+            break;
+          default:
+            break;
+        }
+        this.smallMarker.setMap(this.map);
+      });
+    },
     setMarker() {
       let forestFarm = [
         {