vue+mapbox控制图层的显示和隐藏

代码实现

 <el-button @click="changeFill()">changeFill</el-button>
 <el-button @click="changeLine()">changeLine</el-button>

 

data() {
    return {
      map: {}
    };
  },
 mounted() {
    this.$mapboxgl.accessToken = CONSTANT.MAP_TOKEN;
    this.map = new this.$mapboxgl.Map({
      container: "map",
      style: "mapbox://styles/mapbox/streets-v11",
      center: CONSTANT.MAP_CENTER,
      zoom: 3
    });
    var map = this.map;
    map.on("load", function() {
      map.addLayer({
        id: "myfill",
        type: "fill",
        source: {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                properties: {},
                geometry: {
                  type: "Polygon",
                  coordinates: [
                    [
                      [100.283203125, 37.3002752813443],
                      [95.80078125, 34.161818161230386],
                      [104.501953125, 32.91648534731439],
                      [100.283203125, 37.3002752813443]
                    ]
                  ]
                }
              },
              {
                type: "Feature",
                properties: {},
                geometry: {
                  type: "Polygon",
                  coordinates: [
                    [
                      [108.6328125, 38.34165619279595],
                      [105.99609375, 36.24427318493909],
                      [110.21484375, 32.39851580247402],
                      [111.533203125, 36.10237644873644],
                      [108.6328125, 38.34165619279595]
                    ]
                  ]
                }
              }
            ]
          }
        },
        layout: { visibility: "none" },
        paint: {
          "fill-color": "#088",
          "fill-opacity": 0.8
        }
      });

      map.addLayer({
        id: "myline",
        type: "line",
        source: {
          type: "geojson",
          data: {
            type: "Feature",
            properties: {},
            geometry: {
              type: "LineString",
              coordinates: [
                [94.04296874999999, 34.74161249883172],
                [104.150390625, 28.459033019728043],
                [113.02734374999999, 32.32427558887655],
                [116.89453125, 32.175612478499325]
              ]
            }
          }
        },
        layout: {
          visibility: "none",
          "line-join": "round",
          "line-cap": "round"
        },
        paint: {
          "line-color": "#888",
          "line-width": 8
        }
      });
    });
  },
 methods: {
    changeFill() {
      var visibility = this.map.getLayoutProperty("myfill", "visibility");
      if (visibility === "visible") {
        this.map.setLayoutProperty("myfill", "visibility", "none");
      } else {
        this.map.setLayoutProperty("myfill", "visibility", "visible");
      }
    },
    changeLine() {
      var visibility = this.map.getLayoutProperty("myline", "visibility");
      if (visibility === "visible") {
        this.map.setLayoutProperty("myline", "visibility", "none");
      } else {
        this.map.setLayoutProperty("myline", "visibility", "visible");
      }
    }
}

效果图：