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

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 
    } 
});