mapboxgl地图分屏

2024-04-06 02:11:52

介绍

地图展示效果在实际工程中会用到分屏和卷帘两种，目前基于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

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

mapboxgl地图分屏相关推荐

Leaflet实现地图分屏联动
文章目录 1. 实现思路 2. 完整代码 1. 实现思路分别为地图对象绑定缩放.平移监听事件: 监听事件触发后依次为地图对象设置视图,就是将触发事件的地图视图设置到其他地图对象 2. 完整代码 &l ...
arcgis api 3.x for js 入门开发系列六地图分屏对比（附源码下载）
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载 webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 ...
arcgis api for js入门开发系列六地图分屏对比(含源代码)
上一篇实现了demo的地图标绘模块,本篇新增地图地图分屏对比模块,截图如下(源代码见文章底部): 对效果图的简单介绍一下,在demo只采用了两分屏对比,感兴趣的话,可以在两分屏的基础上拓展,修改css ...
java控制分屏_java实现arcgis地图分屏（双图）
java实现arcgis地图分屏(双图) java实现arcgis地图分屏(双图) 本博文采用Java语言,利用arcgis api for javascript 4.16地图服务,实现地图分屏,直接 ...
arcgis 实现分屏功能
arcgis 实现分屏功能利用arcgis api for javascript 4.16地图服务,实现地图分屏 <html><head><meta charset=& ...
高德地图显示多个气泡_CarPlay分屏功能“硬核”上线高德地图用户可第一时间尝鲜...
苹果今天正式推送iOS 13.4系统更新,其中分屏功能是这次CarPlay最 "硬核" 的一项改进.此前分屏功能只有苹果自带地图可以实现,本次升级后,高德地图用户也可以第一时间享受 ...
vue 高德地图不同区域显示不同颜色_高德百度哪家强？苹果Carplay第三方分屏功能评测...
几天前,苹果公司正式更新了iOS13.4版本.一个小版本系统更新,却让车主群热闹了起来.在这个版本中,苹果正式开放了Carplay分屏显示模式下对第三方地图的支持. 车主们的热情,化为高德地图和百度地 ...
mapbox 分屏对比
我们要做的的是左右分屏后两张地图同步对比,而且可以切换数据,实现的效果图是这样的,原博文地址:https://blog.csdn.net/weixin_42599077/article/details ...

最新文章

热门文章