Leaflet 的快速上手案例及流程图

目录

---

一、快速上手案例

1.演示效果

2. 环境准备

# 安装 Leaflet
npm install leaflet
# CDN 引入Leaflet.js和其样式
      <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="">
# JS 需在 CSS 后引入
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>

2. 基础代码实现

<template>
  <div id="map-container" ref="mapContainer"></div>
</template>

<script setup>
import {
      
       ref, onMounted, onBeforeUnmount } from "vue";
import L from "leaflet";
import "leaflet/dist/leaflet.css";

// 地图容器引用
const mapContainer = ref(null);
let map = null;

// 初始化地图
const initMap = () => {
      
      
  if (!mapContainer.value) return;

  // 创建地图实例
  map = L.map(mapContainer.value).setView([39.9042, 116.4074], 12);

  // 添加OSM底图
  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
      
      }).addTo(map);

  // 添加标记与弹窗
  const marker = L.marker([39.9042, 116.4074])
    .bindPopup("<b>天安门广场</b>")
    .addTo(map);

  map.on("click", (e) => {
      
      
    L.popup()
      .setLatLng(e.latlng)
      .setContent(
        `点击坐标：${ 
        e.latlng.lat.toFixed(4)}, ${ 
        e.latlng.lng.toFixed(4)}`
      )
      .openOn(map);
  });
};

onMounted(() => {
      
      
  initMap();
});

onBeforeUnmount(() => {
      
      
  if (map) {
      
      
    map.remove();
    map = null;
  }
});
</script>

<style scoped>
#map-container {
      
      
  width: 50vw;
  height: 50vh; 
}
</style>

---

二、知识学习

1. 初始化地图

   const map = L.map('容器ID').setView([纬度, 经度], 缩放级别);
   

2. 添加图层

   L.tileLayer('瓦片URL模板', {
         
         attribution: '版权信息'}).addTo(map);
   

3. 添加元素

   元素类型	代码示例
   标记	L.marker([坐标]).addTo(map)
   多边形	L.polygon([坐标数组]).addTo(map)
   弹窗	.bindPopup("HTML内容")

4. 交互事件

   map.on('事件类型', 回调函数); // 如 click, zoomend 等