要将空间数据库的数据在 Leaflet 中显示，首先需要将数据从数据库中提取并转换为 Web 地图友好的格式。
GeoJSON 是首选： Leaflet 原生支持 GeoJSON 格式。空间数据库（如 PostGIS）通常提供将几何列转换为 GeoJSON 字符串的函数，例如 ST_AsGeoJSON(geom_column)。你可以在 SQL 查询中直接将结果集转换为 GeoJSON。
后端 API 服务： 为了安全和性能，通常不会直接让前端访问数据库。你需要构建一个后端 API 服务（如使用 Node.js、Python Flask/Django、Java Spring Boot 等），该服务负责接收前端请求，从空间数据库查询数据，然后将数据转换为 GeoJSON 格式并通过 HTTP 响应返回给前端。
数据过滤与分页： 对于大型数据集，在后端进行空间过滤（如根 特殊数据库 据视窗范围 ST_Intersects(geom, ST_MakeEnvelope(...))）和分页查询非常重要，以减少网络传输量和前端渲染压力。
2. Leaflet 中的数据加载与图层管理
Leaflet 提供了多种方式来加载和管理 GeoJSON 数据。
L.geoJSON 类： 这是 Leaflet 中用于处理 GeoJSON 数据的核心类。你可以直接传入 GeoJSON 对象或通过 Ajax 请求获取 GeoJSON 数据。
JavaScript
// 示例：加载 GeoJSON 点数据
fetch('/api/points') // 从后端API获取GeoJSON
.then(response => response.json())
.then(data => {
L.geoJSON(data, {
pointToLayer: function (feature, latlng) {
// 自定义点样式，例如使用圆形标记
return L.circleMarker(latlng, {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
},
onEachFeature: function (feature, layer) {
// 为每个要素添加弹出窗口，显示属性信息
if (feature.properties && feature.properties.name) {
layer.bindPopup(feature.properties.name);
}
}
}).addTo(map);
});
图层组与控制： 使用 L.LayerGroup 或 L.FeatureGroup 来组织不同类型的 GeoJSON 数据，并通过 L.control.layers 提供图层切换功能，方便用户管理。
动态加载： 实现根据地图缩放级别或视窗范围动态加载数据，提升大规模数据的可视化性能。当地图平移或缩放时，触发事件，重新向后端请求当前视窗内的数据。
3. 交互与样式定制
Leaflet 提供了丰富的选项来定制要素样式和添加交互性。
样式定制： 你可以通过 style 选项为 GeoJSON 要素定义不同的样式，例如线的颜色、粗细，多边形的填充颜色和边框。可以基于要素的属性动态设置样式，实现数据可视化效果。
交互事件： Leaflet 提供了 onEachFeature 回调函数，允许你为每个要素添加事件监听器（如 click, mouseover），实现点击显示详细信息、鼠标悬停高亮等交互功能。
插件扩展： Leaflet 拥有活跃的插件生态系统，可以扩展其功能，例如热力图 (leaflet-heatmap)、聚类 (Leaflet.markercluster)、图表 (Leaflet.Chart.js) 等，进一步增强数据可视化效果。