通过传单中来自 csv 的数据定义 json 多边形的颜色
Define json polygon's color by data from csv in Leaflet
我想做一些我认为很容易的事情,但我遇到了一个问题。
我有两个文件:一个带有几何的 geojson 文件和一个带有两列的 csv,一个用于数据,另一个与 geojson 中的属性共享属性,这name
很简单。
我想根据我的 csv 中的数据制作分区统计图来填充我的 geojson 多边形。我用json检查了分区统计图的传单文档,并且我部分遵循了传单中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 转换"格式不正确"。
谢谢
你在 =if (result.data.DCOMIRIS == feature.properties.DCOMIRIS){
中有一个拼写错误 => 应该与 s results
以匹配您的函数参数标识符。
但这不是你问题的核心。
results.data
是一个项目数组(CSV 文件中每行一个,除了第一个/标题行)。所以"result.data.DCOMIRIS == feature.properties.DCOMIRIS
"这个if
条件永远不会得到满足。
您应该将DCOMIRIS
代码映射到对象中,以便在解析 GeoJSON 数据并尝试确定适当的样式/颜色时可以轻松引用这些代码。请参阅我在另一个问题的回答:传单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
然后,我认为 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: ""
,这可能解释了您的控制台错误。为什么不保留分隔符自动检测?
- d3.hexbin插件-动态定义颜色域以适应数据
- jquery数据表的自定义ko绑定
- 一台特定计算机的Ajax请求数据未定义/失败
- 自定义验证并格式化从数据数据库返回的响应-BEGINNER
- 如何从自定义对话框编辑数据网格中的选定行
- JavaScript-获取数据属性的值返回未定义的值
- 使用自定义数据属性或将数据绑定到处理程序来处理事件
- 选项中包含数据的自定义标记
- $.每个jquery循环打印一个“;未定义的“;对于getJSON请求后的每个元素,网格数据都会完美地打印出来
- ListView的ItemTemplate内的自定义HtmlControl的数据绑定失败
- MVC中关于表的自定义工具提示-每行显示数据
- 数据表自定义筛选
- 如何重新定义ws.send以捕获数据
- 有了字段的名称,我如何用空白数据初始化对象的未定义字段
- 如何设置'targets'在列中动态定义数据表
- Chart.js2.X中的条形值-数据集元数据未定义
- 使用角度图时,我可以用函数定义数据点颜色吗
- 通过传单中来自 csv 的数据定义 json 多边形的颜色
- 如何使用 sql 行 id 使用使用 JSON 编码数据定义元素
- 如何更改yui的数据表中的数据定义