Mapbox GL基础（十三）：多个地图视角同步

最新推荐文章于 2024-06-15 09:35:39 发布

山已几202007

最新推荐文章于 2024-06-15 09:35:39 发布

阅读量711

点赞数 12

文章标签： javascript vue.js arcgis

本文链接：https://blog.youkuaiyun.com/weixin_43724098/article/details/135973412

版权

上一期利用mapbox-gl-compare插件，实现了卷帘对比功能。但是也会经常遇到要实现多个地图同步移动，展示不同数据内容的需求。主要利用@mapbox/mapbox-gl-sync-move插件来实现，下面将实现的过程进行说明。

安装

主要利用@mapbox/mapbox-gl-sync-move插件就行开发，所以安装该插件：
npm install @mapbox/mapbox-gl-sync-move --save

不同容器位置设置

设置容器位置来承载每个地图，此处需要自己根据需求进行地图位置的设定：

<template>
  <div id="map1"></div>
  <div id="map2"></div>
  <div id="map3"></div>
</template>

#map1 {
  position: absolute;
  width: 30%;
  height: 100%;
  border: 2px solid red;
}
#map2 {
  position: absolute;
  width: 30%;
  left:33%;
  height: 100%;
  border: 2px solid green;
}
#map3 {
  position: absolute;
  width: 30%;
  left:66%;
  height: 100%;
  border: 2px solid orange;
}

初始化地图

在地图容器中将三个地图中分别初始化，设置不同的style加入不同的图层服务，如下代码：

let mapBoxMap = new mapboxgl.Map({
    container: "map1",
    style: myStyle1,
    minZoom: mapParams.minZoom,
    maxZoom: mapParams.maxZoom,
    zoom: mapParams.zoom,
    center: mapParams.center,
  });
  let mapBoxMap2 = new mapboxgl.Map({
    container: "map2",
    style: myStyle2,
    minZoom: mapParams.minZoom,
    maxZoom: mapParams.maxZoom,
    zoom: mapParams.zoom,
    center: mapParams.center,
  });

  let mapBoxMap3 = new mapboxgl.Map({
    container: "map3",
    style: myStyle3,
    minZoom: mapParams.minZoom,
    maxZoom: mapParams.maxZoom,
    zoom: mapParams.zoom,
    center: mapParams.center,
  });

多地图视角同步

最后利用syncMove将三个地图中的视角同步，如下代码：

import syncMove from '@mapbox/mapbox-gl-sync-move';

let maps = []
maps.push(mapBoxMap)
maps.push(mapBoxMap2)
maps.push(mapBoxMap3)
syncMove(...maps)

最终展示效果如下：
请添加图片描述

总结

本文针对多个地图视角同步的实现进行了说明，以后如果遇到新的功能再进行补充，接下来的章节将继续探索Mapbox。
欢迎关注星林社区，文章将同步更新在星林社区中！