介绍
地图展示效果在实际工程中会用到分屏和卷帘两种，目前基于ArcGIS Server JS、Leaflet等网上已经大堆的实现，本篇文章介绍基于Mapbox GL JS如何实现地图分屏效果，目前已经开源在github，可以随时使用。效果图如下，在线演示。
以下文章提到的mapbox-gl-split为本人开发的库，目前在github，可以直接使用Github链接
分屏效果图
实现流程
实现分屏地图并不难实现，需要以下几个过程：
- 引入mapboxgl，使用mapboxgl创建地图
- 对外层container根据地图个数做切分
- 初始化多个地图至同一级别、中心点
- 将多个地图的事件同步，例如平移、缩放等事件
- 模拟其它副地图中的鼠标样式（鼠标真实所在的地图称为主地图，副地图跟随主地图变化）
以上步骤即可完成一个分屏地图。
示例
- 引入mapbox-gl与mapbox-gl-split，mapbox-gl使用官网的即可，mapbox-gl-split是本人开发的基于mapbox-gl的地图分分屏库
- new mapbox-gl的map
- new SplitMap
代码如下：
<div id="container">
<div id="container1"></div>
<div id="container2"></div>
</div>
import { SplitMap } from 'mapbox-gl-split'
const map1 = new mapboxgl.Map({ container: 'container1', style });
const map2 = new mapboxgl.Map({ container: 'container2', style });
new SplitMap('container', {
maps: [map1, map2]
});
写在最后
mapbox-gl-split已经在项目中实际使用，欢迎各位小伙伴使用，同时动动可爱的小手给个Star吧。
关于作者
小刘先森
QQ: 1016817543
邮箱：1016817543@qq.com
github：https://github.com/MrSmallLiu (欢迎star)
相关链接
以下为本人参与开发的一些库，欢迎各位Star、Issues、PR
