标签：地图 mapbox mapboxgl new gl 分屏
介绍地图展示效果在实际工程中会用到分屏和卷帘两种，目前基于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
标签：地图,mapbox,mapboxgl,new,gl,分屏 来源： https://blog.51cto.com/u_15269995/2912049
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。