mapboxgl地图分屏

最新推荐文章于 2023-08-21 18:08:48 发布

小刘先森

最新推荐文章于 2023-08-21 18:08:48 发布

阅读量1.4k

点赞数 1

分类专栏： GIS 文章标签： typescript javascript gis

本文链接：https://blog.csdn.net/qq_35241223/article/details/116302003

版权

GIS 专栏收录该内容

4 篇文章 6 订阅

订阅专栏

介绍

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