MapboxにGeoJsonファイルをドラッグドロップで読み込むサンプル
はじめに
以前紹介したLeafletによるWebGISでは、GeoJSONファイルとシェープファイル(zip圧縮されたもの)の読み込みに対応していました。 ドラッグドロップすると、POSTリクエストが飛び、(シェープファイルなら変換されて)GeoJSON形式のオブジェクトがレスポンスされる仕組みでした。 しかしながらこの仕組みだと、Herokuサーバだったこともあり非常に動作が遅いという問題がありました。 今回はサーバを介さずGeoJSONファイルをマップに表示するサンプルを紹介します。
サンプル
firebaseを使っていますが、HostingのみなのでただのWebサーバです。 ここにGeoJSONファイルをドラッグドロップすると、それなりの速度で読み込みます。 読み込みが完了した後も、Leafletに比べMapboxは非常に高いパフォーマンスを発揮しヌルヌル動きます。
サーバーを介さず読み込む方法(File API)
以下のように、事前にドラッグドロップエリアを指定しておく
<div id='import_section' ondragover="onDragOver(event)" ondrop="onDrop(event)">
// Drop領域にドロップした際の処理 function onDrop(event) { // ドロップされたファイルのfilesプロパティを参照 var fileList = event.dataTransfer.files; for (var i = 0; i < fileList.length; i++){ //①FileReaderを初期化 var reader=new FileReader(); //②FileReaderの"onload"イベント時の処理を追加 reader.onload=function(e){ var geojson = JSON.parse(reader.result) var geojsonType = "" if (geojson.type == "FeatureCollection"){ geojsonType = geojson.features[0].geometry.type }else{ geojsonType = geojson.geometry.type } layerType = classfyLayerType(geojsonType) addGeoJsonLayer(JSON.parse(reader.result), type=layerType, filename=file.name); }; //③FileReaderのreadAsText()を実行、完了時に"onload"イベントが発火する reader.readAsText(file); } }
データをJavaScriptで読み込む方法は①②③のとおりです。サーバやフォームを介さずに読み込めています。
reader.readAsText(file);
ここで、ドロップされたfileを文字列として読み込み、完了時に発火するonloadイベントでgeojson形式のJavaScriptオブジェクトへパースし、その後の処理に繋げています。 readerのonloadイベントを予め設定したうえでreadAsText()を実行するので、コードの見た目と処理順が逆になり若干わかりにくいです。 ともかく、geojson形式のオブジェクトであれば、LeafletやMapboxで簡単に読み込めますね(以下Leafletについて参考)。