leaflet-JavaScript map library is easy to use, marker overlay, popup custom bullet box, point aggregation...
Leaflet Chinese document reference: https://leafletjs.cn/reference.html#map-example
Chinese map base map js file download address: leaflet.ChineseTmsProviders.js file—used to reference map plugins...
1. Map initialization
map container
<!--地图-->
<div class="large-screen-map" id="largeScreenMap"></div>
page import
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
import "./components/leaflet.ChineseTmsProviders.js" // 需要下载js文件
Initialization - Drawing
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);
Common map plug-in reference: https://my.oschina.net/u/560237/blog/3223111
2. Mark the covering
// 地图上的标记点图标-自定义
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)
}
mark as div
mark as image
3. Custom pop-up window
1. Use the default popup window style
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. Clear the original style, use a custom style, and add a click function to the custom pop-up window.
Use the new Profile to mount (use when there are more than one - solve the problem of abnormal display of the pop-up box after clicking continuously, and do not need to mount a single one)
Write the content of the pop-up box as a separate component
<!--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 mount, import popup-content component in main.js, only one page can be used directly in the page
// main.js
// 引入组件
import popupContent from "@/views/components/popup-content"
// Profile 实例
const Profile = Vue.extend(popupContent);
// 构造组件
Vue.prototype.$Profile = Profile // 在页面this.$Profile 引用组件
page mount
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. Point aggregation
Download: yarn add leaflet.maekercluster
MarkerClusterGroup is the class used to create clusters on the map, it has various configuration options. Here are some commonly used configuration options:
| parameter | paraphrase |
|---|---|
| maxClusterRadius | When MarkerClusterGroup calculates whether a Marker should be included in the cluster, it will consider the number of Markers around it. When the number of surrounding Markers exceeds this option, the Marker will be included in the cluster. The default value is 80. The default value is true. |
| singleMarkerMode | Whether to use a single Marker to represent this MarkerClusterGroup. If it is true, when the Marker is clicked, the bubble prompt box of all Markers will not pop up, but only the bubble prompt box of a single Marker will pop up. The default value is false. |
| clusterInfoWindow | An InfoWindow object used to display cluster information. By default, when the user clicks on a MarkerCluster, an InfoWindow containing all Marker information will pop up. |
| averageCenter | Whether to move the center point of the cluster to the average position of all markers. The default value is false. |
| styles | An array of Style objects defining the style of the cluster. By default, the default style is used. |
1. Use - to be sorted out
2. About L.markerClusterGroup is not a function
use window.L.MarkerClusterGroup()instead L.MarkerClusterGroup()
of:
let markers = new window.L.MarkerClusterGroup();
Reference: https://stackoverflow.com/questions/71564694/leaflet-1-7-l-markerclustergroup-is-not-a-function
5. Partition mask and edge line (to be sorted out)
1. Draw a line in the area, mask outside the area
2. Mask and draw a line in the area, do not process outside the area