mapboxgl地图分屏

介绍

地图展示效果在实际工程中会用到分屏和卷帘两种，目前基于ArcGIS Server JS、Leaflet等网上已经大堆的实现，本篇文章介绍基于Mapbox GL JS如何实现地图分屏效果，目前已经开源在github，可以随时使用。效果图如下，在线演示。

以下文章提到的mapbox-gl-split为本人开发的库，目前在github，可以直接使用Github链接

实现流程

实现分屏地图并不难实现，需要以下几个过程：

1. 引入mapboxgl，使用mapboxgl创建地图
2. 对外层container根据地图个数做切分
3. 初始化多个地图至同一级别、中心点
4. 将多个地图的事件同步，例如平移、缩放等事件
5. 模拟其它副地图中的鼠标样式（鼠标真实所在的地图称为主地图，副地图跟随主地图变化）
   以上步骤即可完成一个分屏地图。
   

示例

1. 引入mapbox-gl与mapbox-gl-split，mapbox-gl使用官网的即可，mapbox-gl-split是本人开发的基于mapbox-gl的地图分分屏库
2. new mapbox-gl的map
3. 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

• 更方便快捷的基于PostgreSQL和PostGIS的坐标转换函数，支持点、线、面的WGS84和CGCS2000与GCJ02和BD09坐标系与之间互转
• 基于Mapbox-GL的地图分屏库

标签：地图,mapbox,mapboxgl,new,gl,分屏
来源： https://blog.51cto.com/u_15269995/2912049