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

最新推荐文章于 2025-03-15 10:04:33 发布

Live&&learn

最新推荐文章于 2025-03-15 10:04:33 发布

阅读量2.1k

点赞数 4

本文链接：https://blog.csdn.net/weixin_55800388/article/details/137927615

版权

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'));