卷帘效果

上次更新 2025年8月20日星期三 3:16:20 字数 0 字 时长 0 分钟

示例

TIP

leaflet-side-by-side 是一个 Leaflet 控件，用于添加分屏以比较两个地图叠加层。

leaflet1.9.2 版本会存在无法正常使用的问题，可以参考issue #47解决。

添加 在_addEvents function 中添加 L.DomEvent.disableClickPropagation(this._container); 解决

新标签页预览

代码实现

<template>
  <div id="map" class="w-full h-96"></div>
</template>

<script setup>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { onMounted, ref } from "vue";

const map = ref(null);

onMounted(() => {
  const urlLayer =
    "http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=d32c6748c80f81a44acd8633cea41dfd";

  const urlLayer2 =
    "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=d32c6748c80f81a44acd8633cea41dfd";

  map.value = L.map("map", {
    center: [39.094899, 117.33083], // 天津
    zoom: 12, // 缩放比列
    zoomControl: true,
    doubleClickZoom: false, // 禁用双击放大
    attributionControl: false, // 不展示版权信息
  });

  const baseLayer1 = L.tileLayer(urlLayer, {
    maxZoom: 18,
    minZoom: 0,
    attribution: "天地图",
    subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
  }).addTo(map.value);

  const baseLayer2 = L.tileLayer(urlLayer2, {
    maxZoom: 18,
    minZoom: 0,
    attribution: "天地图",
    subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
  }).addTo(map.value);

  const sideBySide = L.control
    .sideBySide(baseLayer1, baseLayer2)
    .addTo(map.value);
});
</script>

参考

• leaflet-side-by-side