控件

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

示例

TIP

以下实例演示了 Leaflet 中常用的控件，包括缩放、比例尺 、 版权信息、图层控制等。

新标签页预览

代码实现

<template>
  <div id="map"></div>
</template>

<script setup>
import L from "leaflet";
import { onMounted, ref } from "vue";
const map = ref(null);

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

  // zoom 缩放控件
  L.control.zoom({ position: "topleft" }).addTo(map.value);

  // Attribution 版权控件
  L.control
    .attribution({
      prefix:
        '<a href="https://hx-docs.com" target="_blank" style="color: #336699;">hxDocs</span>',
    })
    .addAttribution("attribution")
    .addTo(map.value);

  // scale 比例尺控件
  L.control
    .scale({ maxWidth: 200, metric: true, imperial: false })
    .addTo(map.value);

  // 底图
  // 天地图 矢量图
  const tdt = L.tileLayer(
    "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",
    {
      maxZoom: 18,
      minZoom: 0,
      attribution: "天地图",
      subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
    }
  );

  // 天地图 影像图
  const tdt2 = L.tileLayer(
    "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",
    {
      maxZoom: 18,
      minZoom: 0,
      attribution: "天地图",
      subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
    }
  );

  let baseLayers = {
    天地图矢量: tdt.addTo(map.value),
    天地图影像: tdt2,
  };

  // 底图切换
  L.control
    .layers(
      baseLayers,
      {},
      {
        position: "topright", // 位置
        collapsed: true, // 是否折叠
      }
    )
    .addTo(map.value);
});
</script>