mapbox加载pbf切片

const currentUrl = `${location.protocol}//${location.hostname}${
      location.port ? ":" + location.port : ""
    }`;
    // console.log(currentUrl,'****************')
    if (flag) {
      this.MapBox.map.addSource("mapbox-terrain", {
        type: "vector",
        tiles: [
          currentUrl +
            process.env.VUE_APP_BASE_API +
            "/traffic-safety/map/vector/tile/new/{z}/{x}/{y}.pbf",
        ],
      });
      this.MapBox.map.addLayer({
        id: "terrain-data",
        type: "line",
        source: "mapbox-terrain",
        "source-layer": "traffic", // source-layer和mvt服务中的图层名对应
        layout: {
          "line-join": "round",
          "line-cap": "round",
        },
        paint: {
          // 'line-color': '#66cc00',
          "line-color": [
            "match",
            ["get", "state"],
            "1",
            "#16CE95",
            "2",
            "#F79D06",
            "3",
            "#D80304",
            "4",
            "#8F0021",
            "#16CE95",
          ],
          "line-width": 2,
        },
      });
    } else {
      this.LayerManager.removeLayer("terrain-data");
      this.MapBox.map.removeSource("mapbox-terrain");
    }

以上代码加载切片图层代码，其中

"source-layer": "traffic", // source-layer和mvt服务中的图层名对应

设置图层闪烁效果代码：

// 设置闪烁效果
      const flashInterval = setInterval(() => {
        const visibility = that.MapBox.map.getLayer("line").visibility;
        that.MapBox.map.setLayoutProperty(
          "line",
          "visibility",
          visibility === "visible" ? "none" : "visible"
        );
      }, 500); // 每 500 毫秒闪烁