Question

我是Leaflet的新手，我想使用基于属性的标记图标。我按照了几个教程，可以使用PostGIS数据库中的几何数据在屏幕上显示标记。

var mapDataLayer = L.geoJson(geojson, {
    pointToLayer: function (feature, latlng) {
        var markerStyle = { 
            fillColor: "#F00",
            color: "#FFF",
            fillOpacity: 0.5,
            opacity: 0.8,
            weight: 1,
            radius: 8
        };

        return L.circleMarker(latlng, markerStyle);
    },
    onEachFeature: function (feature, layer) {
        var html = "";
        for (prop in feature.properties){
            html += prop+": "+feature.properties[prop]+"<br>";
        };
        layer.bindPopup(html);
    }
}).addTo(map);

使用这个，我得到几个相同颜色的点。现在我想使用不同颜色/图标分割这些点以获得不同的属性。

Answer 1

您可能只需要关注自定义标记的额外教程：Markers With Custom Icons

在本教程中，您将学习如何轻松定义自己的图标，供地图上放置的标记使用。

Answer 2

我看了一下feature.properties [prop]

我创建了一个函数来赋予属性＆＃34; status＆＃34;五分之一：

    var mapDataLayer = L.geoJson(geojson, {
    pointToLayer: function (feature, latlng) {
        var markerStyle = { 
            fillColor: getColor(feature.properties.status),
            color: "#FFF",
            fillOpacity: 0.5,
            opacity: 0.8,
            weight: 1,
            radius: 8
        };

        return L.circleMarker(latlng, markerStyle);
    },
    onEachFeature: function (feature, layer) {
        var html = "";
        for (prop in feature.properties){
            html += prop+": "+feature.properties[prop]+"<br>";
        };
        layer.bindPopup(html);
    }
}).addTo(map);

然后我编辑了上面的代码以包含getColor函数。

breadth-first

基于数据库属性的传单标记

2 个答案: