【地图视界-Leaflet4】绘制自定义图形

引言

在前面的文章中，我们学会了如何在 Leaflet 中添加标记、弹窗以及切换不同的底图和叠加图层。但是在很多实际应用中，我们需要在地图上绘制多边形、圆形、矩形、折线等几何图形，用于标记区域、路径规划、范围分析等。

本篇文章将介绍如何在 Leaflet 中绘制这些自定义图形，并且通过交互功能让地图更加灵活。

---

Leaflet 支持的基本几何图形

Leaflet 提供了一些基础的矢量图形对象，包括：

• 折线（Polyline）：用于绘制路径或路线
• 多边形（Polygon）：用于绘制封闭的区域
• 矩形（Rectangle）：特殊的多边形，定义两个对角点即可
• 圆（Circle）：用于标记一定半径范围的区域
• 圆形标记（Circle Marker）：类似于 Circle，但大小不会随地图缩放变化

---

绘制基本几何图形

1. 绘制折线（Polyline）

折线（Polyline）适用于显示路径，比如一条公交线路或行进轨迹。

var polyline = L.polyline([
    [39.9042, 116.4074],
    [39.9152, 116.4174],
    [39.9252, 116.4274]
], {
    color: 'blue',
    weight: 4,
    opacity: 0.7
}).addTo(map);

效果：在地图上绘制一条蓝色的折线，代表一个路径。

---

2. 绘制多边形（Polygon）

多边形（Polygon）适用于绘制封闭区域，比如某个城市的行政边界或建筑轮廓。

var polygon = L.polygon([
    [39.9042, 116.4074],
    [39.9142, 116.4174],
    [39.9242, 116.4074],
    [39.9142, 116.3974]
], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);

效果：在地图上绘制一个红色的半透明多边形。

---

3. 绘制矩形（Rectangle）

矩形（Rectangle）适用于标记特定区域，比如公园范围或建筑物。

var rectangle = L.rectangle([
    [39.90, 116.40],
    [39.91, 116.41]
], {
    color: 'green',
    weight: 2,
    fillOpacity: 0.4
}).addTo(map);

效果：在地图上绘制一个绿色半透明的矩形。

---

4. 绘制圆（Circle）

圆（Circle）适用于标记某个地点的影响范围，比如无线信号范围。

var circle = L.circle([39.9042, 116.4074], {
    color: 'purple',
    fillColor: '#a3c',
    fillOpacity: 0.5,
    radius: 1000  // 半径 1000 米
}).addTo(map);

效果：在地图上绘制一个紫色的半透明圆形。

---

5. 绘制圆形标记（CircleMarker）

与 Circle 不同，CircleMarker 的大小不会随地图缩放变化，适用于固定大小的标记。

var circleMarker = L.circleMarker([39.9142, 116.4174], {
    color: 'orange',
    fillColor: '#ffa500',
    fillOpacity: 0.7,
    radius: 10
}).addTo(map);

效果：在地图上添加一个橙色的小圆点。

---

交互增强：点击事件

为了让地图更具交互性，我们可以为绘制的图形添加点击事件，显示对应的信息。

polygon.on('click', function () {
    alert('你点击了红色多边形！');
});

circle.on('click', function () {
    alert('这个圆形表示某个范围，比如影响区域。');
});

效果：当用户点击多边形或圆形时，会弹出提示框。

---

总结

本篇文章介绍了 Leaflet 提供的几何绘制功能，包括折线、多边形、矩形、圆、圆形标记等，并通过交互事件让用户能够点击这些图形获取信息。

这些图形在实际地图应用中有非常广泛的用途，比如：

• 折线（Polyline）：绘制公交路线、行驶轨迹
• 多边形（Polygon）：标记行政区划、土地使用范围
• 矩形（Rectangle）：标记建筑物、公园、停车场
• 圆（Circle）：标记影响范围，如无线信号、噪声污染
• 圆形标记（CircleMarker）：用于固定大小的地点标记