如何根据传单中的属性更改标记的颜色？

Question

我有上面的地图，标记具有属性 'rastvalues'。我想根据 'rastvalues' values.Below 更改标记颜色是我的 javascript 代码

<script type="text/javascript" >
        function main_map_init (map, options) {
             var promise  = $.getJSON('{% url "datapotg" %}');
            // Download GeoJSON via Ajax
            promise.then(function(data) {
            var allbusinesses = L.geoJson(data);
            var cafes = L.geoJson(data, {
            filter: function(feature) {

                return feature.properties.rastvalues ;

                },
                pointToLayer: function(feature, latlng) {
                return new L.CircleMarker(latlng, {
                radius: 8,
                    fillColor: "Red",
                    color: "Red",
                    weight: 1,
                    opacity: 1,
                    fillOpacity: 0.4,
                    clickable: true

                }).on('mouseover', function() {
                    this.bindPopup(feature.properties.rastvalues).openPopup();
                });
            }
        });


         map.fitBounds(allbusinesses.getBounds(), {
            padding: [50, 50]
        });
        cafes.addTo(map)


        });
        }

    </script>

我有 rastvalues =3,rastvalues =9,rastvalues =12 如何为这三个值赋予不同的颜色？

Answer 1

您可以创建一个包含您的值及其各自颜色的对象，并使用括号表示法从中检索它们。有些人建议使用函数，但我认为使用对象更容易：

pointToLayer: function (feature, latlng) {
    var colors = {
        3: 'green',
        9: 'orange',
        12: 'red'
    };
    return new L.CircleMarker(latlng, {
        radius: 8,
        fillColor: colors[feature.properties.rastvalues],
        color: colors[feature.properties.rastvalues],
        weight: 1,
        opacity: 1,
        fillOpacity: 0.4,
        clickable: true
    }
});

如何根据传单中的属性更改标记的颜色？

How to change the colours of markers based on properties in leaflet?

html

javascript

geojson

leaflet