mapbox 分屏对比2

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

侧耳倾听...

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

阅读量502

点赞数 1

分类专栏： mapbox 文章标签： html css

本文链接：https://blog.youkuaiyun.com/xm_w_xm/article/details/120185487

版权

mapbox 专栏收录该内容

27 篇文章

订阅专栏

该博客展示了如何使用mapbox-gl-sync-move库在两个并排显示的MapboxGL地图之间实现同步移动。通过在Vue.js组件中初始化两个地图实例，并调用syncMaps方法，可以确保当一个地图平移或缩放时，另一个地图会随之更新，从而提供一致的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个是纯手写https://blog.youkuaiyun.com/xm_w_xm/article/details/103843217

mapboxgl https://github.com/mapbox/mapbox-gl-sync-move

<template>
  <div class="hello" style="height: 100%; width: 100%; position: relative">
    <div
      class="map1"
      id="map1"
      style="width: 50%; height: 100%; float: left"
    ></div>
    <div
      class="map1"
      id="map2"
      style="width: 50%; height: 100%; float: left"
    ></div>
  </div>
</template>
<script>
import { syncMaps } from "./mapbox-gl-sync-move";
export default {
  name: "Map",
  components: {},
  data() {
    return {
      
      
    };
  },
  watch: {},
  methods: {
    initmap() {
      var map1 = new mapboxgl.Map({
        container: "map1",
        style: window.beforestyle,
        zoom: 12,
        center: [117.72, 39.05],
      });
      var map2 = new mapboxgl.Map({
        container: "map2",
        style: window.afterstyle,
        zoom: 12,
        center: [117.72, 39.05],
      });
      syncMaps(map1, map2);
    },
  },
  mounted() {
    this.initmap();
  },
};
</script>
<style scoped>
.map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
</style>