leaflet-JavaScript地图库 简单使用，marker标记覆盖物，popup自定义弹框，点聚合...

leaflet-JavaScript地图库 简单使用，marker标记覆盖物，popup自定义弹框，点聚合…

leaflet中文文档参考：https://leafletjs.cn/reference.html#map-example
中国地图底图js文件下载地址：leaflet.ChineseTmsProviders.js文件—用于引用地图插件…

1、地图初始化

地图容器

<!--地图-->
<div class="large-screen-map" id="largeScreenMap"></div>

页面引入

import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
import "./components/leaflet.ChineseTmsProviders.js" // 需要下载js文件

初始化-画图

this.map = L.map("provinceLargeScreenMap", {
   
   center: [this.mapCenter.lat, this.mapCenter.lng], // 地图中心点 格式或为{lat:null,lng:null}
   zoom: 12, // 缩放比列
   "minZoom": 3,// 最小比例
   "maxZoom": 15,// 最大比例
   zoomControl: false, //禁用 + - 按钮
   doubleClickZoom: false, // 禁用双击放大
   attributionControl: false  // 移除右下角leaflet标识
});
 // 图层 引入智图地图
 let gaoDeLayer = L.tileLayer.chinaProvider("Geoq.Normal.PurplishBlue");
 // or
 // let gaoDeLayer = L.tileLayer("http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}")
 gaoDeLayer.addTo(this.map);

常用地图插件参考：
1、https://blog.csdn.net/weixin_44167504/article/details/132814206?spm=1001.2014.3001.5501
2、https://www.cnblogs.com/lishanyang/p/9155981.html

2、标记覆盖物

// 地图上的标记点图标-自定义
let basicBeachIcon = L.icon({
   
    iconUrl: "", // 你的自定义图 可网络图可require引入本地图片，不设置url可使用自定义div样式
    iconSize: [26, 28],
});
let markerTab = null
this.markerList = [] // 存放所有标记点 可以使用 o.remove(this.map) 清除标记 o 为其中一个标记，数组可以for of 逐个清除，或添加到图层组（L.layerGroup），将整个图层组移除
for (let o of this.markerData) {
   
	// 代表一个轻量级的标记图标，使用一个简单的 <div> 元素而不是图片
	basicBeachIcon = L.divIcon({
    html: '<div class="your-icon">如显示站点名称，相当于div里面添加了一个div</div>',className: 'your-class-name'}); // 可以在.your-class-name 设置样式，使用图片标记就不要这行
	markerTab = L.marker([o.latitude, o.longitude], {
    icon: basicBeachIcon })
	this.markerList.push(markerTab)
	markerTab.addTo(this.map)  
	// let layerGroup = L.layerGroup(this.markerList)
    // this.map.addLayer(layerGroup); 
    // 删除标记时使用 layerGroup.remove(this.map)
}

标记为div

标记为图片

3、自定义弹出窗口

1、使用默认弹出窗口样式

mounted(){
   
	// 挂载点击弹窗点击事件
	window.handleClick = () => {
   
		// ...dosomething
	}
}

let basicBeachIcon = L.icon({
   
    iconUrl: "",
    iconSize: [26, 28],
});
let markerTab = null
this.markerList = [] // 存放所有标记点 可以使用 o.remove(this.map) 清除标记， o 为其中一个标记，数组可以for of 逐个清除
// 或 将标记都放要一个图层组中，方便一起从地图删除或添加 layerGroup => this.markerList = L.layerGroup()
for (let o of this.markerData) {
   
	markerTab = L.marker([o.latitude, o.longitude], {
    icon: basicBeachIcon })
	this.markerList.push(markerTab)
	// 使用 bindPopup 时，当图层从地图中移除后重新再添加到地图会使原来绑定的事件失效，如涉及到图层移除添加的使用 L.popup
	// markerTab.on('mouseover',(e)=>{
   
	//	 let popupContent = "<span>内容</span>"
	// 	 e.target.bindPopup(popupContent, { closeButton: false }).openPopup();
	// })
	// markerTab.on('mouseout',()=>{
   
	//	 e.target.closePopup();
	//})
	// 
	markerTab.addTo(this.map).on("click", (env) => {
   
	let template = `<div class="overlay-content" style="" οnclick="handleClick()"></div>` // 弹窗内容
	L.popup({
    closeButton: false })
         .setLatLng([o.latitude, o.longitude])
         .setContent(template)
         .openOn(this.map);
 })
 // 使用图层组 this.markerList.addLayer(markerTab)
 // 添加到地图 this.map.addLayer(this.markerList)
 // 从地图删除 this.map.removeLayer(this.markerList)
 // 清空图层组 this.markerList.clearLayers()
}

2、将原始样式清除，使用自定义样式，自定义弹窗添加点击功能
使用 new Profile 挂载（多个时使用-解决连续点击弹框显示异常问题，单个则不需要挂载）

将弹框内容单独写一个组件

<!--leaflet 弹窗内容-->
<template&