常用工具

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

在本节中，我们将介绍一些常用的工具。

示例

TIP

leaflet-geoman 是一个 Leaflet 插件，用于绘制和编辑地理图形。

代码实现

vue

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

<script setup>
import { onMounted } from "vue";

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";

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

  const extent = map.getBounds();

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

  // 添加 leaflet-geoman 工具控件
  map.pm.addControls({
    position: "topright",
    drawMarker: true,
    drawPolyline: true,
    drawPolygon: true,
    drawRectangle: true,
    drawCircle: true,
    editMode: true,
    removalMode: true,
  });

  // 中文
  map.pm.setLang("zh");

  // 使用 leaflet-geoman 自定义控件
  const options = {
    position: "topleft",
    block: "custom",
    name: "回到初始范围",
    title: "回到初始范围",
    className: "custom-control",
    onClick: () => {
      map.fitBounds(extent);
    },
  };
  map.pm.Toolbar.createCustomControl(options);
});
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100vh;
}

#map {
  width: 100%;
  height: 100%;
}

.custom-control {
  background-image: url("./reset.svg");
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
  padding: 5px;
  border-radius: 5px;
}
</style>

常用工具 ​

示例 ​

代码实现 ​

常用工具

示例

代码实现