首页 > 解决方案 > 不调用 onEachFeature

问题描述

我正在尝试添加一些具有特定样式和弹出窗口的标记,但如果我使用 PointToLayer 函数,则不会调用 onEachFeature。所以我不能添加弹出窗口。

如果我只使用 onEachFeature,我可以使用console.log(feature)但我不能显示标记。如果我使用 pointToLayer,则不会调用 onEachFeature。

var json_chambre = L.geoJson(response, {

    pointToLayer: function(feature, latlng) {
        var markerCh = L.circleMarker(latlng, {
            radius: 5,
            fillColor: "#ff7800",
            color: "#000",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8
        });
        chambre_pit.addLayer(markerCh);
    },
    onEachFeature: function(feature, layer) {
        console.log(feature);
    }
}); 

没有错误,只是我不能同时拥有弹出窗口和样式。

标签: javascriptleafletmarkers

解决方案


让我引用传单参考中的pointToLayer回调选项

定义FunctionGeoJSON 点如何生成 Leaflet 层。它在添加数据时在内部调用,传递 GeoJSON 点特征及其LatLng. 默认是产生一个默认值Marker

function(geoJsonPoint, latlng) {
    return L.marker(latlng);
}

注意那和你的代码有什么不同?pointToLayer回调返回的实例L.Marker,并将其添加到L.GeoJson实例(它是 的子类L.LayerGroup)中。

由于您不返回标记(或图层)实例,因此该L.GeoJson实例最终为空,并onEachFeature循环通过总共零个特征+图层对。

另请注意,您不需要在onEachFeature步骤中附加弹出窗口,即:

var json_chambre = L.geoJson(response, {
    pointToLayer: function(feature, latlng) {
        var markerCh = L.circleMarker(latlng, {
            radius: 5,
            fillColor: "#ff7800",
            color: "#000",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8
        });
        markerCh.bindPopup(feature.properties.label); // Or whatever
        return markerCh; // And do return the marker so it gets added to json_chambre.
    }
});

推荐阅读