vue3+leaflet开发地图入门教程(超级详细)

vue3+leaflet开发地图01

1.离线地图下载

离线地图下载器有很多，网络上也很多文档，这里不再详细说明，根据项目要求下载对应的瓦片地图就好

2.leaflet官网及地图加载

Leaflet - 一个交互式地图 JavaScript 库 (leafletjs.cn)

官网第一个案例就是加载地图，也很简单，不再详述

3.使用leaflet

3.1 实现动态线段

#安装
yarn add leaflet
#或者
npm i leaflet
#安装插件
npm install leaflet-ant-path

//引入插件 antpath
import {AntPath} from 'leaflet-ant-path'
//折线坐标
let path = [[维度，经度],[维度，经度]...]
//动态折线let gPath = antPath(path, {paused: false, //暂停  初始化状态reverse: false, //方向反转delay: 3000, //延迟，数值越大效果越缓慢dashArray: [15, 15], //间隔样式weight: 7, //线宽opacity: 0.8, //透明度color: '#0000FF', //颜色pulseColor: '#ffffff', //块颜色})//将动态折线添加到地图中即可gPath.addTo(map)

3.2 添加标记点

//设置标记图标样式和大小
let customIcon = L.icon({iconUrl: 'path/to/your/custom/icon.png',iconSize: [30, 30],iconAnchor: [15, 30],popupAnchor: [0, -30]
});
//鼠标悬停，变大图标
marker.on('mouseover', function() {marker.setIcon(highlightIcon);
});
//鼠标移走，变默认
marker.on('mouseout', function() {marker.setIcon(defaultIcon);
});

聚合标记

作用：在Leaflet中，可以通过使用插件如MarkerCluster来实现标记点聚合的功能。MarkerCluster插件可以自动将标记点聚合，并在用户操作地图时根据地图的缩放级别进行动态展示和隐藏。

// 添加标记点并配置聚合功能
var markers = L.markerClusterGroup();
// 创建标记点
var marker1 = L.marker([lat1, lng1]);
var marker2 = L.marker([lat2, lng2]);
// 将标记点添加到聚合组
markers.addLayer(marker1);
markers.addLayer(marker2);
// 将聚合组添加到地图
map.addLayer(markers);

3.3 添加点击事件

特别注意： Leaflet的事件监听器是一次性的，如果你没有重新添加监听器，事件就不会再次触发。核心代码如下：

// 定义点击事件处理函数
function onMarkerClick() {alert('Marker clicked!');//移除绑定事件marker.off('click');// 重新绑定事件，如果需要的话marker.on('click', onMarkerClick);
}
// 绑定点击事件
marker.on('click', onMarkerClick);//需要传参的话按照如下使用方法
function onMarkerClick(e, myCustomParam) {alert("Marker clicked with custom param: " + myCustomParam);
}
// 绑定点击事件，并传递自定义参数
marker.on('click', onMarkerClick.bind(null, marker,'myCustomValue'));