leaflet 绘制线条——Vue-Cli 系列教程

2024-02-18 02:10:41

在之前的文章中，我们介绍了 Leaflet 的基本概念和点绘制功能。在本文中，我们将继续探讨如何在 Leaflet 中绘制线。线是连接两个或多个点的几何图形，在 GIS 中广泛用于表示道路、河流、边界和其他线性特征。

1. Leaflet 中的线绘制

Leaflet 中没有专门的线图层类，线通常使用 Polyline 类来绘制。Polyline 类可以创建简单线段或复杂的多段线。

要创建一条线，首先需要创建一个 Polyline 对象，并将其添加到地图上。Polyline 对象接受一个点的数组作为参数，这些点将连接起来形成一条线。

// 创建一个 Polyline 对象
var line = new L.Polyline([
  [lat1, lng1],
  [lat2, lng2]
]);

// 将 Polyline 对象添加到地图上
map.addLayer(line);

2. 绘制多段线

多段线是由多个线段组成的线。要绘制多段线，可以使用 Polyline 对象的 addLatLng() 方法。addLatLng() 方法接受一个点的数组作为参数，这些点将添加到线段的末尾。

// 创建一个 Polyline 对象
var line = new L.Polyline();

// 添加多个点到线段中
line.addLatLng([lat1, lng1]);
line.addLatLng([lat2, lng2]);
line.addLatLng([lat3, lng3]);

// 将 Polyline 对象添加到地图上
map.addLayer(line);

3. 线的样式

Leaflet 提供了多种选项来设置线的样式，包括颜色、宽度和透明度。可以使用 setStyle() 方法来设置这些样式。

// 设置线的样式
line.setStyle({
  color: 'red',
  weight: 5,
  opacity: 0.5
});

4. 线的事件

Leaflet 为线提供了多种事件，包括点击、悬停和移动。可以使用 on() 方法来监听这些事件。

// 监听线的点击事件
line.on('click', function(e) {
  console.log('线被点击了');
});

// 监听线的悬停事件
line.on('mouseover', function(e) {
  console.log('鼠标悬停在線上');
});

// 监听线的移动事件
line.on('drag', function(e) {
  console.log('线被移动了');
});