文章目录
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&