通过 Leaflet 中的 csv 数据定义 json 多边形的颜色

Question

我想做一些我认为很容易的事情，但我遇到了问题。

我有两个文件：一个包含几何图形的 geojson 文件和一个包含两列的 csv，一个用于数据，另一个与 geojson 中的属性共享属性，一个 name 简单点。

我想根据来自我的 csv 的数据制作等值线图来填充我的 geojson 多边形。我检查 leaflet documentation for choropleth map with json and i follow, in part, this answer 以了解 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 转换是 "not well-formed"。

谢谢

Answer 1

您在 if (result.data.DCOMIRIS == feature.properties.DCOMIRIS){ 中有错字 => 应该是 results 和 s 以匹配您的函数参数标识符。

但这不是你问题的核心。

results.data 是一个项目数组（CSV 文件中每行一个，第一行 / header 除外）。所以 if 条件“result.data.DCOMIRIS == feature.properties.DCOMIRIS”永远不会满足。

您应该将 DCOMIRIS 代码映射到 object 中，以便在解析 GeoJSON 数据并尝试确定合适的样式/颜色时可以轻松参考这些代码。请参阅我在另一个问题中的回答：Leaflet GeoJSON zoom to marker by 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

然后，我认为 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: ""，这可能解释了您的控制台错误。为什么不留定界符自动检测？

通过 Leaflet 中的 csv 数据定义 json 多边形的颜色

Define json polygon's color by data from csv in Leaflet

javascript

csv

json

leaflet