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");
gaoDeLayer.addTo(this.map);
常用地图插件参考： https://my.oschina.net/u/560237/blog/3223111
2、标记覆盖物
// 地图上的标记点图标-自定义
let basicBeachIcon = L.icon({
iconUrl: "", // 你的自定义图 可网络图可require引入本地图片，不设置url可使用自定义div样式
iconSize: [26, 28],
});
let markerTab = null
this.markerList = [] // 存放所有标记点 可以使用 o.remove(this.map) 清除标记 o 为其中一个标记，数组可以for of 逐个清除
for (let o of this.markerData) {
// 代表一个轻量级的标记图标，使用一个简单的 <div> 元素而不是图片
basicBeachIcon = L.divIcon({
className: 'your-class-name'}); // 可以在.your-class-name 设置样式，使用图片标记就不要这行
markerTab = L.marker([o.latitude, o.longitude], {
icon: basicBeachIcon })
this.markerList.push(markerTab)
markerTab.addTo(this.map)
}
标记为div
标记为图片
3、自定义弹出窗口
1、使用默认弹出窗口样式
let basicBeachIcon = L.icon({
iconUrl: "",
iconSize: [26, 28],
});
let markerTab = null
this.markerList = [] // 存放所有标记点 可以使用 o.remove(this.map) 清除标记， o 为其中一个标记，数组可以for of 逐个清除
for (let o of this.markerData) {
markerTab = L.marker([o.latitude, o.longitude], {
icon: basicBeachIcon })
this.markerList.push(markerTab)
markerTab.addTo(this.map).on("click", (env) => {
let template = `<div class="overlay-content" style=""></div>` // 弹窗内容
L.popup({
closeButton: false })
.setLatLng([o.latitude, o.longitude])
setContent(template)
.openOn(this.map);
})
}
2、将原始样式清除，使用自定义样式，自定义弹窗添加点击功能
使用 new Profile 挂载（多个时使用-解决连续点击弹框显示异常问题，单个则不需要挂载）
将弹框内容单独写一个组件
<!--leaflet 弹窗内容-->
<template>
<div class="popup-content">你想显示的内容，直接按正常组件来写</div>
</template>
<script>
export default {
name: "popup-content",
props: {
componentData: {
// 你要显示的信息
type: Object,
default() {
return {
}
}
}
},
data() {
return {
}
},
watch: {
componentData: {
handler(news) {
this.componentData = news
}
}
},
methods: {
}
}
</script>
<style scoped>
.popup-content {
height: 100%;
width: 100%;
position: relative;
}
</style>
new Profile 挂载，在main.js引入popup-content组件，只有一个页面使用可以直接在页面里引入
// main.js
// 引入组件
import popupContent from "@/views/components/popup-content"
// Profile 实例
const Profile = Vue.extend(popupContent);
// 构造组件
Vue.prototype.$Profile = Profile // 在页面this.$Profile 引用组件
页面挂载
let basicBeachIcon = L.icon({
iconUrl: "",
iconSize: [26, 28],
});
let markerTab = null
this.markerList = [] // 存放所有标记点 可以使用 o.remove(this.map) 清除标记 ，o 为其中一个标记，数组可以for of 逐个清除
for (let o of this.markerData) {
markerTab = L.marker([o.latitude, o.longitude], {
icon: basicBeachIcon })
this.markerList.push(markerTab)
markerTab.addTo(this.map).on("click", (env) => {
// 创建一个容器即每个弹框需要唯一的id
let template = document.createElement(`div`)
template.id = "mapDialog_container_" + o.xxx // 唯一id（关键）
L.popup({
minWidth: 330, closeButton: false })
.setLatLng([o.latitude, o.longitude])
.setContent(template).openOn(this.map);
// 将Profile实例挂载到容器上
let el = new this.$Profile({
propsData: {
componentData: o } }).$mount()
template.appendChild(el.$el)
})
}
4、点聚合
下载：yarn add leaflet.maekercluster
MarkerClusterGroup 是用于在地图上创建集群的类，它具有多种配置选项。以下是一些常用的配置选项：
| 参数 | 释义 |
|---|---|
| maxClusterRadius | 在 MarkerClusterGroup 计算一个 Marker 是否应该被包含在集群中时，会考虑其周围 Marker 的数量。当周围的 Marker 数量超过这个选项时，该 Marker 会被包含在集群中。默认值为 80。默认值为 true。 |
| singleMarkerMode | 是否使用单个 Marker 来表示该 MarkerClusterGroup。如果为 true，则在点击该 Marker 时将不会弹出所有 Marker 的气泡提示框，而只弹出单个 Marker 的气泡提示框。默认值为 false。 |
| clusterInfoWindow | 一个 InfoWindow 对象，用于显示集群的信息。默认情况下，当用户点击一个 MarkerCluster 时，会弹出一个包含所有 Marker 信息的 InfoWindow。 |
| averageCenter | 是否将集群的中心点移动到所有 Marker 的平均位置。默认值为 false。 |
| styles | 一个包含多个 Style对象的数组，用于定义集群的样式。默认情况下，使用默认样式。 |
1、使用-待整理
2、关于L.markerClusterGroup is not a function
使用 window.L.MarkerClusterGroup() 代替 L.MarkerClusterGroup()
即：
let markers = new window.L.MarkerClusterGroup();
参考：https://stackoverflow.com/questions/71564694/leaflet-1-7-l-markerclustergroup-is-not-a-function
5、区划遮罩及边缘划线（待整理）
1、区划划线，区划以外遮罩
2、区划遮罩并划线，区划以外不做处理