Leaflet的基本使用【入门】

一、Leaflet的初始化

npm安装

npm install leaflet

初始化Leaflet地图

<template>
    <div ref="map" style="height: 600px"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import 'leaflet/dist/leaflet.css'; // 引入Leaflet的CSS文件
import L from 'leaflet';

let mymap: any = null; //地图实例
const map = ref(null);//地图容器

const initDate = () => {
  if (map.value) {
    mymap = L.map(map.value).setView([41, 123], 13); // 初始化Leaflet地图并设置中心点和缩放级别
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(mymap);
  }
}
onMounted(() => {
  initDate()
});
</script>

二、Leaflet的基本事件

onMapClick 点击事件

let onMapClick = (e: any) => {}; //点击事件
//initDate 函数中
onMapClick = (e: any) => {
  const { lng, lat } = e.latlng;
  console.log("坐标", lng, lat);
};
mymap.on('click',onMapClick)

marker标记、polyline折线的添加

添加标记

let marker: any = null;
marker = L.marker([50.5, 30.5]).addTo(mymap);

添加折线

const latlngs = [
    [45.51, -122.68],
    [37.77, -122.43],
    [34.04, -118.2]
];

const polyline = L.polyline(latlngs, {color: 'red'}).addTo(mymap);

removeLayer删除图层

mymap.removeLayer(polyline);
mymap.removeLayer(marker);

popup弹出窗口

1、将弹出窗口（popup）绑定到标记（marker）单击然后打开它

marker = L.marker([40.514, 121.689]).addTo(mymap);
marker.bindPopup('Hello world!').openPopup();

2、获取坐标动态添加标记并弹出窗口

onMapClick = (e: any) => {
  const { lng, lat } = e.latlng;
  if (marker) {
    mymap.removeLayer(marker);//删除上一个标记
  }
  marker = L.marker([lat, lng]).addTo(mymap);
  const popup = L.popup()
    .setLatLng(e.latlng)
    .setContent(`<p>点击的地图经纬度为<br /></p>${lng.toFixed(3)},${lat.toFixed(3)}`)
    .openOn(mymap);
};
mymap.on("click", onMapClick);

三、Leaflet的使用

1、绘制多条polyline折线

<template>
  <div class="container">
    <div ref="map" style="height: 800px"></div>
    <div class="buttonContainer">
      <el-button v-if="isFinished" type="primary" size="default" @click="startAdd">开始</el-button>
      <el-button v-else type="success" size="default" @click="endAdd">完成</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, shallowRef } from "vue";
import "leaflet/dist/leaflet.css"; // 引入Leaflet的CSS文件
import L from "leaflet";

let mymap: any = null; //地图实例
const map = ref(null); //地图容器
let onMapClick = (e: any) => {}; //点击事件
let marker: any = null; //标记
const markers: any = shallowRef([]); //标记数组
let m_index = 0;
let isFinished = ref(true);
let polyline: any = null; //折线
const polylines: any = shallowRef([]); //折线数组

const initDate = () => {
  if (map.value) {
    mymap = L.map(map.value).setView([41, 123], 13); // 初始化Leaflet地图并设置中心点和缩放级别
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution: "© OpenStreetMap contributors",
    }).addTo(mymap);
    onMapClick = (e: any) => {
      const { lng, lat } = e.latlng;

      marker = L.marker([lat, lng]).addTo(mymap);
      markers.value[m_index].push(marker);
      if (polyline) {
        mymap.removeLayer(polyline); //删除上一条折线否则会重叠
      }
      const latlngs = markers.value[m_index].map((marker: any) => marker.getLatLng());
      polyline = L.polyline(latlngs).addTo(mymap);
    };
  }
};
const startAdd = () => {
  mymap.on("click", onMapClick); //绑定点击事件
  isFinished.value = false;
  markers.value.push([]);
};
const endAdd = () => {
  mymap.off("click", onMapClick); //解绑点击事件
  isFinished.value = true;
  polylines.value.push(polyline);
  polyline = null;
  m_index += 1;
};
onMounted(() => {
  initDate();
});
</script>

<style lang="scss">
.container {
  position: relative;
  .buttonContainer {
    position: absolute;
    z-index: 9999;
    top: 30px;
    left: 100px;
  }
}
</style>

2、自定义marker标记并高亮替换

在1、代码基础上补充以下代码

//自定义标记样式
const normalIcon = L.icon({
  iconUrl: "src/assets/icons/normalposition.svg",
  iconSize: [32, 32],
  iconAnchor: [16, 32],
  popupAnchor: [0, -32],
});
//选中样式
const selectedIcon = L.icon({
  iconUrl: "src/assets/icons/selectposition.svg",
  iconSize: [32, 32],
  iconAnchor: [16, 32],
  popupAnchor: [0, -32],
});
//重置选中标记外的所有标记的样式
const resetOtherMarkers = (marker: any) => {
  markers.value.forEach((m_array: any, index: number) => {
    m_array.forEach((item: any) => {
      if (item !== marker) {
        item.setIcon(normalIcon);
      }
    });
  });
};
const endAdd = () => {
  mymap.off("click", onMapClick); //解绑点击事件
  isFinished.value = true;
  polylines.value.push(polyline);
  //为每一个标记添加点击事件
  markers.value[m_index].forEach((m: any) => {
    m.on("click", () => {
      resetOtherMarkers(m);
      m.setIcon(selectedIcon);
    });
  });
  polyline = null;
  m_index += 1;
};

参考

官方文档：
https://leafletjs.cn/reference.html
博客：
【Leaflet入门篇】 Leaflet快速入门
leaflet marker点击高亮