Labo288

プログラミングのこと、GISのこと、パソコンのこと、趣味のこと

MapboxにGeoJsonファイルをドラッグドロップで読み込むサンプル

はじめに

www.labo288.site

以前紹介したLeafletによるWebGISでは、GeoJSONファイルとシェープファイル(zip圧縮されたもの)の読み込みに対応していました。 ドラッグドロップすると、POSTリクエストが飛び、(シェープファイルなら変換されて)GeoJSON形式のオブジェクトがレスポンスされる仕組みでした。 しかしながらこの仕組みだと、Herokuサーバだったこともあり非常に動作が遅いという問題がありました。 今回はサーバを介さずGeoJSONファイルをマップに表示するサンプルを紹介します。

サンプル

vanillagis.web.app

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について参考)。

www.labo288.site