mapboxgl 点击矢量高亮显示

高亮显示有两种方式

一、通过首次加载的时候 将高亮渲染出来后通过点击获取到他的id 控制现实隐藏

https://blog.csdn.net/qq_33460928/article/details/100566632  参考了这个文章

要求，点击乡镇的模块的数据让他的边界变成蓝色的，我们这里用了filter

1、初始化加载矢量图层

let inFoLayerfenpei = {
              id: "uuidfenpei",
              type: "fill",
              source: {
                type: "geojson",
                data: `${CONFIG.Service10}/qgzhdc/task/api/v1/getTaskListGeojson?code=${this.getUserInfo.departmentid}`
              },
              paint: {
                "fill-outline-color": "#fff",
                "fill-color": [
                  "case",
                  ["boolean", ["==", ["get", "zxr"], null], false],
                  "#ff0000",
                  "#6da8ff"
                ],
                "fill-opacity": 0.3
              }
            };
            if (!self.map.getLayer("uuidfenpei")) {
              self.map.addLayer(inFoLayerfenpei);
            } else {
              self.map.getSource("uuidfenpei").setData(mapSourceData);
            }

2、初始化地图的时候定义点击矢量图层的点击事件

 this.map.on("click", "uuidfenpei", this.getqhdetail);

// 点击地图事件
    getqhdetail(e) {
      console.log(e.features[0], "EEEEEEEE");
      map.setFilter("pointlayerhighlight", [
        "in",
        "id",
        e.features[0].properties.id
      ]);
    },

3、在初始化地图的时候定义高亮的样式，我们将他的  filter: ["in", "id", ""], 根据他的id为空，默认没有高亮的

// 高亮显示
          let pointlayerhighlight = {
            id: "pointlayerhighlight",
            type: "line",
            source: {
              type: "geojson",
              data: `${CONFIG.Service10}/qgzhdc/task/api/v1/getTaskListGeojson?code=${this.getUserInfo.departmentid}`
            },
            filter: ["in", "id", ""],
            layout: {
              "line-cap": "round" /* 线条末端样式 */
            },
            paint: {
              "line-color": "#0078ff",
              "line-width": 2
            }
          };
          if (!self.map.getLayer("pointlayerhighlight")) {
            self.map.addLayer(pointlayerhighlight);
          } else {
            self.map.getSource("pointlayerhighlight").setData(mapSourceData);
          }

二、通过获取点击事件的详情获取到他的geojson,从新拼接成geojson 的格式

// 点击地图事件
    getqhdetail(e) {
      if (this.map.getLayer("pointlayerhighlight")) {
        this.map.removeLayer("pointlayerhighlight");
        this.map.removeSource("pointlayerhighlight");
      }
      console.log(e.features[0], "EEEEEEEE");
      let pointlayerhighlight = {
        id: "pointlayerhighlight",
        type: "line",
        source: {
          type: "geojson",
          data: {
            type: "Feature",
            properties: {},
            geometry: e.features[0].geometry
          }
        },
        layout: {
          "line-cap": "round" /* 线条末端样式 */
        },
        paint: {
          "line-color": "#0078ff",
          "line-width": 2,
          //"line-dasharray": [2, 1.5]
        }
      };
      if (!self.map.getLayer("pointlayerhighlight")) {
        self.map.addLayer(pointlayerhighlight);
      } else {
        self.map.getSource("pointlayerhighlight").setData(mapSourceData);
      }
    },

三、点击时layer所有图层都更改颜色

点击前，点击后颜色都更改可以通过setPpintPropety 修改颜色的改变

map.setPaintProperty("uuidfenpei", "fill-color", "#0078ff");