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

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值