html - OpenLayers で HTML5 を使用してローカル ファイルをレンダリングする

Question

ユーザーがサーバー側に送信せずにファイルを追加できる HTML5 の FileSystem,FileAccess 機能の例がいくつかあります。

OpenLayers を使用してマッピング アプリケーションを開発しています。この機能を追加して、ユーザーが kml ファイルをドラッグ アンド ドロップするか、ダイアログから kml ファイルを選択して、ローカルにマップに追加できるようにしたいと考えています。

この動作は OpenLayers で可能ですか? もしそうなら、どのように？

Answer 1

このデモからの抜粋:

http://jsfiddle.net/AbdiasSoftware/t42cu/

（拡張子とファイルサイズのチェックで更新されたフィドル）。

HTML でドロップ領域を定義します。

<div id="fileDrop">Drop KML file here</div>

必要に応じてスタイルを設定します:

#fileDrop {
    padding:20px;
    text-align:center;
    border:3px dashed #777;
    border-radius:12px;
    opacity:0.5;
    color:#fff;
    }
#fileDrop:hover {
    background-color:rgba(255,255,255,0.7);
    }

ファイルのドラッグ アンド ドロップを有効にするには、次のコードを使用できます。

var fileDrop = document.getElementById('fileDrop');
fileDrop.addEventListener('dragover', fileDragOver, false);
fileDrop.addEventListener('drop', fileSelect, false);

// change style of the drop area when file is over
function fileDragOver(e) {
    e.stopPropagation();
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
}

//load file on drop
function fileSelect(e) {

    e.stopPropagation();
    e.preventDefault();

    var files = e.dataTransfer.files,
        f = files[0],
        reader,

        fname = f.name.toLowerCase(),
        fsize = f.size,

        maxSize = 1024 * 1024; // 1mb

    /// Check file extension and file size
    if (fname.length < 5 || fname.substring(fname.length - 4) !=='.kml') {
        alert('Need a .kml file!');
        return;
    }

    if (fsize > maxSize) {
        alert('File is too big!');
        return;
    }

    reader = new FileReader(),

    reader.onload = function(fe) {

        var kml = fe.target.result; // the file
        gotoOpenLayer(kml);

    }
    reader.readAsText(f);
}

このgotoOpenLayer関数では、ファイルを に変換してから に変換しBlobますobjectURL。

function gotoOpenLayer(kml) {

    var blob = new Blob([kml], {type: 'text/plain'});
    var lnk = window.URL.createObjectURL(blob);

    /// pass in lnk as url or kml as string to OpenLayers

    // ....
}

URL の読み込みと文字列の受け渡しの両方の例を見つけました。

Blob URL の使用 -

var map = new OpenLayers.Map({
    div: "map",
    layers: [
        new OpenLayers.Layer.WMS(
            "WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0",
            {layers: "basic"}
        ),
        new OpenLayers.Layer.Vector("KML", {
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({

                url: lnk, /// url goes here

                format: new OpenLayers.Format.KML({
                    extractStyles: true, 
                    extractAttributes: true,
                    maxDepth: 2
                })
            })
        })
    ],
    center: new OpenLayers.LonLat(-112.169, 36.099),
    zoom: 11
});

または、ロードされたファイルを文字列として渡すことによって:

function getFeaturesFromKMLString (kml) {
    var format = new OpenLayers.Format.KML({
        'internalProjection': myMapObject.baseLayer.projection,
        'externalProjection': new OpenLayers.Projection("EPSG:4326")
    });
    return format.read(kml);
};

// ...
myVectorLayer.addFeatures(getFeaturesFromKMLString(kml));