Mapbox GL如何添加 / 删除 /高亮图层？

效果图展示

1.初始化地图

 initMap() {
      let vm = this;
      //获取图层数据
      let p = new Promise((resolve, reject) => {
        resolve([vm.getAreaData()]);
      })
      p.then(res => {
        Require(['Axios', 'PSRMap', 'ResourceQuery', 'SpatialAnalyst', 'Projection', 'CustomGraphics', 'Util', 'Measure', 'Diagram'], () => {
          vm.amap = window.amap = new WebGIS.Map();
          amap.init('mapGridBox', {
            style: WebGIS.Config.styles.base,
            center: [108.78997882442495, 23.83413245081408],
            zoom: 6 ,// WebGIS.Config.examples.zoom
            container: 'mapGridBox',
            controls: ['geolocate', 'navigation'],
            fullExtent: WebGIS.Config.examples.fullExtent
          }, () => {
            amap.on('load', () => {
              res[0].then(res=>{
                let rgbList = [];
                res.colorList.forEach(item => {
                  let strlist = item.split(',');
                  let rgbastr = `rgba(${strlist[0] + ',' + strlist[1] + ',' + strlist[2]},0.5)`;
                  rgbList.push(rgbastr)
                });
                this.layerIds = [];//初始化图层id集合
                this.sourceIds = [];//初始化数据源id集合
                //let num = 0;
                res.arrlast.forEach((ite, index) => {
                  //num+=1;
                  vm.drawArea(ite, rgbList[index],res.nameList[index],index)
                });
              });
              // 处理射线数据
              /*******开始*******/
              window.markerGroup = new WebGIS.MarkerGroup(amap);
              window.measure = new WebGIS.Measure(amap);

            });
            amap.on('zoomend',function (data) {
              console.log(amap.getZoom());
            })
          });
        });
      })
    },

2.添加图层

    drawArea(coordinates, color, name, index) {
      let that = this;
      let arr = [];
      coordinates[0].forEach(ite => {
        arr.push(new WebGIS.Projection.mercatorToWgs84(ite));
      });
      let arrlist = [];
      arrlist.push(arr);
      //添加数据源
      amap.addSource(
        name +'gridSource' + index,
        {
          'type': 'geojson',
          'data': {
            'type': 'Feature',
            'geometry': {
              'type': 'Polygon',
              'coordinates': arrlist
            }
          }
        }
      );
      that.sourceIds.push(name +'gridSource' + index);
      //多边形
      amap.addLayer({
        'id': name + 'fill' + index,
        'type': 'fill',
        'source':  name +'gridSource' + index, // reference the data source
        'layout': {
          'visibility': 'visible'
        },
        'maxZoom': 22,
        'minZoom': 6,
        'paint': {
          'fill-color': color, // blue color fill
          'fill-opacity': 0.8
        }
      });
      that.layerIds.push(name + 'fill' + index);
      //描边
      amap.addLayer({
        'id': name + 'line' + index,
        'type': 'line',
        'source': name +'gridSource' + index,
        'layout': {
          'visibility': 'visible'
        },
        'maxZoom': 22,
        'minZoom': 6,
        'paint': {
          'line-color': '#000',
          'line-width': 1
        }
      });
      that.layerIds.push(name + 'line' + index);
      //文字
      amap.addLayer({
        'id': name+'text'+ index,
        "type": "symbol",
        "source": name +'gridSource' + index,
        "layout": {
          'visibility': 'visible',
          "text-field": name,
          "text-size": 12
        },
        'maxZoom': 22,
        'minZoom': 6,
      });
      that.layerIds.push(name+'text'+ index);
      let hoveredStateId = null;
      //图层绑定click事件
      amap.on('click',name + 'fill' + index,function (e) {
        that.setAreaHigh(name + 'fill' + index,color);
        //显示左侧抽屉
        if (! that.showDrawer) {
          that.showDrawer = true;
          if (this.gridType === 1) {
            //行业分类列表全选
            setTimeout(() => {
              that.$refs.categoryInforComponent.checkAllSelect();
            },200)
          }
        }
      })
    },

3.高亮图层

    setAreaHigh(id,color){
      let that = this;
      let obj = {
        id: id,
        color: color,
        isActive: true
      };
      if (that.polygonColor.length === 0) {
        //当前图层没有高亮则设置高亮，并将信息保存在polygonColor中
        amap.pmap.setPaintProperty(id, "fill-color", "#ff0000");
        that.polygonColor.push(obj);
      } else {
        //再次点击高亮图层则取消高亮（反之则高亮）
        if (that.polygonColor[0].id === id && that.polygonColor[0].isActive) {
          amap.pmap.setPaintProperty(
            that.polygonColor[0].id,
            "fill-color",
            that.polygonColor[0].color
          );
          obj.isActive = false;
        } else if (that.polygonColor[0].id === id && !that.polygonColor[0].isActive) {
          amap.pmap.setPaintProperty(
            that.polygonColor[0].id,
            "fill-color",
            "#ff0000"
          );
          obj.isActive = true;
        } else if (that.polygonColor[0].id !== id) {
          //将之前高亮的图层改完本身的颜色
          amap.pmap.setPaintProperty(
            that.polygonColor[0].id,
            "fill-color",
            that.polygonColor[0].color
          );
          //然后将当前点击的图层高亮
          amap.pmap.setPaintProperty(
            id,
            "fill-color",
            "#ff0000"
          );
          obj.isActive = true;
        }
        //清空设置高亮集合
        that.polygonColor = [];
        //将当前高亮的图层信息保存在polygonColor中
        that.polygonColor.push(obj);
      }
    },

4.删除图层，并重新渲染图层

 async gridTypeChange(){
      //删除图层
      if (this.layerIds.length) {
        this.layerIds.forEach(id => {
          amap.removeLayer(id)
        })
        this.layerIds = [];
      }
      //删除数据源
      if (this.sourceIds.length) {
        this.sourceIds.forEach(id =>{
          amap.removeSource(id)
        })
        this.sourceIds = [];
      }
      //重新添加图层
      let res = await this.getAreaData();
      let rgbList = [];
      res.colorList.forEach(item => {
        let strlist = item.split(',');
        let rgbastr = `rgba(${strlist[0] + ',' + strlist[1] + ',' + strlist[2]},0.5)`;
        rgbList.push(rgbastr)
      });
      let num = 0;
      res.arrlast.forEach((ite, index) => {
        num += 1;
        this.drawArea(ite, rgbList[index],res.nameList[index],num)
      });
    }