鹰眼图

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

示例

TIP

Leaflet-MiniMap是一个简单的小地图控件，您可以将其放入您的小地图中，它会在角落创建一个小地图，该地图的显示与主地图相同，并设置了缩放偏移量。

新标签页预览

代码实现

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

<script setup>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-minimap/dist/Control.MiniMap.min.js";
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";

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

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

  const minilayer = L.tileLayer(urlLayer);
  // 初始化小地图并将其添加到主地图上
  const miniMap = new L.Control.MiniMap(minilayer, {
    width: 200, // 设置鹰眼图的宽度
    height: 200, // 设置鹰眼图的高度
    toggleDisplay: true, // 是否显示最小化按钮
    minimized: false, // 小地图初始是否处于最小化状态
  }).addTo(map.value);
});
</script>

参考

• Leaflet-MiniMap