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

我就是我 2021-07-25 18:20 1575阅读 0赞

# 代码实现 #

<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");
          }
        }
    }

# 效果图：  #

![20200419113939913.gif][]

[20200419113939913.gif]: /images/20210725/48a466806d274c61af9209997e69f58c.png