返回

Vue-CLI and Leaflet (5): 点 绘制

前端

前情回顾

在前几章中，我们介绍了如何在 Vue-CLI 中集成 Leaflet，并在其中创建地图。我们还介绍了如何向地图中添加 marker、polyline 和 polygon 等图形要素。这些功能都属于比较基础的功能，通常会应用到查询结果或分析结果的展示场景。除此之外，这些基础图形的绘制也是其他高级别功能的基础，例如框选、量测等功能。这章内容就主要讲在地图上实现图像绘制与量测功能。

点绘制

点绘制是最简单的图形绘制方式，也是其他图形绘制的基础。在 Leaflet 中，点绘制可以通过 L.marker() 方法实现。该方法接收一个 L.LatLng 对象作为参数，该对象表示点的地理坐标。例如，以下代码在地图上添加了一个点，位置为上海市中心：

var marker = L.marker([31.230416, 121.473701]).addTo(map);

绘制其他几何图形

除了点之外，Leaflet 还支持绘制其他几何图形，包括折线、多边形和圆形等。这些图形的绘制方式与点绘制类似，都需要使用相应的 L.polyline()、L.polygon() 或 L.circle() 方法。例如，以下代码在地图上绘制了一个折线，连接上海市中心和浦东新区：

var polyline = L.polyline([
  [31.230416, 121.473701],
  [31.204069, 121.508579]
]).addTo(map);

绘制图像

除了几何图形之外，Leaflet 还支持绘制图像。图像的绘制可以通过 L.imageOverlay() 方法实现。该方法接收三个参数：图像的 URL、图像的边界框和图像的绘制选项。例如，以下代码在地图上绘制了一张上海市的卫星图像：

var imageOverlay = L.imageOverlay('https://example.com/shanghai.png', [[30.875984, 121.274254], [31.649022, 122.016881]]).addTo(map);

量测

Leaflet 还提供了强大的量测功能。量测功能可以通过 L.control.measure() 方法实现。该方法接收一个选项对象作为参数，该对象可以指定量测的单位和精度。例如，以下代码在地图上添加了一个量测控件，单位为米，精度为两位小数：

var measureControl = L.control.measure({
  units: 'meters',
  decimals: 2
}).addTo(map);

总结

这章内容主要介绍了如何在 Leaflet 中实现点绘制、图像绘制和量测功能。这些功能非常实用，可以应用到各种地图应用中。希望这些内容能帮助读者更好地掌握 Leaflet 的绘图功能，并将其应用到实际项目中。