Javascript 定义json多边形';s传单中csv数据的颜色
我想做一些我认为很容易的事情,但我面临一个问题 我有两个文件:一个带有几何图形的geojson文件和一个带有两列的csv文件,一列用于数据,另一列与geojson中的属性共享属性,简单地说是Javascript 定义json多边形';s传单中csv数据的颜色,javascript,json,csv,leaflet,Javascript,Json,Csv,Leaflet,我想做一些我认为很容易的事情,但我面临一个问题 我有两个文件:一个带有几何图形的geojson文件和一个带有两列的csv文件,一列用于数据,另一列与geojson中的属性共享属性,简单地说是名称 我想根据csv中的数据制作choropleth贴图,以填充geojson多边形。我在传单中检查json和csv之间的通信 所以,这是我代码中有问题的一部分,json多边形被映射,但颜色没有定义。我对这些错误感到非常抱歉: 编辑:修复打字错误 Papa.parse("score.csv", { d
名称
我想根据csv中的数据制作choropleth贴图,以填充geojson多边形。我在传单中检查json和csv之间的通信
所以,这是我代码中有问题的一部分,json多边形被映射,但颜色没有定义。我对这些错误感到非常抱歉:
编辑:修复打字错误
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转换“格式不好”
谢谢如果(result.data.DCOMIRIS==feature.properties.DCOMIRIS){
=>应该是results
和s匹配函数参数标识符,您在if(result.data.DCOMIRIS==feature.properties.DCOMIRIS)中有一个输入错误
但这不是你问题的核心
results.data
是一个项目数组(CSV文件中每行一个项目,第一行/头行除外)。因此将永远不会满足if
条件“result.data.DCOMIRIS==feature.properties.DCOMIRIS
”
您应该将DCOMIRIS
代码映射到一个对象中,以便在解析GeoJSON数据并尝试确定适当的样式/颜色时可以轻松地引用这些代码。请参阅我在另一个问题中的答案:
演示:
注意:不确定您的分隔符:“
,这可能解释了您的控制台错误。为什么不让分隔符自动检测?谢谢,它就像一个符咒!对于分隔符:”
它在Papaparse文档中,所以我无法理解它…我认为这不会像这样困难。我将修复我问题中的拼写错误。
// 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;
}
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);