vue+ mapbox 添加geojson图层,点击图层 通过设置filter属性 使某个图层高亮）

1. 初始化地图，引入sprite、glyphs文件

      let sprite = "图标文件";

      let glyphs = "字体文件";

    this.map = new mapboxgl.Map({
        container: "map",
        maxZoom: 24,
        minZoom: 5,
        // style: "mapbox://styles/man135/ckvm2zd0i3cyp15nzy7mrdj4p",
        style: {
          version: 8,
          name: "Mapbox Streets Night",
          sprite: sprite, //图标文件
          glyphs: glyphs, //字体文件
          sources: {},
          layers: [],
        },
        center: [120.60411498091571, 36.225539293687276],
        zoom: 10.8,
        pitch: 10,
        bearing: 0,
      });

2.通过addLayer 添加geoserver服务器上的geojson图层

  本例子 添加两个图层分别是  河流面 以及河流高亮面 图层

this.map.on("load", () => {
         //地图背景
       this.map.addLayer({
        id: "background",
        type: "background",
      minzoom:0,
      maxzoom:24,
        layout: {
          'visibility':'visible'
        },
        paint: {
         'background-color':'#0a1729',
         'background-opacity':1
        },
      });
      
       
        // 河流面
        this.map.addLayer({
          id: "riverPolygon",
          type: "fill",
          source: {
            type: "geojson",
            data: 上传到geoServer服务器上的 对应的图层的geojson 链接地址,
          },
          layout: {},
          paint: {
            "fill-color": "#37BEDB",
            "fill-opacity": 0.4,
            "fill-outline-color": "#41AAB0",
          },
        });
        // 高亮
        this.map.addLayer({
          id: "riverPolygon-highlight",
          type: "fill",
          source: {
            type: "geojson",
            data: 上传到geoServer服务器上的 对应的图层的geojson 链接地址,
          },
          layout: {},
          paint: {
            "fill-color": "#00FFFF",
            "fill-opacity": 1,
            "fill-outline-color": "#00FFFF",
          },
          filter: ["in", "River_Name为geojson图层里的字段 就是你需要过滤的字段", ""],
        });
      });

3.图层点击事件 拿到图层信息 赋值 ，（本例子是点击对应的河流图层 对应的河流就会高亮）

 this.map.on("click", "创建的图层id，例如本例子是:riverPolygon", (e) => {
        // 获取图层中的River_Name
       var name = e.features[0].properties.River_Name;
        // 设置高亮图层的过滤
       this.map.setFilter("riverPolygon-highlight", [
            "in",
            "River_Name",
            name,
          ]);
      });