map tile compare

perbandingan peta-ubin

Aplikasi web satu halaman untuk membandingkan lapisan ubin dengan lapisan satelit latar belakang.

Demo

peta-ubin-bandingkan-demo.mp4

Contoh langsung

• Edinburgh, Skotlandia
• Edinburgh, Skotlandia (Saat senja)
• Broxburn, Skotlandia
• Ketelmeer, Belanda
• Marker Wadden, Belanda
• Koblenz, Jerman
• Perbatasan Jerman/Belanda

Menginstal aplikasi

Setelah mengkloning repositori ini, jalankan:

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

Ini harus memulai server localhost, biasanya http://localhost:5000 .

Agar halaman dapat dimuat, Anda harus menambahkan URL ke file konfigurasi ke URL.

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

Membuat konfigurasi peta

Data peta adalah string JSON terkompresi yang disimpan dalam hash URL.

Host file JSON berikut di situs web dan perbarui setiap properti sesuai pilihan Anda:

{
  "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 "
}

Tabel di bawah ini menjelaskan arti dari masing-masing properti:

Milik	Keterangan
name	Nama petanya. Ini ditampilkan di layar splash.
beforeStyle	Url gaya kotak peta untuk peta "sebelum", biasanya gaya "Satelit".
beforeStyleAccessToken	Token akses kotak peta untuk gaya peta "sebelum".
beforeStyleBeforeLayerId	Id lapisan dalam gaya peta "sebelum" tempat Anda ingin menyisipkan lapisan peta "setelah". Biasanya lapisan ini berada tepat di atas lapisan raster.
sourceTiles	URL ke petak peta Anda.
sourceTileScheme	Skema petak peta Anda. Entah "xyz" atau "tms" .
sourceTileSize	Ukuran gambar petak peta Anda dalam piksel.
sourceMinZoom	Tingkat zoom minimum ubin peta Anda.
sourceMaxZoom	Tingkat zoom maksimum ubin peta Anda.
sourceBounds	Kotak pembatas petak peta Anda. Urutannya: bujur kiri, lintang bawah, bujur kanan, dan lintang atas.
referencePhotoImageUrl	URL ke gambar pratinjau untuk ditampilkan sebelum memuat peta.

Setelah membuat JSON, Anda memiliki dua opsi:

• Simpan JSON di host eksternal.
• Simpan file JSON di direktori public/ dan jalankan npm run build . File tersebut kemudian dapat diakses melalui http://localhost:5000/yourConfig.json .

Ambil URL ke JSON dan tambahkan ke URL host aplikasi.

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

Perkembangan

$ npm run dev

Linting

$ npm run lint

Tes

Untuk menjalankan pengujian ujung ke ujung, dalam satu konsol jalankan:

$ npm run build:test
$ npm run serve

build:test akan membangun aplikasi dengan peta sumber, yang nantinya memungkinkan cakupan kode.

Kemudian di konsol lain, jalankan:

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

Cakupan kode akan dihasilkan secara otomatis, dan dapat dilihat di coverage/ .

Untuk melihat tes cypress benar-benar berjalan di browser, jalankan:

$ npx cypress open