测量工具

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

示例

TIP

Leaflet.measure 是一个用于测量地理距离和面积的 Leaflet 插件。

• 本地化 设置方言
  可以自己将插件打包，设置方言

• 解决点击地图改变 center 的问题 issue

  解决办法 issue

新标签页预览

代码实现

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

<script setup>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-measure/dist/leaflet-measure.css";
import "leaflet-measure/dist/leaflet-measure.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 baseLayer = L.tileLayer(urlLayer).addTo(map.value);

  // 解决点击地图改变 center 的问题
  L.Control.Measure.include({
    // set icon on the capture marker
    _setCaptureMarkerIcon: function () {
      // disable autopan
      this._captureMarker.options.autoPanOnFocus = false;

      // default function
      this._captureMarker.setIcon(
        L.divIcon({
          iconSize: this._map.getSize().multiplyBy(2),
        })
      );
    },
  });

  // 添加测量控件
  const measureControl = new L.Control.Measure({
    position: "topright",
  });
  measureControl.addTo(map.value);
});
</script>