文章目录
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 逐个清除
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 =