如何根據傳單中的屬性更改標記的顏色？

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