サーバーなしでインタラクティブマップを作成する

GeoWebCacheとカスタムグリッドセットから作成されたタイルを使用して優れたWebマッピングアプリケーションを構築できましたが、ベースマップにオーバーレイを追加する必要があります。私が必要とする唯一の対話機能は、1つの属性のみから取得される単純なポップアップ情報ウィンドウです。

デフォルトでは、オーバーレイデータセットは180MbのESRIシェイプファイルです。それ以降、ESRIシェイプファイルのサイズを28Mbに落としたST_SimplifyPreserverTopologyを使用してデータセットを簡略化することに成功しました。ただし、GeoJSONファイルとしてこれはまだ78Mbであり、大きすぎます。

次に、CartoDBを試してテーブルにデータをロードし、openlayersにvectorlayerを追加しましたが、データ量がまだ多すぎてHTMLページがクラッシュしました。

次に、GISクラウドと外部WMSを試しましたが、これはWGS84に制限されており、getfeature infoオプションがありません。

次に、データセットで本当にうまくいくと思うTopojsonを検討し始めましたが、OpenLayers 2.12のマップにtopojsonをロードする方法が必要だとは思いません。

私の他のオプションはUTF-Gridだったので、タイルミルにデータをロードし、mbutilを使用して抽出できるMbTilesをエクスポートしました。しかしもちろん、UTF-GridはEPSG：3857（web mercator）のみをサポートしています。これは、私の投影EPSG：27700とは異なります。したがって、すべての.jsonファイルの名前は、geowebcacheの基になるキャッシュタイルとは異なります。

UTF-Gridを作成する方法はありますか？

それが背景であり、私が知っているほとんどのオプションを試したと感じています。

したがって、単純にOpenLayers 2.12マップにインタラクティブオーバーレイレイヤーが必要ですが、GeoServer / MapserverやTileStacheなどのサーバーを使用できず、PHPのようなサーバー側スクリプトを使用できません。

誰か他のアドバイスを提供できますか？

ありがとう

— tjmgis
ソース

topojsonはopenlayers 2.10で正常に動作します（実際にtopojsonを使用する前にgeojsonに変換します）。ただし、ほとんどのブラウザで処理するには大きすぎるため、問題は解決しません。

— johanvdw 2013年

国の郵便番号の集計エリアについては、d3js bl.ocks.org/mbostock/4965422 797Mシェープファイルを試してください。TopoJSONを使用して簡略化（-q 1e5 -s 3e-7を使用）

— Mapperz

@Mapperzは、印象的なサイズの削減です。topojsonは球形メルカトルとは異なる投影法になりますか？

— tjmgis 2013年

@johanvdw openlayersに読み込まれたtopojsonの例はありますか？

— tjmgis 2013年

Projection TopoJSON bl.ocks.org/mbostock/5557726

— Mapperz

回答:

私の元のコメントを拡大する：

topojsonはopenlayers 2.10で正常に動作します（実際にtopojsonをgeojsonに変換してから使用します）。しかし、ほとんどのブラウザで処理するには大きすぎる可能性があるため、問題が解決するかどうかはわかりません。openlayers geojsonの例と、ブログ投稿で使用したいくつかのデータに基づいて、openlayers 2でtopojsonを使用する例。

http://www.gisky.be/cyclists/ol-topojson.html

重要な実際のビットは2行目です。

    $.getJSON('http://www.gisky.be/cyclists/f.json', function (data) {
        fusiegem = topojson.feature(data, data.objects.fusie);
        var geojson_format = new OpenLayers.Format.GeoJSON();
        var vector_layer = new OpenLayers.Layer.Vector();
        map.addLayer(vector_layer);
        vector_layer.addFeatures(geojson_format.read(fusiegem));
    });

この行は、topojsonであるデータオブジェクトからgeojsonオブジェクト（fusiegem）を構築します。

— johanvdw
ソース

@johanvwdがD3とtopojsonの使用に失敗したため、例を試してみましょう。コードを追加していただきありがとう

— ござい

@johanvwd私はあなたのコードを修正し、それをうまく動かしましたが、1.4Mbのtopojsonでさえ、それはひどく遅く、8Mbを使用する必要があることは言うまでもありません。他の考えは??

— tjmgis 2013年

あとは、概観スケールをより一般化して、より低いスケールのタイルを操作するだけです。しかし、私はその仕事をするためのツールを知りません。近い将来登場するか、おそらくすでに存在していると思います。

— johanvdw 2013年

これはD3の仕事のように聞こえます-http://bl.ocks.org/mbertrand/5218300

— ChrisInCambo
ソース

D3は問題の解決にどのように役立ちますか？

— johanvdw 2013年

@ChrisInCambo-D3と私のtopojsonを機能させるのに苦労してきたが、私が求めていることを正確に実行する例に感謝します。別の質問を投稿しました

— tjmgis

TopoJSONのよくある間違いは、D3で使用するときにJSONの内部を調べず、構造を理解することです。サンプルコードをコピーしてTopoJSONを自分のものに置き換える場合は、TopoJSONで参照されるオブジェクトが実際にJSONにも存在することを確認する必要があります。

— ChrisInCambo 2013年

データをGeoJSONファイルに分割し、タイルに従って名前を付けることができます。マップが読み込まれたら、表示されているタイルをクエリし、その名前/ URL /座標を使用して、適切なGeoJSONファイルをリクエストし、タイルごとに1つのファイルを照合します。

難しいのはファイルの作成です。これには、必ずツールを使用する必要があります。ファイルが作成されると、必要に応じて、ブラウザーを圧倒しないような小さなチャンクでロードされます。ここでのもう1つの問題は、ズームレベルの処理です。どのレベルからどの機能を表示するかを決定し、それに応じてファイルを作成する必要があります。

— bstempi
ソース