Mapbox GL基础（十二）：卷帘对比

为了更好的展示对比多期数据的变化情况，开发卷帘对比工具。该工具的实现主要利用mapbox-gl-compare插件，下面将实现的过程进行说明。

安装

主要利用mapbox-gl-compare插件就行开发，所以安装该插件：
npm i mapbox-gl-compare

展示位置设置

设置容器来承载地图，利用mapBoxJuan来承载卷帘前后期的地图：

<!--地图-->
<div id="mapBoxJuan" class="mapBoxJuan" style="height:100%">
  <div id="before" class="map"></div>
  <div id="after" class="map"></div>
</div>

.map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

初始化地图与关联

在地图容器中进行地图的加载，并将前后期地图与卷帘进行绑定，如下代码：

this.beforeMap = new mapboxgl.Map({
   container: "before",
   style: style1,
   center: this.mapParas.center,
   zoom: this.mapParas.zoom,
   minZoom: this.mapParas.minZoom,
   maxZoom: this.mapParas.maxZoom,
});
this.afterMap = new mapboxgl.Map({
   container: "after",
   style: style2,
   center: this.mapParas.center,
   zoom: this.mapParas.zoom,
   minZoom: this.mapParas.minZoom,
   maxZoom: this.mapParas.maxZoom,
});


const container = "#mapBoxJuan";
mapboxgl.Compare = Compare; //手动绑定
const map = new mapboxgl.Compare(this.beforeMap, this.afterMap, container, {
   mousemove: false,
   orientation: "vertical",
});

前后地图加载数据

最后就是在前后期地图中加载适当的数据，如下代码：

//前期数据
this.beforeMap.addSource(value.sourceName, {
  type: 'vector',
  scheme: 'xyz',
  tiles: [value.url],
});
this.beforeMap.addLayer({
  id: value.layerID,
  type: 'fill',
  source: value.sourceName,
  'source-layer': 'polygon',
  paint: {
    'fill-color': 'rgba(0,168,227,0.2)',
    'fill-outline-color':'rgb(0,168,227)',
    'fill-antialias':true
  },
});

//后期数据
this.afterMap.addSource(value.sourceName, {
  type: 'vector',
  scheme: 'xyz',
  tiles: [value.url],
});
this.afterMap.addLayer({
  id: value.layerID,
  type: 'fill',
  source: value.sourceName,
  'source-layer': 'polygon',
  paint: {
    'fill-color': 'rgba(0,168,227,0.2)',
    'fill-outline-color':'rgb(0,168,227)',
    'fill-antialias':true
  },
});

最终展示效果如下：

总结

本文针对卷帘对比的实现进行了说明，以后如果遇到新的功能再进行补充，接下来的章节将继续探索Mapbox。
欢迎关注星林社区，文章将同步更新在星林社区中！