基础的矢量标记、圆、多边形

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

示例

新标签页预览

代码实现

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

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

onMounted(() => {
  // 创建地图实例
  map.value = L.map("map");
  // 添加瓦片图层(底图)
  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(
    map.value
  );

  // 添加矢量标记
  L.marker([51.505, -0.09]).addTo(map.value);
  // 添加圆
  L.circle([51.508, -0.11], 500, {
    color: "red",
    fillColor: "#f03",
    fillOpacity: 0.5,
  }).addTo(map.value);

  // 添加多边形
  L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047],
  ]).addTo(map.value);

  // 设置地图中心点和缩放级别
  map.value.setView([51.505, -0.09], 13);
});

onUnmounted(() => {
  map.value.remove();
});
</script>

<style lang="scss" scoped>
:deep(.leaflet-control-attribution) {
  display: none;
}
</style>