使用Leaflet无法为GeoJSON多边形绑定弹窗（Angular场景）

可能原因及对应解决方案 #

1. 填充区域不可点击（最常见） #

Leaflet多边形的点击事件默认绑定在填充区域，如果样式未设置fillOpacity或设为0，会导致点击多边形内部无响应（仅边框可点击，不符合常规操作习惯）。

修改style配置，显式添加fillOpacity（哪怕设置极低数值，只要不为0即可）：

L.geoJSON(geojsonFeature,
    {
        style: function(feature) {
            return {
                "color": "#78c679",
                "weight": 5,
                "opacity": 0.9,
                "fillOpacity": 0.1 // 新增该行，确保填充区域可触发点击
            }
        },
        onEachFeature: (feature, layer)=>{
            layer.bindPopup('Test message');
        }
    }
).addTo(this.map);

2. 验证GeoJSON多边形有效性 #

确认geojsonFeature是标准的Polygon/MultiPolygon类型，无拓扑错误（如顶点顺序错误、自相交）。无效的多边形会导致Leaflet渲染异常，进而影响事件绑定。

3. 手动绑定点击事件（备选方案） #

若上述方法无效，可直接给图层绑定click事件手动触发弹窗：

onEachFeature: (feature, layer)=>{
    layer.on('click', () => {
        const popup = L.popup().setContent('Test message');
        layer.openPopup(popup);
    });
}

4. 排查Angular上下文冲突 #

箭头函数在onEachFeature中通常无问题，但如果存在Angular变更检测干扰，可尝试改用普通函数：

onEachFeature: function(feature, layer) {
    layer.bindPopup('Test message');
}

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