Vue3+Leaflet快速构建水利一张图，深圳案例实战
本文以深圳为例，演示如何使用 Vue3 和 Leaflet 框架快速搭建水利一张图系统。通过底图加载、河流线状要素绘制、水库等点状要素标注以及蓄滞洪区面状范围展示，完整呈现了智慧水利平台的核心地图功能...
在智慧水利建设中，水利一张图作为核心可视化工具，能够将各类水利对象按空间位置精准呈现在电子地图上。本文将以深圳为例，介绍如何利用 Vue3 和 Leaflet 框架快速构建这一系统，为水利信息化提供直观的地理信息支撑。
水利一张图的核心构成
水利一张图主要由三类空间要素构成：线状要素（如河流、堤防、渠道）、点状要素（如水库、水闸、雨量站）和面状要素（如蓄滞洪区、河湖管理范围）。这些要素通过不同的 Leaflet API 实现：L.polyline 用于绘制线状要素，L.marker 或 L.circleMarker 用于标记点状要素，L.polygon 用于展示面状范围。
技术选型与优势
在实际项目中，虽然 SuperMap、MapGIS 等专业 GIS 平台功能强大，但对于轻量级大屏展示、H5 移动端应用或快速原型开发场景，Leaflet 是更优选择。其 gzip 压缩后仅约 40KB，开源免费且支持原生手势操作，非常适合快速构建水利一张图系统。
实现步骤
1. 底图加载
以河流为例，使用 L.polyline 方法绘制线状要素。例如，深圳某段河流的坐标数据可以这样处理：
对于水库、水闸等点状要素，可以使用 L.marker 方法进行标注。例如，在深圳市民中心附近添加一个水库标记：
对于蓄滞洪区等面状范围，使用 L.polygon 方法绘制多边形区域。例如，深圳某蓄滞洪区的边界坐标可以这样表示：
通过上述方法构建的水利一张图系统，能够清晰展示深圳地区的水利设施分布情况。图中不仅标注了主要水库位置，还展示了河流走向和蓄滞洪区范围，为水利管理提供了直观的空间信息支持。
该系统不仅适用于深圳地区，还可根据实际需求扩展到其他城市，为智慧水利建设提供可复用的技术方案。