1

Webアプリケーションでオフラインマップを提供するためのこの非常に基本的な要件があります。私のWebアプリケーションはインターネットにアクセスできないため、地図を表示するためのすべてのオンラインAPIが完全に除外されています。

調査を行った後、目的の場所（特定の都市を言う）の.osm.pbf形式のファイルをダウンロードしました。私

.osm.pbfを.osmファイルに変換

次のステップでは、この.osmファイルを使用してタイルを生成しました。

タイルは私のローカルディレクトリに保存されています。

最後のステップは、これらのタイルをアプリケーション（Java EE）内のWebブラウザーにマップとして表示し、場所の緯度と経度を指定してマーカーを配置することです。

これは、オフラインマップ内に表示する必要がある唯一の要件です。

特定の都市のタイルを持っていますが、それを使用してオフラインマップを表示する方法がわかりません。

オフラインという用語は、アプリケーションがアプリケーションサーバー上のイントラネットでホストされ、いかなる状況でもインターネットアクセスが提供されないことを意味します。

親切にご案内します。

4

2 に答える 2

1

まず、アプリケーション内にダウンロードして常駐できるマッピング ライブラリが必要です。いくつかありますが、最も一般的なものはLeafletとOpenLayersです。どちらもカス​​タム タイル レイヤーをサポートしています。

たとえば、タイルが Web アプリケーション内の「tiles」というフォルダーにあると仮定すると、可能なレイヤー定義は (リーフレットで) 次のようになります。

var map = L.map('map');
L.tileLayer('tiles/{z}/{x}/{y}.png').addTo(map);

またはイントラネット内の他のマシンでも

var map = L.map('map');
L.tileLayer('http://intranetmachine/tiles/{z}/{x}/{y}.png').addTo(map);
于 2012-12-05T09:55:28.613 に答える
1

あなたはほとんどそこにいます。

リーフレットの .js および .css ファイルをローカルに保存します。

この基本的な例のソース コードを参照してください: http://leafletjs.com/examples/quick-start-example.html

説明に従って、.css、.js パスをローカル コピーに変更し、tileLayer パスをローカルに変更します。

マーカーのコードを参照してください。

L.marker([51.5, -0.09]).addTo(map)
            .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

それがあなたが必要としているものだと思います。必要に応じて、他のポリゴンと click-show-lat-long 関数を削除します。

マップを全画面表示にしたい場合は、<div..タグを 100% に変更します。

<div id="map" style="width: 100%; height: 100%"></div>
于 2015-01-12T05:45:07.347 に答える