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

Создание конфигурации карты

Данные карты представляют собой сжатую строку JSON, хранящуюся в хеше URL-адреса.

Разместите следующий файл 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	Идентификатор слоя в стиле карты «до», куда вы хотите вставить слой карты «после». Обычно это слой непосредственно над растровым слоем.
sourceTiles	URL-адрес ваших фрагментов карты.
sourceTileScheme	Схема для ваших фрагментов карты. Либо "xyz" либо "tms" .
sourceTileSize	Размер изображения фрагментов карты в пикселях.
sourceMinZoom	Минимальный уровень масштабирования фрагментов карты.
sourceMaxZoom	Максимальный уровень масштабирования фрагментов карты.
sourceBounds	Ограничивающая рамка фрагментов карты. В порядке: левая долгота, нижняя широта, правая долгота, верхняя широта.
referencePhotoImageUrl	URL-адрес изображения предварительного просмотра, которое будет отображаться перед загрузкой карты.

После создания JSON у вас есть два варианта:

• Сохраните JSON на внешнем хосте.
• Сохраните файл JSON в каталоге public/ и запустите npm run build . Доступ к файлу можно получить через http://localhost:5000/yourConfig.json .

Получите URL-адрес в формате JSON и добавьте его к 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/ .

Чтобы увидеть, как кипарисовые тесты действительно выполняются в браузере, запустите:

$ npx cypress open