mapbox 分屏对比

我们要做的的是左右分屏后两张地图同步对比，而且可以切换数据，实现的效果图是这样的，原博文地址：https://blog.csdn.net/weixin_42599077/article/details/103516695

var beforestyle = {
  "data_id": "11001000347",
  "name": "测试一会删",
  "zoom": 3,
  "center": [
    108.420679,
    36.772537
  ],
  "layers": [{
      "id": "707a5545758b97646194a04ef6fb9c0d",
      "label": "啊啊1",
      "type": "raster",
      "source": "vecTiles",
      "isUrl": false,
    },

  ],
  "version": 8,
  "sources": {
    vecTiles: {
      type: "raster",
      tiles: [
        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
      ],
      tileSize: 256
    },
  },
  "metadata": {
    "template": {
      "type": "4",
      "level": 0,
      "des": "0代表全国，1代表省，2代表市，3代表县"
    }
  },

}
var afterstyle = {
  "data_id": "11001000347",
  "name": "测试一会删",
  "zoom": 3,
  "center": [
    108.420679,
    36.772537
  ],
  "layers": [{
      "id": "707a5545758b97646194a04ef6fb9c0d",
      "label": "啊啊1",
      "type": "raster",
      "source": "tdtTiles",
      "isUrl": false,
    },

  ],
  "version": 8,
  "sources": {
    tdtTiles: {
      type: "raster",
      tiles: [
        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
      ],
      tileSize: 256
    },
  },
  "metadata": {
    "template": {
      "type": "4",
      "level": 0,
      "des": "0代表全国，1代表省，2代表市，3代表县"
    }
  },

}