我想加载一个 json 文件并将其附加到 Leaflet-Map。
<input type='file' accept='Json' onchange='loadFile(event)'>
上传后，我很难处理 JSON 文件的内容。 一个 JSON 文件的例子是:
{
"type": "FeatureCollection",
"features":
[
{
"type": "Feature",
"properties": {
"name": "Lagoa Stadium",
"coordinate":"-22.975801, -43.217316",
"venue_type": "Outdoor area",
"event": [{"name":"Canoe Sprint","date_start":"2016-08-15", "date_end":"2016-08-20"},
{"name":"Rowing","date_start":"2016-08-6", "date_end":"2016-08-13"}],
"link": "https://www.rio2016.com/en/venues/lagoa-stadium",
"images":["http://secure.rio2016.com/sites/default/files/imagecache/360x270_maps_cities/lagoa_aereas_secao01_alexferro_05032015-9156_1.jpg", "https://upload.wikimedia.org/wikipedia/commons/6/6a/1_lagoa_rodrigo_de_freitas_rio_de_janeiro_2010.jpg","http://www.rio-de-janeiro-travel-information.com/images/marina-da-gloria-rio-de-janeiro-2016-olympics.jpg"],
"capacity": "14,000",
"parking": "-22.983465, -43.198912"
},
"geometry":
{
"type": "Polygon",
"coordinates": [
[
[
-43.21497917175292,
-22.979493188378516
],
[
-43.21643829345703,
-22.9790190701661
],
[
-43.21772575378418,
-22.97870299043356
],
[
-43.217811584472656,
-22.977596705547032
],
[
-43.21695327758788,
-22.976411390260754
],
[
-43.2161808013916,
-22.975068020367633
],
[
-43.21592330932617,
-22.971828073334315
],
[
-43.216352462768555,
-22.970089533152084
],
[
-43.21738243103027,
-22.968667074553263
],
[
-43.21703910827637,
-22.967323627688746
],
[
-43.21566581726074,
-22.96558502957624
],
[
-43.21446418762207,
-22.96432058054304
],
[
-43.212318420410156,
-22.96337223600826
],
[
-43.21051597595215,
-22.962977090489098
],
[
-43.20914268493652,
-22.96313514883533
],
[
-43.2063102722168,
-22.962819031958123
],
[
-43.20510864257812,
-22.96305611968531
],
[
-43.204078674316406,
-22.964083495032888
],
[
-43.20356369018555,
-22.966138222309887
],
[
-43.20356369018555,
-22.96740265434445
],
[
-43.20845603942871,
-22.971828073334315
],
[
-43.207340240478516,
-22.974830953706174
],
[
-43.204593658447266,
-22.973803660034452
],
[
-43.201160430908196,
-22.974830953706174
],
[
-43.20047378540039,
-22.97609530442847
],
[
-43.20004463195801,
-22.97751768485142
],
[
-43.20124626159668,
-22.978623970384902
],
[
-43.202362060546875,
-22.979256129480273
],
[
-43.207426071166985,
-22.980441419812312
],
[
-43.214378356933594,
-22.980125343407142
],
[
-43.21497917175292,
-22.979493188378516
]
]
]
}
}
]
}
如何读出这个文件的内容并将其加载到我的 map 中？
我设法使用这个加载了我服务器上的 JSON 文件:
$.getJSON('CompleteList.json', function (geojson) {
jsonlayer = L.geoJson(geojson, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.name);
}
}).addTo(map);
现在我加载了文件并将其保存在变量中......但是现在呢？
var loadFile = function(event) {
// Init
var input = event.target;
var reader = new FileReader();
// Read the file
reader.readAsText(input.files[0]);
// Invoked when file is loading.
reader.onload = function(){
// parse file to JSON object
var jsonObject = reader.result;
console.log(jsonObject);
};
};
我希望我没有遗漏任何东西并且这不是一个太愚蠢的问题 :D
发布我的整个项目的代码太多了，但现在它看起来像这样:
最佳答案
我想一旦你包含了 Leaflet-Map 库，JSON 对象就会有函数 addTo()，所以你需要先解析 json 对象。
var loadFile = function(event) {
// Init
var input = event.target;
var reader = new FileReader();
// Read the file
reader.readAsText(input.files[0]);
// Invoked when file is loading.
reader.onload = function(){
// parse file to JSON object
var jsonObject = reader.result;
var json = JSON.parse(jsonObject);
jsonlayer = L.geoJson(json, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.name);
}).addTo(map);
console.log(jsonObject);
};
};
关于javascript - 加载 JSON 文件并将其附加到 map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39120458/