通過Leaflet中來自csv的數據定義json多邊形的顏色

Question

我想做一些我認為很容易的事情，但是我遇到了問題。

我有兩個文件：一個帶有幾何圖形的geojson文件和一個帶有兩列的csv，一個用於數據，另一個用於在geojson中共享具有屬性的屬性，這個name很簡單。

我想根據我的csv中的數據制作一個Choropleth地圖，以填充我的geojson多邊形。 我檢查了帶json的Choropleth映射的傳單文檔，並且部分遵循了有關傳單中json和csv之間通信的答案 。

因此，這是我的代碼的一部分，這是有問題的，已映射json多邊形，但未定義顏色。 我學習JS，因此對不起您的錯誤：

編輯 ：修正錯別字

Papa.parse("score.csv", {
    download: true,
    header: true,
    delimiter: "",
    complete: function(results) { //everything below runs only after the CSV has been loaded and processed.

        function getColor(d) {
            return d > 0.5 ? '#800026' :
                   d > 0.4  ? '#BD0026' :
                   d > 0.3  ? '#E31A1C' :
                   d > 0.25  ? '#FC4E2A' :
                   d > 0.2   ? '#FD8D3C' :
                   d > 0.15   ? '#FEB24C' :
                   d > 0.1   ? '#FED976' :
                              '#FFEDA0';
        }

        var oiseLayer = new L.geoJson(oise, {
                style: function(feature){
                    // var filtered = results.data.filter(function(data){return data.DCOMIRIS == this;}, feature.properties.DCOMIRIS.toString());

                    if (results.data.DCOMIRIS == feature.properties.DCOMIRIS){
                    return {
                        weight: 1,
                        opacity: 1,
                        color: 'white',
                        fillOpacity: 0.7,
                        fillColor: getColor(results.data.score)
                    }
                }
                }
           }).addTo(map);
}
});

我的json看起來像這樣：

var oise = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },                                                                                
"features": [
{ "type": "Feature", "properties": { "DEPCOM": "60538", "NOM_COM": "Ricquebourg", "IRIS": "0000", "DCOMIRIS": "605380000", "NOM_IRIS": "Ricquebourg", "TYP_IRIS": "Z" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 2.753862487322691, 49.568106423004863 ], [ 2.754834569610532, 49.567467723103867 ], [ 2.755374727888817, 49.567112846570275 ], [ 2.75585282747064, 49.566527871018629 ], [ 2.755916398961054, 49.56594385787055 ], [ 2.755844137158009, 49.565449439131314 ], [ 2.755354284133803, 49.564733104021172 ], [ 2.756729896258653, 49.564817378618457 ], [ 2.758105512897535, 49.564901637620451 ],...

而我的csv：

DCOMIRIS;score
600010000;0.025
600020000;0.03333333333333333

此外，我的控制台出現錯誤，提示我在json中的csv轉換“格式不正確”。

謝謝

Answer 1

您有一個錯字， if (result.data.DCOMIRIS == feature.properties.DCOMIRIS){ =>應該是帶有s的 results ，以匹配您的函數參數標識符。

但這不是您問題的核心。

results.data是一組項目（CSV文件中的每行一個，第一行/標題行除外）。 因此， if條件“ result.data.DCOMIRIS == feature.properties.DCOMIRIS ”將永遠不會得到滿足。

您應該將DCOMIRIS代碼映射到一個對象中，以便在解析GeoJSON數據並嘗試確定適當的樣式/顏色時可以輕松地引用這些代碼。 看到我在另一個問題中的回答： Leaflet GeoJSON縮放到按ID標記

// map the DCOMIRIS first, so that we can retrieve them by DCOMIRIS easily.
var DCOMIRIS = {},
  data = results.data;

for (var i = 0; i < data.length; i += 1) {
  DCOMIRIS[data[i].DCOMIRIS] = data[i].score;
}

然后，您可以通過調用DCOMIRIS[feature.properties.DCOMIRIS]來檢索功能score DCOMIRIS[feature.properties.DCOMIRIS]

然后，我認為PapaParse僅給您字符串，因此您必須將score轉換為浮點數： parseFloat(score)

最后，您可以使用getColor函數：

var oiseLayer = L.geoJson(oise, {
  style: function(feature) {
    return {
      weight: 1,
      opacity: 1,
      color: 'white',
      fillOpacity: 0.7,
      fillColor: getColor(parseFloat(DCOMIRIS[feature.properties.DCOMIRIS]))
    };
  }
}).addTo(map);

演示： http ： //jsfiddle.net/ve2huzxw/185/

注意：不確定您的delimiter: ""可能解釋您的控制台錯誤。 為什么不離開定界符自動檢測？