继承

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

示例

TIP

以下实例演示了如何在 Leaflet 中使用继承来创建自定义图层。 相关教程

新标签页预览

代码实现

<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(() => {
  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);

  // 调试坐标层
  L.GridLayer.DebugCoords = L.GridLayer.extend({
    createTile: function (coords) {
      var tile = document.createElement("div");
      tile.innerHTML = [coords.x, coords.y, coords.z].join(", ");
      tile.style.outline = "1px solid red";
      return tile;
    },
  });

  L.gridLayer.debugCoords = function (opts) {
    return new L.GridLayer.DebugCoords(opts);
  };

  map.value.addLayer(L.gridLayer.debugCoords());
});
</script>