Используйте возможности локального хранилища браузера для создания временного настраиваемого приложения для автономных опросов.
Недавно я разрабатывал приложение для геодезической компании, работа которой больше сосредоточена на лесах и деревнях, чем на городских территориях. Мы разработали приложение со всеми основными функциями, такими как возможность переключения различных базовых карт, от вида улиц до вида со спутника. Возможность для пользователя добавлять геометрию на карту (точка, многоточечная, линейная, многострочная, многоугольная, многополигональная и т. Д.), А затем сохранять ее в центральной базе данных вместе с информацией, которую пользователь будет заполнять после завершения рисования и перед нажатием кнопки отправки.
Хотя одна проблема осталась нерешенной, то есть возможность оставаться в автономном режиме и по-прежнему перемещаться по местам, точно отмечать геометрию и перекрестно проверять ее с той, что на базовой карте. Все мы знаем, что когда мы масштабируем, сжимаем или перетаскиваем карту, новый набор png s запрашивается на сервере для загрузки и отображения на карте, что, конечно, требует активного подключение к Интернету, и, помимо этого, следующей задачей было сохранить где-то всю нарисованную геометрию и связанную с ней информацию, а затем вызвать ее при следующем подключении устройства к Интернету. И последняя задача заключалась в том, чтобы сохранить данные слоев, видимые нам (поступающие с серверов) для данной карты, таким образом, чтобы мы могли видеть их даже при отключении от сервера (переходите в автономный режим!)
Хватит проблем, приступим к решению !!
Для базовой карты
Базовая карта - это изображения .png, поступающие с сервера, это означает, что если мы сможем сохранить эти изображения с некоторыми метаданными о местоположении и уровне масштабирования, мы сможем их вызвать и отобразить на карте. Для этого выполните следующие действия:
- Создайте исходный код OSM, как обычно:
osmsource = new ol.source.OSM (); - Создайте кнопку, которая будет запускать функцию, в которой мы будем собирать информацию, такую как текущий уровень масштабирования, экстент карты и т. Д.
Это сохранит все плитки в локальном хранилище, как это, и будет там, пока мы не выполним жесткую перезагрузку или не очистим хранилище.
🥳🥳 Поздравляю, вы на полпути
Теперь, когда данные сохранены в localStorage, вам больше не нужно добавлять слой на карту с источником как ol.source.OSM (), вы можете получить эти плитки из localStorage следующим образом:
Вот как вы можете кэшировать плитки в localStorage и использовать, когда вы не подключены к Интернету.
Для слоев, поступающих с серверов или API (например, геосервера)
Обычно при обращении к серверам у вас остаются данные JSON (в данном случае GeoJSON), которые вы можете сохранить в localStorage в формате sting с помощью JSON.Stringify (). Вам не обязательно сохранять полные данные geojson, так как вы можете передать фильтр bbox на ссылку API, которая будет извлекать только данные, которые находятся внутри экстента карты, которую вы хотите кэшировать. Таким образом, в хранилище будет сохранено очень мало данных.
Точно так же вы можете использовать эти данные (после обновления веб-страницы), преобразовав их в объект с помощью JSON.parse () и создав слой GeoJSON на лету, как это
Для нарисованной геометрии
Метод работы с нарисованной геометрией почти аналогичен слою GeoJSON, здесь мы добавим сохранение в функцию localStorage в методе 'drawend' и аналогичным упомянутым методом как указано выше, мы его вспомним.
Обновления, которых вы можете ожидать
До этого момента мы можем получить все желаемые данные в автономном режиме. Теперь вопрос в том, как сделать так, чтобы пользователь не почувствовал никакой разницы между приложением, независимо от того, подключен ли он к Интернету или нет, а это означает, что нам нужно будет написать функцию, которая будет стилизовать GeoJSON, которые мы получаем из localStorage.
Я работаю над кодом, и если это небольшой фрагмент, я обновлю его здесь или, если необходимо, я напишу для него другой блог.
Обо мне 🙋♂️
Привет, я Кришна Лодха, я разработчик веб-ГИС полного цикла. Я в восторге от силы локаций и их истории. Прочтите обо мне на https://krishnaglodha.github.io/me/, чтобы получить больше информации об этом коде или предложить лучший способ сделать это. свяжитесь со мной в LinkedIn по адресу https://www.linkedin.com/in/krishnaglodha/
Прощай!
