JSONファイルを読み込んでマップに追加します

Question

jsonファイルを読み込んでリーフレットマップに追加します。

<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 
       ] 
       ] 
      ] 
     } 
    } 
    ] 
} 

？
は 私はこれを使って、私のサーバー上にある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

は、私のプロジェクト全体を投稿するあまりにも多くのコードですが、今、それは次のようになります。

Answer 1

一度リーフレットマップライブラリを組み込むと、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); 

}; 
}; 

Answer 2

ユーザーファイルの内容をテキストとして正常に読み取ることができました。

このテキストをJSオブジェクト（実際にはGeoJSONに変換しますが、具体的な規約に従った単純なJSオブジェクトです）に変換する必要があります。

そのためには、単にJSON.parse()を使用してください。

それから、リーフレットL.geoJson()工場に送ることができます。