【问题标题】:Leaflet and Mapbox: Styling mapbox markers using L.geoJson?Leaflet 和 Mapbox:使用 L.geoJson 设计 mapbox 标记?
【发布时间】:2015-11-09 12:41:39
【问题描述】:

我正在尝试在 L.geoJson 函数中使用 Mapbox 的简单样式语法来设置标记颜色的样式,如下所示:

L.geoJson(myData, {
    pointToLayer: L.mapbox.marker.style,
    style: function(feature){ 
        return { 'marker-color': '#ffcc00' } 
    }
});

根据mapbox docs,您可以在 L.geoJson 中使用 L.mapbox.marker.style 作为 mapbox 的默认标记,但我似乎不知道如何使用不同的颜色对其进行样式设置。

有一个similar question posted here,但我无法让它在我的客户端代码中工作。

有人知道怎么做吗?这是一个 demo fiddle 开始使用。

注意:我知道标记属性可以添加到正在使用的实际数据中,但我需要能够在客户端代码中设置标记的样式,因为我无法访问 geoJson特征集合

【问题讨论】:

    标签: leaflet mapbox


    【解决方案1】:

    由于您不能依赖已定义样式属性的 GeoJSON 数据,您只需在将每个功能传递给 L.mapbox.marker.style 之前使用您自己的样式“修补”它。

    L.geoJson(myData, {
        // Instead of passing directly L.mapbox.marker.style function,
        // implement your own that will first "patch" the current feature
        // with your desired styling properties.
        pointToLayer: function (feature, latlng) {
            feature.properties = {
                "marker-size": "large",
                "marker-color": "#cc0000"
            };
            // Finally call L.mapbox.marker.style with the "patched" feature.
            return L.mapbox.marker.style(feature, latlng);
        }
    });
    

    演示:http://jsfiddle.net/W763Z/6/

    【讨论】:

    • 谢谢,朝着正确的方向前进。不幸的是,当您将 onEachFunction 选项添加到该功能时,会发生一些事情。查看您更新的小提琴:jsfiddle.net/W763Z/7
    • 2 个问题:您从 GeoJSON 数据中删除了一个逗号,该逗号变得无效;如果您希望仍然能够访问 GeoJSON 中定义的某些特征属性,您应该扩展 feature.properties 对象而不是覆盖它。演示:jsfiddle.net/W763Z/8
    猜你喜欢
    • 1970-01-01
    • 2015-11-24
    • 2016-03-08
    • 1970-01-01
    • 2015-07-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-26
    相关资源
    最近更新 更多