map tile compare

지도 타일 비교

타일 ​​레이어를 배경 위성 레이어와 비교하기 위한 단일 페이지 웹 애플리케이션입니다.

데모

지도 타일 비교-demo.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	'이전' 지도 스타일에 대한 mapbox 액세스 토큰입니다.
beforeStyleBeforeLayerId	'이후' 지도 레이어를 삽입하려는 '이전' 지도 스타일 내의 레이어 ID입니다. 일반적으로 래스터 레이어 바로 위에 있는 레이어입니다.
sourceTiles	지도 타일의 URL입니다.
sourceTileScheme	지도 타일의 스키마입니다. "xyz" 또는 "tms" 입니다.
sourceTileSize	지도 타일의 이미지 크기(픽셀)입니다.
sourceMinZoom	지도 타일의 최소 확대/축소 수준입니다.
sourceMaxZoom	지도 타일의 최대 확대/축소 수준입니다.
sourceBounds	지도 타일의 경계 상자입니다. 왼쪽 경도, 위도 아래, 오른쪽 경도, 위도 순서입니다.
referencePhotoImageUrl	지도를 로드하기 전에 표시할 미리보기 이미지의 URL입니다.

JSON을 생성한 후에는 두 가지 옵션이 있습니다.

• JSON을 외부 호스트에 저장합니다.
• public/ 디렉터리에 JSON 파일을 저장하고 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