Codeigniter中Leaflet多边形绑定对应查询数据弹窗异常

问题描述 #

基于CodeIgniter框架开发Leaflet地图功能时，通过$.getJSON请求后端接口拉取区域统计数据，计划给每个多边形图层通过bindPopup绑定弹窗，展示对应区域的标识与统计总值。实际运行后所有多边形弹窗均展示接口返回的全部区域标识和对应数值，未实现单多边形仅展示自身匹配数据的效果。

问题根因 #

• 后端接口逻辑无问题：模型层按Area分组聚合统计、控制器输出JSON格式结果的逻辑符合预期，返回的数据结构可直接使用。
• 前端绑定逻辑存在两处核心错误：
  • 仅将接口返回的全量数据存入两个数组，未建立多边形和统计数据的匹配关联规则
  • 未遍历所有多边形图层，直接将全量数组转字符串后绑定到单个layer对象，导致所有复用该逻辑的弹窗都展示全量数据

原有问题代码 #

前端请求绑定逻辑 #

$.getJSON("<?php echo base_url(); ?>Request/showData", function(data) {
            var area_data = new Array(3);
            var total_data = new Array(3);
            for (var i = 0; i < data.length; i++) {
                area_data[i] = data[i].Area;
                total_data[i] = data[i].total;      
            }         
            layer.bindPopup(area_data + ':' + total_data);
        })

模型层统计查询方法 #

public function map()
{
    $query = $this->db->query(
        "SELECT Area, sum(Value) as total from ( select Area,Value from try_1 union all select Area,Value from try_2 ) view_vall group by Area"
    );
    return $query->result_array();
}

控制器层接口方法 #

public function showData()
    {
        $aa = $this->model_request->map();
        echo json_encode($aa);     
    }

修复方案 #

调整前端绑定逻辑，先建立区域标识到统计值的映射关系，再逐个遍历多边形图层，匹配当前多边形对应的区域数据后单独绑定弹窗，参考代码如下：

$.getJSON("<?php echo base_url(); ?>Request/showData", function(data) {
    // 构建区域-统计值映射表，方便快速匹配
    const areaStatMapping = {}
    data.forEach(item => {
        areaStatMapping[item.Area] = item.total
    })

    // 遍历所有多边形图层，以下示例以GeoJSON图层组为例，替换为实际存储多边形的图层组/数组即可
    polygonLayerGroup.eachLayer(function(currentLayer) {
        // 读取当前多边形绑定的区域标识，字段名需和绘制多边形时存储的属性名一致
        const areaKey = currentLayer.feature.properties.Area
        // 匹配对应统计值，绑定专属弹窗
        currentLayer.bindPopup(`${areaKey}: ${areaStatMapping[areaKey]}`)
    })
})

提示：如果绘制多边形时未给每个图形存储对应Area属性，需要先在绘制阶段给每个多边形绑定自身对应的区域标识，否则无法完成数据匹配。

内容的提问来源于stack exchange，提问作者SongJL