使用Leaflet樣式化分類JSON數據

Question

由於我的編碼水平是新手，如果有人提出與以下內容類似的問題，我先致歉。 我搜索了幾天，無法將正確的術語組合在一起以查找下面描述的情況的示例。

我試圖演示幾種Web映射服務的各種小用例（我通常使用術語“服務”）。 對於每項服務，我都嘗試制作一個基於土地使用情況以顏色編碼的包裹圖。 在這種情況下，我嘗試使用Leaflet映射宗地數據。 我將此數據格式化為一個名為downtownParcels_all.json的json對象。 它包含每個宗地的幾何形狀和屬性。 看起來像這樣：

{ "type": "FeatureCollection", 
"features": [ { 
    "geometry": 
        { 
            "type": "Polygon", 
            "coordinates": 
                [ 
                    [ 
                        [ -84.55903531544767, 38.20711817093237 ], 
                        [ -84.55905917105294, 38.20683120640012 ], 
                        [ -84.55925392867115, 38.20684358736447 ], 
                        [ -84.55922953052168, 38.2071413284724 ], 
                        [ -84.55903531544767, 38.20711817093237 ] 
                    ] 
                ] 
        }, 
"type": "Feature", "properties": 
    { 
        "Complete_A": "121 E JACKSON ST", 
        "MailAddres": "121 E JACKSON STREET", 
        "ParcelID": "123-45-6", 
        "GIS_MapID": "123-45-678.000", 
        "Acres": 0.13, 
        "Name2": null, 
        "MailAddr_1": "GEORGETOWN KY 40324", 
        "Name1": "SMITH JOHN", 
        "LandUse": "11-1 Single Family" } 
},

...等等...

基於properties.LandUse，我想為宗地多邊形着色。 如果一直以這個示例為指導，因為它的工作方式與我希望最終產品的工作方式非常相似。 有一些差異，因為雖然我從中汲取靈感的示例使用定量數據（疫苗接種率百分比），而我的示例使用了分類定性數據（土地使用）。 在創建我的地圖版本時，調整樣式功能以從定量數據轉換為定性數據似乎給我造成了問題。 我沒有收到錯誤消息，但是在繪制包裹時沒有條件樣式。

以下是我的代碼，用於嘗試根據存儲在json對象中的土地使用數據來設計宗地多邊形。 請注意，我在變量和函數名稱中保留了“狀態”一詞，只是為了便於參考回溯靈感示例：

var map = null;
var state_layer = null;
var states_geo_json = null;
var states_data = null;

// Loads data, initializes map, draws everything.
function start(){
  $.getJSON("data/downtownParcels_all.json",function(us_states){
    states_geo_json= us_states;
    initialize_map();
    draw_states();
  });
}
start();
/* Create map, center it */
function initialize_map(){
  map = new L.Map("map", {})
    // Lebanon, KS, Zoom level 4.
    .setView(new L.LatLng(38.212, -84.556), 15)
    .addLayer(new L.TileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }));
}
// Draw all the states on the map
function draw_states(){
  state_layer = L.geoJson(states_geo_json,{
    style: state_styles,
    //onEachFeature: state_features,
    updateWhenIdle: true
  });
  state_layer.addTo(map);
}

// Styles each state, populates color based on data
function state_styles(feature){
  return{
    stroke: true,
    fillColor: state_color,
    fillOpacity: 0.7,
    weight: 1.5,
    opacity: 1,
    color: 'black',
    zIndex: 15
  };
}

function state_color() {
  for (var i = 0; i < us_states.length; i++) {
    var landUse = us_states[i].properties.LandUse;
    switch(landUse) {
      case "11-1 Single Family": return "#ffffb2";
      case "11-2 Multi-Family": return "#fed976";
      case "11-3 Apartments": return "#993404";
      case "12-1 Commercial retail": return "#b30000";
      case "12-2 Commercial wholesale": return "#fe9929";
      case "12-3 Services": return "#e34a33";
      case "12-5 Government": return "#f768a1";
      case "12-6 Institutional": return "#045a8d";
      case "12-7 Educational": return "#a6bddb";
      case "16-1 Mixed use": return "#810f7c";
      case "21-1 Agricultural": return "#31a354";
      case "99-1 Vacant": return "#f7f7f7";
      case "99-4 Parking": return "#636363";
    }
  }
}

如果有人對我當前的代碼中缺少的內容有任何指導，或者對如何更好地實現這種分類符號的建議，我將不勝感激。 如果我不清楚任何事情，我很樂意澄清。 先感謝您。

Answer 1

好吧，所以回溯代碼，就可以了

fillColor: state_color,

這表示fillColor是state_color函數。 這應該更改為

fillColor: state_color(feature),

這表示fillColor是此功能由state_color函數返回的顏色。

然后，在state_color函數中，您無需接受參數。 您應該：應該

function state_color(layer) {

而且，您會擺脫state_color函數中的for循環，因為它獲得的功能不是很多，並且它說var landUse = us_states[i].properties.LandUse; ，這將類似於layer.feature.properties.LandUse 。

那應該讓您開始。