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 字串。

在網站上託管以下 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，通常為「衛星」樣式。
beforeStyleAccessToken	「之前」地圖樣式的地圖框存取令牌。
beforeStyleBeforeLayerId	在「之前」地圖樣式中要插入「之後」地圖圖層的圖層 ID。它通常是緊鄰柵格圖層上方的圖層。
sourceTiles	地圖圖塊的 URL。
sourceTileScheme	地圖圖塊的架構。 "xyz"或"tms" 。
sourceTileSize	地圖圖塊的影像大小（以像素為單位）。
sourceMinZoom	地圖圖塊的最小縮放等級。
sourceMaxZoom	地圖圖塊的最大縮放等級。
sourceBounds	地圖圖塊的邊界框。順序為：左經度、下緯度、右經度、上緯度。
referencePhotoImageUrl	載入地圖之前顯示的預覽圖像的 URL。

建立 JSON 後，您有兩個選擇：

• 將 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

測試

若要執行端對端測試，請在一個控制台中執行：

$ npm run build:test
$ npm run serve

build:test將使用來源映射來建立應用程序，這將允許稍後進行程式碼覆蓋。

然後在不同的控制台中運行：

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

程式碼覆蓋率會自動生成，可以在coverage/中查看。

若要查看瀏覽器中實際執行的 cypress 測試，請執行：

$ npx cypress open