castgroup_bigscreen/src/components/amapnow.vue

<template>
  <div class="map-wrap">
    <div id="container" tabindex="0"></div>

    <div id="mask"></div>
    <div class="yun-wrap">
      <img class="yun yun1" src="../assets/img/云1.png" alt />
    </div>
    <div class="yun-wrap">
      <img class="yun yun2" src="../assets/img/云2.png" alt />
    </div>
    <div class="yun-wrap">
      <img class="yun yun3" src="../assets/img/云3.png" alt />
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import {
  smallClassMap,
  rightScrollData,
  forestSample,
  alarmDataApi
} from '@/service/index.js';
import { mapMutations, mapState, mapGetters } from 'vuex';
export default {
  name: 'amap',
  data() {
    return {
      AMap: null,
      map: null,
      lngLat: [106.628201, 26.646694],
      adName: '',
      zoom: 8,
      adcode: '贵州省',
      mapLevel: 'province',
      province: '',
      districtExplorer: null,
      tipMarker: null,
      $tipMarkerContent: null,
      currentAreaNode: null,
      smallClassMapArr: [],
      smallMarker: null,
      treeCompData: {},
      treeSmallLabel: null,
      leftPage: 'forest',
      parentId: '',
      // 行政区
      polygon: null,
      // 城市标注点
      cityMarker: null,
      smallClassPolygon: null,
      forestMarker: null,
      rightScrollMarker: null,
      markerData: {},
      cityMarkerArr: []
    };
  },

  mounted() {
    // this.initMAp();
    this.initAMap();
  },
  watch: {
    '$store.state.addr.parentId': {
      handler(val) {
        if (this.map) {
          this.parentId = val;
          // this.switch2AreaNode(
          //   val,
          //   this.$store.state.addr.mapLevel,
          //   this.$store.state.addr.selectCity,
          //   this.leftPage
          // );
          this.getDistrict(
            this.$store.state.addr.parentName,
            this.$store.state.addr.mapLevel
          );
        }
      }
    },
    '$store.state.addr.page': {
      handler(val) {
        this.leftPage = val;
        if (!this.smallClassMapArr) {
          this.$store.dispatch('getSmallClassMap', {
            cityId: this.$store.state.addr.selectCity.areaId,
            countyId: this.$store.state.addr.selectDistrict.areaId,
            townId: this.$store.state.addr.selectStreet.areaId
          });
        }
        if (this.parentId) {
          this.switch2AreaNode(
            this.parentId,
            this.$store.state.addr.mapLevel,
            this.$store.state.addr.selectCity,
            this.leftPage
          );
          // this.getDistrict(
          //   this.$store.state.addr.parentName,
          //   this.$store.state.addr.mapLevel
          // );
        }
      }
    },
    '$store.state.addr.smallClassMapArr': {
      handler(val) {
        if (val.code == 200) {
          this.smallClassMapArr = val.rows;
          // smallClassPolygon
          // this.map.setLayers(this.smallClassPolygon);
          if (this.$store.state.addr.mapLevel === 'district') {
            if (this.leftPage === 'forest') {
              this.addForestPolygon();
            } else if (this.leftPage === 'treeSpecies') {
              this.addTreeSpeciesPolygon();
            } else if (this.leftPage === 'event') {
              this.getEven();
            } else if (this.leftPage === 'economics') {
              this.getEconomics();
            }
          }
        }
      }
    }
  },
  computed: {
    ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList'])
  },
  created() {},
  methods: {
    ...mapMutations([
      'changeSelectCity',
      'changeSelectDistrict',
      'changeSelectStreet'
    ]),
    initAMap() {
      let _this = this;
      window._AMapSecurityConfig = {
        securityJsCode: '4a6a8d8ea053d9aa8f4677ee1179fe57' // 密钥
      };
      AMapLoader.load({
        key: '58f9d9f14f2700689ddbc618495693b7', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        AMapUI: {
          // 是否加载 AMapUI，缺省不加载
          version: '1.1', // AMapUI 缺省 1.1
          plugins: ['overlay/SimpleMarker'] // 需要加载的 AMapUI ui插件
        }
        // plugins:['AMap.ToolBar','AMap.DistrictSearch','AMap.Object3DLayer','AMap.Object3D'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        _this.AMap = AMap;
        _this.map = new AMap.Map('container', {
          //设置地图容器id
          viewMode: '3D', //是否为3D地图模式
          terrain: true,
          zoom: _this.zoom, //初始化地图级别
          center: _this.lngLat, //初始化地图中心点位置
          pitch: 30,
          // layers: [
          //   new AMap.TileLayer.Satellite(),
          //   new AMap.TileLayer.RoadNet()
          // ],
          features: ['road', 'bg'] //地图要素
        });
        AMapUI.load(
          ['ui/geo/DistrictExplorer', 'lib/$'],
          function (DistrictExplorer, $) {
            _this.loadMapData(DistrictExplorer, $);
          }
        );
        var wms = new AMap.TileLayer.WMTS({
          url: 'http://t4.tianditu.gov.cn/img_w/wmts',
          blend: false,
          tileSize: 256,
          params: {
            Layer: 'img',
            Version: '1.0.0',
            Format: 'tiles',
            // TileMatrixSet: 'EPSG:3857',
            TileMatrixSet: 'w',
            STYLE: 'default',
            tk: '064688075f565aa463866b915c378e00'
          }
        });
        wms.setMap(_this.map);
        // this.$nextTick(() => {
        //   this.getDistrict(_this.adcode,_this.mapLevel)
        // });
      });
    },
    getDistrict(adName, mapLevel) {
      switch (adName) {
        case '黔西南州':
          adName = '黔西南布依族苗族自治州';
          break;
        case '黔东南州':
          adName = '黔东南苗族侗族自治州';
          break;
        case '黔南州':
          adName = '黔南布依族苗族自治州';
          break;
      }
      let that = this;
      // this.map.clearMap();
      AMap.plugin(['AMap.DistrictSearch'], function () {
        var district = new AMap.DistrictSearch({
          // 返回行政区边界坐标等具体信息
          extensions: 'all',
          // 设置查询行政区级别为 区 （district）
          level: mapLevel,
          //  显示下级行政区级数，1表示返回下一级行政区
          subdistrict: 1
        });
        district.search(adName, function (status, result) {
          var outer = [
            new AMap.LngLat(-360, 90, true),
            new AMap.LngLat(-360, -90, true),
            new AMap.LngLat(360, -90, true),
            new AMap.LngLat(360, 90, true)
          ];
          if (result.districtList != undefined) {
            var holes = result.districtList[0].boundaries;
            var pathArray = [outer];
            pathArray.push.apply(pathArray, holes);
            that.polygon = new AMap.Polygon({
              pathL: pathArray,
              strokeColor: '#00eeff',
              strokeWeight: 1,
              fillColor: '#0c1b05', // 遮罩背景色
              fillOpacity: 0.8
            });
            that.polygon.setPath(pathArray);
            that.map.add(that.polygon);
            // that.map.setFitView(that.polygons);
            var cityArr = result.districtList[0].districtList;
            for (let i = 0; i < cityArr.length; i++) {
              that.cityMarker = new AMap.Text({
                //c城市指示标
                text: cityArr[i].name,
                zIndex: 1,
                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.cityMarkerArr.push(that.cityMarker)
              that.map.add(that.cityMarker);
            }
          } else {
            return false;
          }
        });
      });
    },
    loadMapData(DistrictExplorer, $) {
      let that = this;
      //创建一个实例
      that.districtExplorer = window.districtExplorer = new DistrictExplorer({
        eventSupport: true, //打开事件支持
        map: that.map
      });
      //当前聚焦的区域
      that.currentAreaNode = null;
      this.$tipMarkerContent = $('<div class="tipMarker top"></div>');
      this.tipMarker = new AMap.Marker({
        content: this.$tipMarkerContent.get(0),
        offset: new AMap.Pixel(0, 0),
        bubble: true
      });
      //监听feature的hover事件
      this.districtExplorer.on(
        'featureMouseout featureMouseover',
        (e, feature) => {
          this.toggleHoverFeature(
            feature,
            e.type === 'featureMouseover',
            e.originalEvent ? e.originalEvent.lnglat : null
          );
        }
      );
      //监听鼠标在feature上滑动
      this.districtExplorer.on('featureMousemove', (e) => {
        //更新提示位置
        this.tipMarker.setPosition(e.originalEvent.lnglat);
      });
      var adName = that.adcode; //贵州省
      var mapLevel = that.mapLevel;
      var adcode = '520000';
      this.map.on('mousewheel', (e) => {
        console.log(e.lnglat.lng, e.lnglat.lat);
        var zoom = this.map.getZoom(); //获取当前地图级别
        // console.log(this.map.getCity());
        console.log(zoom);
        if (zoom > '8' && zoom < '8.1') {
          console.log('开始检测');
          AMap.plugin('AMap.Geocoder', function () {
            let geocoder = new AMap.Geocoder({
              radius: 1000,
              extensions: 'base'
            });
            geocoder.getAddress(
              [e.lnglat.lng, e.lnglat.lat],
              function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                  if (result && result.regeocode) {
                    console.log(result);
                    
                    // that.switch2AreaNode(result.regeocode.addressComponent.adcode);
                  }
                }
              }
            );
          });
        }
      });

      //feature被点击
      this.districtExplorer.on('featureClick', (e, feature) => {
        // that.map.clearMap();
        console.log(feature);
        const props = feature.properties;
        mapLevel = props.level;
        adName = props.name;
        // that.getDistrict(adName, mapLevel);
        // this.switch2AreaNode(props.adcode);

        // this.$store.dispatch('searchArea', {
        //   parentId: props.adcode,
        //   name: props.name,
        //   mapLevel: props.level
        // });
        // let valCode = props.adcode + '000000';
        // let areaId = '';
        // this.vuexCityList.forEach((item) => {
        //   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,
        //     label: props.name,
        //     areaId: areaId
        //   });
        // } else if (props.level == 'district') {
        //   this.changeSelectDistrict({
        //     value: valCode,
        //     label: props.name,
        //     areaId: areaId
        //   });
        // }

        // this.$store.dispatch('getSmallClassMap', {
        //   cityId: this.$store.state.addr.selectCity.areaId,
        //   countyId: this.$store.state.addr.selectDistrict.areaId,
        //   townId: this.$store.state.addr.selectStreet.areaId
        // });
      });
      that.getDistrict(adName, mapLevel);
      this.switch2AreaNode(adcode);
    },
    //根据Hover状态设置相关样式
    toggleHoverFeature(feature, isHover, position) {
      if (feature.properties.subFeatureIndex != null) {
        this.tipMarker.setMap(isHover ? this.map : null);
        if (!feature) {
          return;
        }
        const props = feature.properties;
        if (isHover) {
          //更新提示内容
          this.$tipMarkerContent.html(props.name);
          //更新位置
          this.tipMarker.setPosition(position || props.center);
        }
        //更新相关多边形的样式
        const polys = this.districtExplorer.findFeaturePolygonsByAdcode(
          props.adcode
        );
        polys.forEach((elemnt) => {
          elemnt.setOptions({
            fillColor: '#0dbc79',
            fillOpacity: isHover ? 0.5 : 0
          });
        });
      }
    },
    //绘制某个区域的边界
    renderAreaPolygons(areaNode) {
      //更新地图视野
      this.map.setBounds(areaNode.getBounds(), null, null, false);
      //清除已有的绘制内容
      this.districtExplorer.clearFeaturePolygons();
      //绘制子区域
      this.districtExplorer.renderSubFeatures(areaNode, (e) => {
        return {
          cursor: 'default',
          bubble: true,
          strokeColor: 'yellow', //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 2, //线宽
          fillOpacity: 0 //填充透明度
        };
      });
      //绘制父区域
      this.districtExplorer.renderParentFeature(areaNode, {
        cursor: 'default',
        bubble: true,
        strokeColor: '#00eeff', //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 2, //线宽
        fillOpacity: 0, //填充透明度
        fillColor: '#0c1b05' // 遮罩背景色
      });
    },
    //切换区域后刷新显示内容
    refreshAreaNode(areaNode) {
      this.districtExplorer.setHoverFeature(null);
      this.renderAreaPolygons(areaNode);
    },
    //切换区域
    switch2AreaNode(adcode, mapLevel, selectCity, page, callback) {
      console.log(adcode);
      if (
        this.currentAreaNode &&
        '' + this.currentAreaNode.getAdcode() === '' + adcode
      ) {
        return;
      }
      this.loadAreaNode(adcode, (error, areaNode) => {
        if (error) {
          if (callback) {
            callback(error);
          }
          return;
        }
        this.currentAreaNode = window.currentAreaNode = areaNode;
        if (
          mapLevel == 'city' ||
          mapLevel == undefined ||
          mapLevel == 'province'
        ) {
          this.setMarker();
        }
        if (mapLevel === 'district') {
          if (page === 'forest') {
            this.addForestPolygon();
            this.getForestSample(page);
          } else if (page === 'treeSpecies') {
            this.addTreeSpeciesPolygon();
            this.getRightScrollData(page);
          } else if (page === 'event') {
            this.getEven();
          } else if (page === 'economics') {
            this.getEconomics();
          }
        }
        //设置当前使用的定位用节点
        this.districtExplorer.setAreaNodesForLocating([this.currentAreaNode]);

        this.refreshAreaNode(areaNode);
        if (callback) {
          callback(null, areaNode);
        }
      });
    },
    // 加载区域
    loadAreaNode(adcode, callback) {
      this.districtExplorer.loadAreaNode(adcode, (error, areaNode) => {
        if (error) {
          if (callback) {
            callback(error);
          }
          console.error(error);
          return;
        }

        if (callback) {
          callback(null, areaNode);
        }
      });
    },
    // getSmallClass() {
    //   let that = this;
    //     this.smallClassMapArr = this.$store.state.addr.smallClassMapArr;
    // },
    addForestPolygon() {
      let that = this;
      this.smallClassMapArr.forEach((item) => {
        let polyData = JSON.parse(item.mapInfo);
        that.smallClassPolygon = new AMap.Polygon({
          map: this.map,
          path: polyData.features[0].geometry.coordinates,
          strokeOpacity: 1,
          fillOpacity: 0,
          strokeColor: 'red',
          strokeWeight: 2,
          zIndex: 999,
          cursor: 'pointer'
        });
        var lanLatArr = [];
        that.smallClassPolygon.on('mouseover', (e) => {
          lanLatArr = [e.lnglat.lng, e.lnglat.lat];
          let smallLabel =
            "<div class='info-small'>" +
            "<h5 class='marker-title'>" +
            item.countyName +
            '-' +
            item.smallNumber +
            '</h5>' +
            "<div class='marker-content'>" +
            '<p>小班号：' +
            item.smallNumber +
            '</p>' +
            '<p>样地数：' +
            item.sampleCount +
            '</p>' +
            '<p>村（林班）：' +
            polyData.features[0].properties.CUN +
            '</p>' +
            '<p>乡镇（林场）：' +
            item.townName +
            '</p>' +
            '</div>' +
            '</div>';
          this.smallMarker = new AMap.Marker({
            position: lanLatArr,
            icon: require('@/assets/img/small-marker.png'),
            anchor: 'bottom-center',
            offset: new AMap.Pixel(0, 0)
          });
          this.smallMarker.setLabel({
            direction: 'right',
            offset: new AMap.Pixel(-150, -90), //设置文本标注偏移量
            content: smallLabel //设置文本标注内容
          });
          this.smallMarker.setMap(this.map);
          that.smallClassPolygon.setOptions({
            fillOpacity: 0.7,
            fillColor: 'yellow'
          });
        });
        that.smallClassPolygon.on('mouseout', () => {
          if (this.smallMarker) {
            this.smallMarker.setMap(null);
            this.smallMarker = null;
          }
          that.smallClassPolygon.setOptions({
            fillOpacity: 0,
            fillColor: '#ccebc5'
          });
        });
        this.map.add(that.smallClassPolygon);
      });
    },
    // 获取样地数据
    getForestSample(page) {
      forestSample({
        cityId: this.$store.state.addr.selectCity.areaId,
        countyId: this.$store.state.addr.selectDistrict.areaId,
        townId: this.$store.state.addr.selectStreet.areaId
      }).then((res) => {
        let sampleMarker = require('@/assets/img/sample-marker.png');
        let iconMeta = [28, 28];
        this.setMarkers(res, sampleMarker, iconMeta, page);
      });
    },
    // 添加地图标注（样地、树种）
    setMarkers(res, sampleMarker, iconMeta, page) {
      let _this = this;
      if (this.forestMarker) {
        this.forestMarker.setMap(null);
        this.forestMarker = null;
      }
      this.markerData = res;
      let iconMarker = sampleMarker;
      let iconMetaSet = iconMeta;
      let sampleIcon = new AMap.Icon({
        size: new AMap.Size(iconMetaSet[0], iconMetaSet[1]), // 图标尺寸
        image: iconMarker,
        imageSize: new AMap.Size(iconMetaSet[0], iconMetaSet[1]) // 根据所设置的大小拉伸或压缩图片
      });
      this.markerData.rows.forEach((item) => {
        let lngLat = [item.longitude, item.latitude];
        if (item.longitude && item.latitude) {
          this.forestMarker = new AMap.Marker({
            position: lngLat,
            icon: sampleIcon,
            anchor: 'bottom-center',
            offset: new AMap.Pixel(0, 0)
          });
          if (page === 'forest') {
            this.forestMarker.setLabel({
              direction: 'right',
              offset: new AMap.Pixel(-8, 0), //设置文本标注偏移量
              content: `<div style="color:#05dfff">${item.smallNumber}-${item.sampleNumber}</div>` //设置文本标注内容
            });
            let clickLabel =
              "<div class='info-small'>" +
              "<h5 class='marker-title'>" +
              item.smallNumber +
              '-' +
              item.sampleNumber +
              '</h5>' +
              "<div class='marker-content'>" +
              '<p>样地号：' +
              item.sampleNumber +
              '</p>' +
              '<p>所属小班：' +
              item.smallNumber +
              '</p>' +
              '<p>样地蓄积：' +
              item.landStock +
              '</p>' +
              '<p>样地株数：' +
              item.landNumber +
              '</p>' +
              '</div>' +
              '</div>';
            let lastMarker = new AMap.Marker({
              position: lngLat,
              icon: sampleIcon,
              anchor: 'bottom-center',
              offset: new AMap.Pixel(0, 0)
            });
            lastMarker.setLabel({
              zIndex: 120,
              direction: 'top',
              offset: new AMap.Pixel(-4, 0), //设置文本标注偏移量
              content: clickLabel //设置文本标注内容
            });
            this.forestMarker.on('click', function (e) {
              _this.map.add(lastMarker);
            });
            this.forestMarker.on('mouseout', function (e) {
              _this.map.remove(lastMarker);
            });
          } else if (page === 'treeSpecies') {
            this.forestMarker.setLabel({
              direction: 'top',
              offset: new AMap.Pixel(-2, 6), //设置文本标注偏移量
              content: `<div class="label-treecomp">${item.treeComp}<span class="smallH">${item.smallNumber}</span></div>` //设置文本标注内容
            });
          }
          this.map.add(this.forestMarker);
        }
      });
      // console.log(page);
      // if (page === 'forest') {
      //   this.map.on('click', function (e) {
      //     _this.map.remove(_this.forestMarker);
      //   });
      // }
    },
    // markerClick(e, item) {
    //   console.log(e);
    //   console.log(item);
    // },
    addTreeSpeciesPolygon() {
      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'
        });
        var lanLatArr = [];
        polygon.on('mouseover', (e) => {
          lanLatArr = [e.lnglat.lng, e.lnglat.lat];
          rightScrollData({ smallNumber: item.smallNumber }).then((res) => {
            this.treeCompData = res.rows[0];
          });
          if (!this.treeCompData) {
            return false;
          }
          let treeCompData = this.treeCompData;
          let treeSmallLabel =
            "<div class='info-small'>" +
            "<h5 class='marker-title'>小班" +
            treeCompData.smallNumber +
            '</h5>' +
            "<div class='marker-content'>" +
            '<p>树种组成：' +
            treeCompData.treeComp +
            '</p>' +
            '<p>树种结构：' +
            treeCompData.treeStruct +
            '</p>' +
            '<p>优势树种：' +
            treeCompData.superTree +
            '</p>' +
            '<p>优势树种平均胸径：' +
            treeCompData.superTreeDbh +
            '厘米' +
            '</p>' +
            '<p>优势树种平均高：' +
            treeCompData.superTreeHigh +
            '米' +
            '</p>' +
            '<p>位置：' +
            treeCompData.countyName +
            treeCompData.townName +
            treeCompData.villageName +
            '</p>' +
            '</div>' +
            '</div>';
          this.smallMarker = new AMap.Marker({
            position: lanLatArr,
            icon: require('@/assets/img/small-marker.png'),
            anchor: 'bottom-center',
            offset: new AMap.Pixel(0, 0)
          });
          this.smallMarker.setLabel({
            direction: 'top',
            offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
            content: treeSmallLabel //设置文本标注内容
          });

          this.smallMarker.setMap(this.map);
          polygon.setOptions({
            fillOpacity: 0.7,
            fillColor: 'yellow'
          });
        });
        polygon.on('mouseout', () => {
          if (this.smallMarker) {
            this.smallMarker.setMap(null);
            this.smallMarker = null;
          }
          polygon.setOptions({
            fillOpacity: 0,
            fillColor: '#ccebc5'
          });
        });
        this.map.add(polygon);
      });
    },
    // 获取小班列表
    getRightScrollData(page) {
      rightScrollData({
        cityId: this.$store.state.addr.selectCity.areaId,
        countyId: this.$store.state.addr.selectDistrict.areaId,
        townId: this.$store.state.addr.selectStreet.areaId
      }).then((res) => {
        let sampleMarker = require('@/assets/img/sanjiaod.png');
        let iconMeta = [16, 10];
        this.setMarkers(res, sampleMarker, iconMeta, page);
      });
    },
    // 事件信息
    getEven() {
      alarmDataApi().then((res) => {
        res.data.forEach((item) => {
          let lanLatArr = [item.longitude, item.latitude];
          let fireIcon = require('@/assets/img/fire.png');
          let cutTreeIcon = require('@/assets/img/cutTree.png');
          let insectpestIcon = require('@/assets/img/insectpest.png');
          if (item.eventType == 1) {
            item.eventContLabel = '火灾';
          } else if (item.eventType == 2) {
            item.eventContLabel = '砍伐';
          } else if (item.eventType == 3) {
            item.eventContLabel = '病虫害';
          }
          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>';

          switch (item.eventType) {
            case 1:
              this.smallMarker = new AMap.Marker({
                position: lanLatArr,
                icon: fireIcon,
                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);
        });
      });
    },
    // 林业经济
    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 = [
        {
          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>

<style  lang='scss' scoped>
#container {
  width: 100%;
  height: 100vh;
  /deep/ .tdt-pane {
    z-index: auto;
  }
}
/deep/ .amap-marker-content {
  .tipMarker {
    color: #555;
    background-color: rgba(255, 254, 239, 0.8);
    border: 1px solid #7e7e7e;
    padding: 2px 6px;
    font-size: 12px;
    white-space: nowrap;
    display: inline-block;
    &:before,
    &:after {
      content: '';
      display: block;
      position: absolute;
      margin: auto;
      width: 0;
      height: 0;
      border: solid transparent;
      border-width: 5px 5px;
    }
    &.top {
      transform: translate(-50%, -110%);
      &:before,
      &:after {
        bottom: -9px;
        left: 0;
        right: 0;
        border-top-color: rgba(255, 254, 239, 0.8);
      }
      &:before {
        bottom: -10px;
        border-top-color: #7e7e7e;
      }
    }
  }
}
/deep/ .amap-logo,
.amap-copyright {
  display: block !important;
  visibility: inherit !important;
}
/deep/ .amap-icon img {
  max-width: 3rem !important;
  max-height: 3rem !important;
}
/deep/ .info-small {
  background-image: url('../assets/img/small-label.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 18rem;
  // height: 10rem;
  color: #fff;
  .marker-title {
    margin: 0 auto;
    line-height: 30px;
  }
  .marker-content {
    padding: 0 20px 10px 20px;
    p {
      text-align: left;
      font-size: 12px;
      margin: 0;
      line-height: 28px;
    }
  }
}
/deep/ .amap-marker-label {
  border: 0;
  background-color: transparent;
}

#mask {
  width: 100%;
  height: 100vh;
  box-shadow: inset 0px 0px 10vw 8vw rgba(0, 10, 34, 0.54);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
@keyframes imageAnimation_32630606 {
  0% {
    // opacity: 0;
    transform: none;
  }
  34% {
    // opacity: 1;
    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);
  }
  100% {
    // opacity: 0;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
      translate3d(160vw, 0px, 0px);
  }
}

.yun-wrap {
  position: fixed;
  left: 0;
  top: 350px;
  width: 100vw;
  pointer-events: none;
}
.yun {
  position: fixed;
  left: -500px;
  animation-name: imageAnimation_32630606;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 110s;
  animation-delay: 0s;
  -webkit-user-drag: none;
  filter: none;
  pointer-events: none;
}
.yun2 {
  bottom: 20px;
  animation-duration: 90s;
  animation-delay: 10s;
}
.yun3 {
  top: 100px;
  animation-duration: 120s;
  animation-delay: 15s;
}
/deep/ .label-treecomp {
  position: relative;
  background-color: #05dfff;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  &::before {
    position: absolute;
    top: 26px;
    left: 36%;
    content: '';
    width: 0px;
    height: 0px;
    border: 10px solid transparent;
    border-top-color: #05dfff;
  }
  .smallH {
    position: absolute;
    top: 38px;
    z-index: 99;
    display: block;
    color: #05dfff;
    font-size: 14px;
    left: 46%;
  }
}
</style>