mapbox 卷帘

画布多说直接上图，就是简单的卷帘功能

首先的看官网的例子已经有啦，https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-compare/

所以改良一下就是这样的了

<template>
  <div class="hello" style="height:100%;width:100%;position:relative;">
    <div>
      <div id="before" class="map"></div>
      <div id="after" class="map"></div>
      <div id="wrapper"></div>
    </div>
    <div class="datalist">
      <el-radio-group v-model="radio" @change="handleSelectionChange">
        <el-radio v-for="item in tableData" :key="item.address" :label="item.address">{{item.name}}</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>
<script>
export default {
  name: "Map",
  components: {
    baseMap
  },
  data() {
    return {
      radio:
        TDTHEADER +
        "/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" +
        gpmToken,
      // ishorizontal: "horizontal",
      isHorizontal:  true,
      beforeMap: null,
      afterMap: null,
      isH: false,
      tableData: [
        {
          date: "2016-05-03",
          name: "矢量",
          address:
            TDTHEADER +
            "/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" +
            gpmToken
        },
        {
          date: "2016-05-02",
          name: "影像",
          address:
            TDTHEADER +
            "/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" +
            gpmToken
        },
        {
          date: "2016-05-04",
          name: "地形",
          address:
            TDTHEADER +
            "/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" +
            gpmToken
        }
      ]
    };
  },
  watch: {
   
  },
  methods: {
    initmap() {
      mapboxgl.accessToken =
        "pk.eyJ1IjoiMTU5MzU3MyIsImEiOiJjamw3bW85dHkwbXlvM3ZzMm5iZnZ6bWJpIn0.W6_MGVjNaImIybFdMJBMpg";
      this.beforeMap = new mapboxgl.Map({
        container: "before",
        style: window.beforestyle,
        zoom: 2,
        center: [116.28076521512813, 39.85685373066069]
      });
      this.afterMap = new mapboxgl.Map({
        container: "after",
        style: window.afterstyle,
        zoom: 2,
        center: [116.28076521512813, 39.85685373066069]
      });
      window.map = new mapboxgl.Compare(
        this.beforeMap,
        this.afterMap,
        "#wrapper",
        {
          // orientation: this.ishorizontal
          orientation: this.ishorizontal ? "horizontal" : "vertical"
          // orientation: this.ishorizontal ? "vertical" : "horizontal"
        }
      );
      console.log(map, "787878");
    },
    handleSelectionChange(val) {
      if (val) {
        this.beforeMap.getStyle().layers.forEach(item => {
          console.log(item, "$$$");
          if (item.id == "newlayer") {
            this.beforeMap.removeLayer("newlayer");
            this.beforeMap.removeSource("newlayer");
          }
        });
        this.beforeMap.addLayer({
          id: "newlayer",
          type: "raster",
          source: {
            type: "raster",
            tiles: [val],
            tileSize: 256,
            zoomOffset: 1
          }
        });
      }
    }
  },
  mounted() {
    this.initmap();
  }
};
</script>
<style scoped>
.map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
.datalist {
  width: 500px;
  height: 200px;
  position: absolute;
  /* background: pink; */
  left: 5px;
  top: 5px;
}
</style>