WebGIS 实现城市停水影响范围可视化实践

影响范围绘制

受影响小区在地图上主要通过 Polygon（多边形）勾勒边界，并用 DivIcon 标注具体点位。这里有个细节要注意，坐标转换和样式控制直接影响用户体验。

function loadRange() {
    showLayerGroup.clearLayers();
    var line1 = [];
    var detailsInfo = "";

    for (var i = 0; i < effectData.length; i++) {
        // 解析 GeoJSON 格式字符串为坐标数组
        var tempData = convertStr2DataArrayTrans(effectData[i].geo_shape);
        var name = effectData[i].name;

        // 添加标记点
        L.marker([tempData[0][0], tempData[0][1]], {
            icon: L.divIcon({
                iconSize: null,
                className: '',
                popupAnchor: [5, 5],
                shadowAnchor: [5, 5],
                html: '<div class="effect-marker">' + 
                      '<div>【' + name + '】/' + effectData[i].title + '</div>' + 
                      '<div>电话:' + effectData[i].tel + '</div>' + 
                      '</div>'
            })
        }).addTo(showLayerGroup);

        // 构建详情列表
        detailsInfo += '<span>' + (i + 1) + '、【' + name + '】/' + effectData[i].title + '<br/></span>';
        $('#lineDetails').html(detailsInfo);

        // 绘制多边形边界
        L.polygon(tempData, style).addTo(showLayerGroup).bindPopup(name);
    }

    mymap.addLayer(showLayerGroup);
    // 自动调整视角以适应所有图层
    mymap.setView(showLayerGroup.getBounds().getCenter(), 16);
}

效果预览

加载完成后，侧边栏显示停水详情，地图底图采用天地图，数据贴合度良好。受影响小区会以特定颜色高亮，点击弹窗可查看联系方式。这种直观的展示方式，能让用户一眼看出自家是否在停水范围内。

总结

将城市停水信息与 GIS 空间知识融合，不仅能解决信息不对称问题，还能提升应急响应效率。通过 Leaflet 实现的前端可视化方案，成本低且扩展性强。后续还可以结合用户位置推送通知，进一步优化用水体验。数据准确性是关键，务必保持基础库的定期更新。