map tile compare

マップタイル比較

タイル レイヤーと背景の衛星レイヤーを比較するための単一ページの Web アプリケーション。

デモ

マップタイル比較デモ.mp4

実際の例

• エジンバラ、スコットランド
• エジンバラ、スコットランド (夕暮れ時)
• ブロックスバーン、スコットランド
• ケテルメール、オランダ
• マーカー・ワッデン、オランダ
• コブレンツ、ドイツ
• ドイツとオランダの国境

アプリのインストール

このリポジトリのクローンを作成した後、次を実行します。

$ cd map-tile-compare
$ npm install
$ npm run build
$ npm run serve

これにより、ローカルホスト サーバー (通常はhttp://localhost:5000が起動します。

ページを読み込むには、構成ファイルの URL を URL に追加する必要があります。

 http://localhost:5000/#https://example.com/path/to/config.json

マップ構成の作成

マップ データは、URL のハッシュに保存された圧縮された JSON 文字列です。

Web サイトで次の JSON ファイルをホストし、選択したように各プロパティを更新します。

{
  "name" : " London " ,
  "beforeStyle" : " mapbox://styles/mapboxUsername/styleId " ,
  "beforeStyleAccessToken" : " xx.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxxx-xxxxxxxx " ,
  "beforeStyleBeforeLayerId" : " tunnel-street-minor-low " ,
  "sourceTiles" : " https://example.com/tiles/{z}/{x}/{y}.png " ,
  "sourceTileScheme" : " tms " ,
  "sourceTileSize" : 256 ,
  "sourceMinZoom" : 9 ,
  "sourceMaxZoom" : 15 ,
  "sourceBounds" : [ -0.234 , 51.454 , -0.025 , 51.562 ],
  "referencePhotoImageUrl" : " https://example.com/previewImage.jpg "
}

以下の表は、各プロパティの意味を説明しています。

財産	説明
name	マップの名前。これはスプラッシュ画面に表示されます。
beforeStyle	「前」マップのマップボックス スタイル URL (通常は「Satellite」スタイル)。
beforeStyleAccessToken	「前」のマップ スタイルのマップボックス アクセス トークン。
beforeStyleBeforeLayerId	「後」のマップ レイヤーを挿入する「前」のマップ スタイル内のレイヤー ID。通常、これはラスター レイヤーのすぐ上のレイヤーです。
sourceTiles	マップ タイルへの URL。
sourceTileScheme	マップ タイルのスキーマ。 "xyz"または"tms"のいずれか。
sourceTileSize	マップ タイルの画像サイズ (ピクセル単位)。
sourceMinZoom	マップ タイルの最小ズーム レベル。
sourceMaxZoom	マップタイルの最大ズームレベル。
sourceBounds	マップ タイルの境界ボックス。左経、下緯度、右経度、上緯度の順です。
referencePhotoImageUrl	マップをロードする前に表示するプレビュー画像の URL。

JSON を作成した後、次の 2 つのオプションがあります。

• JSON を外部ホストに保存します。
• JSON ファイルをpublic/ディレクトリに保存し、 npm run buildを実行します。ファイルにはhttp://localhost:5000/yourConfig.json経由でアクセスできます。

JSON への URL を取得し、アプリのホスト URL に追加します。

 http://locahost:5000/#http://localhost/5000/config.json

発達

$ npm run dev

糸くず

$ npm run lint

テスト

エンドツーエンドのテストを実行するには、1 つのコンソールで次のコマンドを実行します。

$ npm run build:test
$ npm run serve

build:testソースマップを使用してアプリをビルドします。これにより、後でコード カバレッジが可能になります。

次に、別のコンソールで次を実行します。

$ export CYPRESS_MAP_TILE_COMPARE_HOST= ' http://localhost:5000/ '
$ npm run test:e2e

コード カバレッジは自動的に生成され、 coverage/で表示できます。

ブラウザで実際に実行されているサイプレス テストを確認するには、次のコマンドを実行します。

$ npx cypress open