vue项目记录-高德地图2.0-优化大量多边形卡顿

零、前言

本人比较菜，代码运用不够熟练，甚至可能会出现错误，请大家指正和教导

一、 需求

政府土地监管平台->临时需求->现有项目上快速开发示例->增加需求->抽离成单独项目

一开始没有技术评审->一前端一后端开发->数据量增多后发现卡顿

二、 思路

一开始可愁死我了，看着百度上的范围加载，聚合加载，怎么看怎么麻烦。而且使用了这些和之前的需求也会冲突（表格数据和地块数据绑定，点击一个，两边都要出效果）

后来仔细一想，地图层级较小时，地块小的和蚂蚁一样，点也点不到，有必要吗，就和产品沟通，最终改了需求：到乡镇级再显示数据，省市只显示行政边界，减少页面上元素的输俩个

三、 代码

    // 绘制行政区边界
    async setGeoJSON () {
      if (!this.dist.city) {
        if (this.cityArr.length === 1) {
          this.cityGeoJson = hebeJson[this.cityArr[0]]
          this.cityStatistic = await API.farm.getCountyStatistic(
            '河北省',
            this.cityArr[0]
          )
          this.cityStatisticArr = this.cityStatistic.map(item => item.county)
          this.cityStatistic = this.cityStatistic.map(item => {
            return Object.assign(item, { name: item.county })
          })
        } else {
          this.cityGeoJson = hebeJson['河北省']
          this.cityStatistic = await API.farm.getCityStatistic()
          this.cityStatisticArr = this.cityStatistic.map(item => item.city)
          this.cityStatistic = this.cityStatistic.map(item => {
            return Object.assign(item, { name: item.city })
          })
        }
      } else if (this.dist.city && !this.dist.county) {
        this.cityGeoJson = hebeJson[this.city]
        this.cityStatistic = await API.farm.getCountyStatistic(
          '河北省',
          this.city
        )
        this.cityStatisticArr = this.cityStatistic.map(item => item.county)
        this.cityStatistic = this.cityStatistic.map(item => {
          return Object.assign(item, { name: item.county })
        })
      } else if (this.dist.city && this.dist.county) {
        this.cityStatistic = await API.farm.getTownStatistic(
          '河北省',
          this.city,
          this.county
        )
        this.cityStatisticArr = this.cityStatistic.map(item => item.county)
        this.cityGeoJson = Object.assign(
          { type: 'FeatureCollection' },
          {
            features: hebeJson[this.city].features.filter(
              item => item.properties.name === this.county
            )
          }
        )
      }
    },
    showOrHideCallBack (polygon, cityStatisticText, isShow) {
      if (isShow) {
        if (!this.dist.county) {
          polygon.setOptions({
            fillOpacity: 0.8,
            fillColor: 'rgb(202,249,132)'
          })
          cityStatisticText.show()
        }
      } else {
        if (!this.dist.county) {
          polygon.setOptions({
            fillOpacity: 0.5,
            fillColor: 'rgb(202,249,132)'
          })
          cityStatisticText.hide()
        }
      }
    },
    async darwHebeGeoJson () {
      // console.log(this.cityGeoJson)
      let lastActivePolygon = null
      let lastCityStatisticText = null
      this.geojson = new AMap.GeoJSON({
        geoJSON: this.cityGeoJson,
        // 还可以自定义getMarker和getPolyline
        getPolygon: (geojson, lnglats) => {
          lnglats = lnglats.map(item1 =>
            item1.map(item2 => item2.map(item3 => MapUtil.gcj02towgs84(item3)))
          )
          let polygon = new AMap.Polygon({
            path: lnglats,
            fillOpacity: 0,
            strokeColor: '#fafafa',
            strokeWeight: 2,
            fillColor: 'rgb(0,0,0)',
            cursor: 'pointer'
          })
          if (
            this.cityStatisticArr.indexOf(geojson.properties.name) !== -1 &&
            !this.dist.town
          ) {
            polygon.setOptions({
              fillOpacity: 0.5,
              fillColor: 'rgb(202,249,132)'
            })
          }
          let marker = new AMap.Marker({
            position: MapUtil.gcj02towgs84(geojson.properties.center),
            icon: CityCenter,
            anchor: 'center',
            zooms: [6, 20],
            offset: new AMap.Pixel(0, 0)
          })
          marker.setLabel({
            direction: 'top',
            offset: new AMap.Pixel(10, 0), // 设置文本标注偏移量
            content: `<div class='city-marker-label'>${geojson.properties.name}</div>` // 设置文本标注内容
          })
          // console.log(markerContent)
          let markerContent = this.cityStatistic.find(
            item => item.name === geojson.properties.name
          )
          if (markerContent) {
            let cityStatisticText = new AMap.Text({
              position: MapUtil.gcj02towgs84(geojson.properties.center),
              anchor: 'middle-left',
              offset: new AMap.Pixel(50, 0),
              zIndex: 1000,
              bubble: true,
              text: `<div class='city-marker-content'>
                      <span>${markerContent.name}</span>
                      <span>测量经营地块:${markerContent.fieldCount}块</span>
                      <span>总面积:${markerContent.totalArea}亩</span>
                      <span>标志物数量:${markerContent.markerCount}个</span>
                      <span>机井数量:${markerContent.motorPumpedCount}个</span>
                  </div>`
            })
            this.map.add(cityStatisticText)
            cityStatisticText.hide()
            let distObjGroup = new AMap.OverlayGroup([
              polygon,
              marker,
              cityStatisticText
            ])
            distObjGroup.on('click', () => {
              if (lastActivePolygon !== polygon) {
                if (lastActivePolygon) {
                  this.showOrHideCallBack(
                    lastActivePolygon,
                    lastCityStatisticText,
                    false
                  )
                }
                this.showOrHideCallBack(polygon, cityStatisticText, true)
                lastActivePolygon = polygon
                lastCityStatisticText = cityStatisticText
              } else if (lastActivePolygon && lastActivePolygon === polygon) {
                this.showOrHideCallBack(polygon, cityStatisticText, false)
                lastActivePolygon = null
                lastCityStatisticText = null
              }
            })
            distObjGroup.on('mouseover', () => {
              if (lastActivePolygon !== polygon) {
                this.showOrHideCallBack(polygon, cityStatisticText, true)
              }
            })
            distObjGroup.on('mouseout', () => {
              if (lastActivePolygon !== polygon) {
                this.showOrHideCallBack(polygon, cityStatisticText, false)
              }
            })
            distObjGroup.on('touchstart', () => {
              this.showOrHideCallBack(polygon, cityStatisticText, true)
            })
            distObjGroup.on('touchend', () => {
              this.showOrHideCallBack(polygon, cityStatisticText, false)
            })
            this.cityStatisticTexts.push(cityStatisticText)
          }
          this.cityPolygons.push(polygon)
          this.cityMarker.push(marker)
          return polygon
        }
      })
      this.map.add(this.geojson)
      this.map.add(this.cityMarker)
    },