JavaScript代码不会将geojson数据输出到传单地图上
我试图将geojson数据输出到一个传单.js映射上,但浏览器中的控制台输出输出如下一行:“UncaughtTypeError:无法读取null的属性'features'” geojson大约有300000个纬度和经度点。我确实将geojson减少到了95个点,并且我能够在地图上绘制这些点。但是,当我尝试使用更大的geojson文件时,它不会打印 以下是js代码:JavaScript代码不会将geojson数据输出到传单地图上,javascript,dc.leaflet.js,Javascript,Dc.leaflet.js,我试图将geojson数据输出到一个传单.js映射上,但浏览器中的控制台输出输出如下一行:“UncaughtTypeError:无法读取null的属性'features'” geojson大约有300000个纬度和经度点。我确实将geojson减少到了95个点,并且我能够在地图上绘制这些点。但是,当我尝试使用更大的geojson文件时,它不会打印 以下是js代码: var myMap = L.map("map", { center: [-10.01194, -51.11583], zoo
var myMap = L.map("map", {
center: [-10.01194, -51.11583],
zoom: 5
});
// Adding tile layer
L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
attribution: "Map data © <a href='https://www.openstreetmap.org/'>OpenStreetMap</a> contributors, <a href='https://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>, Imagery © <a href='https://www.mapbox.com/'>Mapbox</a>",
maxZoom: 20,
id: "mapbox.streets",
accessToken: API_KEY
}).addTo(myMap);
var newtry = "brazilian_fires2008.txt";
// Grab the data with d3
d3.json(newtry, function(response) {
// Create a new marker cluster group
var markers = L.markerClusterGroup();
// Loop through data
var lon;
var lat;
for(var a = 0; a < 10; a++)
{
lon = response.features[a].geometry.coordinates[1];
lat = response.features[a].geometry.coordinates[0];
markers.addLayer(L.marker([lon, lat]));
}
// Add our marker cluster layer to the map
myMap.addLayer(markers);
});
浏览器中的控制台输出输出以下行:
未捕获的TypeError:无法读取null的属性“features”
我相信js代码无法读取geojson。我预计会有几千分,但我什么也得不到。如果您的错误是“Uncaught TypeError:无法读取null的属性“features”,
然后数据集未正确存储在文件“brazilian_fires2008.txt”中。
请再次检查文件名或文件路径,并确保它指向文件的正确路径
当前代码仍有错误:“无法读取未定义的属性“几何体”
您需要迭代到10。因此,将其更改为response.features.length
var dataset = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"acq_date": "2008-01-01",
"latitude": -9.2096,
"longitude": -36.8779,
"brightness": 360.2,
"confidence": 100,
"bright_t31": 314.7,
"frp": 92.0
},
"geometry": {
"type": "Point",
"coordinates": [
-36.8779,
-9.2096
]
}
},
{
"type": "Feature",
"properties": {
"acq_date": "2008-01-01",
"latitude": -6.0089999999999995,
"longitude": -38.3049,
"brightness": 362.1,
"confidence": 100,
"bright_t31": 313.4,
"frp": 109.5
},
"geometry": {
"type": "Point",
"coordinates": [
-38.3049,
-6.0089999999999995
]
}
},
]
};
var myMap = L.map("map", {
center: [-10.01194, -51.11583],
zoom: 5
});
// Adding tile layer
L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
attribution: "Map data © <a href='https://www.openstreetmap.org/'>OpenStreetMap</a> contributors, <a href='https://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>, Imagery © <a href='https://www.mapbox.com/'>Mapbox</a>",
maxZoom: 20,
id: "mapbox.streets",
accessToken: 'pk.eyJ1Ijoic21hcnRuZWd1cnkiLCJhIjoiY2p5aGFjdTVzMDI2NzNjbDdyYjhjZDdmeSJ9.Zl1LGRGQsFAxUP_jBqkZBQ'
}).addTo(myMap);
var response = dataset;
// Grab the data with d3
// Create a new marker cluster group
var markers = L.markerClusterGroup();
// Loop through data
var lon;
var lat;
for(var a = 0; a < response.features.length; a++)
{
lon = response.features[a].geometry.coordinates[1];
lat = response.features[a].geometry.coordinates[0];
markers.addLayer(L.marker([lon, lat]));
}
// Add our marker cluster layer to the map
myMap.addLayer(markers);
var数据集={
“类型”:“FeatureCollection”,
“特点”:[
{
“类型”:“功能”,
“财产”:{
“acq_日期”:“2008-01-01”,
“纬度”:-9.2096,
“经度”:-36.8779,
“亮度”:360.2,
“信心”:100,
“bright_t31”:314.7,
“frp”:92.0
},
“几何学”:{
“类型”:“点”,
“坐标”:[
-36.8779,
-9.2096
]
}
},
{
“类型”:“功能”,
“财产”:{
“acq_日期”:“2008-01-01”,
“纬度”:-6.00899999995,
“经度”:-38.3049,
“亮度”:362.1,
“信心”:100,
“bright_t31”:313.4,
“frp”:109.5
},
“几何学”:{
“类型”:“点”,
“坐标”:[
-38.3049,
-6.0089999999999995
]
}
},
]
};
var myMap=L.map(“map”{
中心:[-10.01194,-51.11583],
缩放:5
});
//添加瓷砖层
L.Tillelayer(“https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}“{
属性:“地图数据和副本;贡献者,图像©”,
maxZoom:20,
id:“地图盒。街道”,
accessToken:'pk.eyj1ijoic21hcnruzwd1cnkilchijoy2np5agfjdtvzmdi2nznjbddyjhjzddmesj9.zlllgrgqsfaxup_jBqkZBQ'
}).addTo(myMap);
var响应=数据集;
//用d3抓取数据
//创建新的标记群集组
var markers=L.markerClusterGroup();
//循环浏览数据
瓦隆;
var lat;
对于(var a=0;a
根据浏览器控制台,错误标记在js代码的第29行,即:lon=response.features[a].geometry.coordinates[1];lat=response.features[a].geometry.coordinations[0]<代码>未捕获类型错误:无法读取null的属性“features”
:这可能意味着响应
为null,并且它无法尝试评估响应。features
。虽然这样的事情可能发生在第三方库中,而不是代码中(但仍然可能是由于发送到库中的坏数据造成的)。你能得到完整的跟踪吗?您可能可以通过单击日志行上的某个内容来获取它。至于文件brazilian_fires2008.txt
:如果只包含前100000个,会发生什么情况?或者从50000到100000?尝试文件的不同部分以缩小坏部分的范围。尝试不同的数量是不起作用的。你说它在前95个点起作用。它对前200个有效吗?500? 1000?如何知道文件是否存储不正确?我已尝试使用该文件的所有文件路径。。。
var dataset = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"acq_date": "2008-01-01",
"latitude": -9.2096,
"longitude": -36.8779,
"brightness": 360.2,
"confidence": 100,
"bright_t31": 314.7,
"frp": 92.0
},
"geometry": {
"type": "Point",
"coordinates": [
-36.8779,
-9.2096
]
}
},
{
"type": "Feature",
"properties": {
"acq_date": "2008-01-01",
"latitude": -6.0089999999999995,
"longitude": -38.3049,
"brightness": 362.1,
"confidence": 100,
"bright_t31": 313.4,
"frp": 109.5
},
"geometry": {
"type": "Point",
"coordinates": [
-38.3049,
-6.0089999999999995
]
}
},
]
};
var myMap = L.map("map", {
center: [-10.01194, -51.11583],
zoom: 5
});
// Adding tile layer
L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
attribution: "Map data © <a href='https://www.openstreetmap.org/'>OpenStreetMap</a> contributors, <a href='https://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>, Imagery © <a href='https://www.mapbox.com/'>Mapbox</a>",
maxZoom: 20,
id: "mapbox.streets",
accessToken: 'pk.eyJ1Ijoic21hcnRuZWd1cnkiLCJhIjoiY2p5aGFjdTVzMDI2NzNjbDdyYjhjZDdmeSJ9.Zl1LGRGQsFAxUP_jBqkZBQ'
}).addTo(myMap);
var response = dataset;
// Grab the data with d3
// Create a new marker cluster group
var markers = L.markerClusterGroup();
// Loop through data
var lon;
var lat;
for(var a = 0; a < response.features.length; a++)
{
lon = response.features[a].geometry.coordinates[1];
lat = response.features[a].geometry.coordinates[0];
markers.addLayer(L.marker([lon, lat]));
}
// Add our marker cluster layer to the map
myMap.addLayer(markers);