介紹
地圖展示效果在實(shí)際工程中會(huì)用到分屏和卷簾兩種，目前基于ArcGIS Server JS间唉、Leaflet等網(wǎng)上已經(jīng)大堆的實(shí)現(xiàn)疮鲫，本篇文章介紹基于Mapbox GL JS如何實(shí)現(xiàn)地圖分屏效果，目前已經(jīng)開源在github嗦哆，可以隨時(shí)使用符喝。效果圖如下闪彼，在線演示。
以下文章提到的mapbox-gl-split為本人開發(fā)的庫协饲，目前在github畏腕，可以直接使用Github鏈接
分屏效果圖
實(shí)現(xiàn)流程
實(shí)現(xiàn)分屏地圖并不難實(shí)現(xiàn)，需要以下幾個(gè)過程：
- 引入mapboxgl茉稠，使用mapboxgl創(chuàng)建地圖
- 對外層container根據(jù)地圖個(gè)數(shù)做切分
- 初始化多個(gè)地圖至同一級別描馅、中心點(diǎn)
- 將多個(gè)地圖的事件同步，例如平移而线、縮放等事件
- 模擬其它副地圖中的鼠標(biāo)樣式（鼠標(biāo)真實(shí)所在的地圖稱為主地圖铭污，副地圖跟隨主地圖變化）
以上步驟即可完成一個(gè)分屏地圖。
示例
- 引入mapbox-gl與mapbox-gl-split吞获，mapbox-gl使用官網(wǎng)的即可况凉，mapbox-gl-split是本人開發(fā)的基于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已經(jīng)在項(xiàng)目中實(shí)際使用，歡迎各位小伙伴使用各拷，同時(shí)動(dòng)動(dòng)可愛的小手給個(gè)Star吧刁绒。
關(guān)于作者
小劉先森
QQ: 1016817543
郵箱：1016817543@qq.com
github：https://github.com/MrSmallLiu (歡迎star)
相關(guān)鏈接
以下為本人參與開發(fā)的一些庫，歡迎各位Star烤黍、Issues知市、PR
