@ -58,7 +58,7 @@ import Question from '../../../components/Question.astro';
Реальная практика показывает, что сфера интересов веб-картографии не ограничивается изучаением процесса веб-картографирования. Это направление на пересечении картографии, геоинформатики и сетевых технологий.
Веб-картография изучает особенности оборота пространственных данных в сетевой среде. Так как эти особенности проявляются на всех этапах жизненного цикла веб-карты, то и в область интересов веб-картографии входит вся система создания-использования карт от сбора данных до чтения веб-карты пользователем. Внимание уделяется хранению, кодированию, передаче, обработке пространственных данных в сетевой среде, каталогизации и организации поиска пространственных данных, методологии разработки картографических веб-приложений, методам визуализации и интерактивного взаимодействия.
@ -67,3 +67,7 @@ import Question from '../../../components/Question.astro';
Веб-картография формируется на пересечении сетевых технологий, картографии и геоинформатики изучает особенности оборота пространственных данных в сетевой среде, включая хранение, кодирование, передачу, обработку данных, разработку веб-приложений и другие аспекты.
</Card>
---
Титов Г. С. Введение в веб-картографию / Веб-картография : материалы курса. Москва, 2025.
Инерактивность подразумевает возможность пользователя перемещаться по карте, менять масштаб, получать подробную информацию по клику, скрывать слои, менять цвета и так далее. Неинтерактивные карты лишены этих возможностей. Но неинтерактивная карта будет веб-картой, если предназначена для использования в Интернете.
@ -50,15 +50,13 @@ import Question from '../../../components/Question.astro';
Интерактивность касается интерфейса и клиентской части, а деление на статические и динамические веб-карты связано с обработкой данных в серверной части.
Пользователь вводит адрес запрашиваемого веб-ресурса в адресную строку браузера и нажимает клавишу Enter (1). Браузер инициирует и выполняет запрос к серверу на получение данных для создания веб-страницы (2). Сервер возвращает ответ (3). Из этого ответа браузер формирует веб-страницу, которую видит пользователь (4).
@ -423,4 +421,4 @@ map.on('load', () => {
---
Титов Г. С. Введение в веб-картографию
Титов Г. С. Введение в веб-картографию / Веб-картография : материалы курса. Москва, 2025.
@ -24,6 +24,8 @@ API обычно переводят как прикладной программ
> ...клиент (браузер) обращается к серверу с запросом, сервер возвращает клиенту ответ
Откуда браузер знает, куда обращаться? Мы написали. А откуда мы знаем? Мы знаем, потому что ожидаем, что при обращении к определённому *адресу* (URL) нам вернётся определённый ответ. Например, при обращении за файлом `style.css` мы получим стили.
<Card title="API">Совокупность *адресов* (URL) и правил обращения к ним называется API. Отдельные адреса называются методами API или, в обиходе, ручками API.</Card>
@ -350,15 +352,21 @@ map.on("load", () => {
})
```
## Что мы получили
Проделана прекрасная работа!
При желании посмотрите [полный код](https://github.com/gtitov/sheet-maplibre-map) и [возможный результат](https://gtitov.github.io/sheet-maplibre-map/).
## Упражнения
1. Сделайте, чтобы до первого перемещения карты список вакансий "Сейчас на карте" тоже был заполнен
1. Поменяйте местами списки
1. Сделайте так, чтобы цвет кластера зависел от количества элементов внутри него
2. Сделайте так, чтобы цвет кластера зависел от количества элементов внутри него
3. Сделайте, чтобы до первого перемещения карты список вакансий "Сейчас на карте" тоже был заполнен
<details>
<summary>Подсказка для третьего 🧙♂️</summary>
Можно использовать метод <code>map.on("idle", () => \{\})</code>
Мы уже знаем, что веб-приложения можно разделить на клиентскую и серверную части. Разработку клиентской части называют фронтендом. Разработку серверной части называют бэкендом. Фронтенд общается с бэкендом через API. Бэкенд предоставляет метода API, а фронтенд к ним обращается.
Когда происходит вызов метода API -- запрос определённого URL -- выполняется соответствующая серверная функция. Для программирования серверных функций могут использоваться различные языки программирования Python, Go, Rust и даже JavaScript (NodeJS).
В предыдущем занятии мы обращались к бэкенду через API, а в этот раз разработаем бэкенд сами. Наш бэкенд мы разработаем на языке Python с использованием библиотеки Flask.
@ -331,6 +333,14 @@ map.on("load", () => {
> Если вы уже заметили кое-какую нестыковку в наших запросах, посмотрите упражнения в конце главы
## Что мы получили
Наши карты становятся всё лучше!
При желании посмотрите [полный код](https://github.com/gtitov/flask-maplibre-map) и [возможный результат](https://gtitov.github.io/flask-maplibre-map/).
## Упражнения
1. Создайте метод, который вернёт список доступных годов
@ -344,4 +354,8 @@ map.on("load", () => {
## Чтение
1. Что такое CORS / Дока [ссылка](https://doka.guide/tools/cors/)
1. Безопасность веб-приложений и распространённые атаки / Дока [ссылка](https://doka.guide/tools/web-security/)
1. Безопасность веб-приложений и распространённые атаки / Дока [ссылка](https://doka.guide/tools/web-security/)
---
Титов Г. С. Введение в веб-картографию / Веб-картография : материалы курса. Москва, 2025.
В прошлом упражнении мы сами разработали бэкенд для передачи пространственных данных из базы в браузер пользователю. Обычно для таких операций пользуются готовыми инструментами и устоявшимися подходами. Одним из таких подходов является применение тайлов.
Пространственные данные могут быть большими по объёму. Если пользователь хочет посмотреть на веб-карту передавать ему гигабайты данных, мягко говоря, неоптимально. Это приведёт к длительной загрузке веб-страницы, избыточному трафику, медленной работе веб-карты или падению браузера.
Данные можно поделить на кусочки и передавать пользователю только *нужные кусочки* с *нужной детальностью*. Данные можно поделить на кусочки по-разному. Пространственные данные ожидаемо удобно делить на географические кусочки — тайлы. *Нужные кусочки* -- те, что попадают на экран. *Нужная детальность* -- та, что соответствует текущему масштабу карты.
@ -201,7 +206,7 @@ map.addLayer({
})
```
Слой с точками населённых пунктов покажем пунсонами с обводкой.
Слой с точками населённых пунктов покажем кружками с обводкой.
Для подключения растровых тайлов укажем тип источника `raster`
При добавлении слоя параметры оформления не указываем.
*/}
## Что мы получили
Получилась просто отличная карта!
При желании посмотрите [полный код](https://github.com/gtitov/martin-maplibre-map) и [возможный результат](https://gtitov.github.io/martin-maplibre-map/).
## Упраженения
1. Подсветка при клике */}
1. Сделайте так, чтобы при наведении курсора точки ойконимов становились немного большинстве
1. Добавьте на карту инструмент фильтрации населённых пунктов по первой букве названия
Не хватало работы с сервером, но это навык, который лучше всего осваивать через самостоятельную практику
Сквозь призму практических упражнений мы рассмотрели основные принципы функционирования картографических веб-приложений. К сожалению, а, скорее, всё же к счастью, сфера веб-картографии крайне разнообразна. Освоенный вами материал станет опорой на любом из путей развития в сфере веб-картографии.
---
Титов Г. С. Введение в веб-картографию / Веб-картография : материалы курса. Москва, 2025.
В этом разделе содержатся дополнительные материалы
## Другие продукты веб-картографии
## Кроме веб-карт
Определения для продуктов веб-картографии можно получить, добавляя к традиционному определению ГИС, глобуса, атласа “предназначенный для использования в Интернете” или “в компьютерных сетях”. Тогда отличие между, например, веб-ГИС и веб-атласом становится очевидным.
Определения для продуктов веб-картографии можно получить, добавляя к традиционному определению ГИС, глобуса, атласа “**предназначенный для использования в Интернете**” или “**в компьютерных сетях**”.
Тогда отличие между, например, веб-ГИС и веб-атласом становится очевидным.
> Веб-ГИС должна не только визуализировать данные, но и реализовывать функции хранения, передачи, обработки пространственных данных
Отдельно стоит упомянуть геопортал и картографические веб-сервисы. Их мы формируем от родовых IT-терминов приземляя к картографии и пространственным данным. *Геопортал* — это веб-ресурс, предоставляющий доступ к каталогам пространственных данных, наборам пространственных данных, веб-сервисам, публикующим пространственные данные. *Картографический веб-сервис* — это веб-ресурс, предоставляющий возможности обращения к пространственным данным или метаданным, в т. ч. по стандартизированным протоколам обмена (WMS, WFS, WCS и т. д.). Картографические веб-сервисы обычно не имеют графического интерфейса пользователя, к этим сервисам обращаются программно через API (прикладной программный интерфейс).
Отдельно стоит упомянуть геопортал и картографические веб-сервисы. Их мы формируем от родовых IT-терминов приземляя к картографии и пространственным данным.
*Геопортал* — это веб-ресурс, предоставляющий доступ к каталогам пространственных данных, наборам пространственных данных, веб-сервисам, публикующим пространственные данные.
*Картографический веб-сервис* — это веб-ресурс, предоставляющий возможности обращения к пространственным данным или метаданным, в т. ч. по стандартизированным протоколам обмена (WMS, WFS, WCS и т. д.). Картографические веб-сервисы не имеют графического интерфейса, к этим сервисам обращаются программно через API (прикладной программный интерфейс).
Этими терминами злоупотребляют по отношению к любым веб-ресурсам, связанным с пространственными данными и картами. Картографические продукты, публикуемые в сети, правильнее объединить под названием *картографические веб-ресурсы*, так как они являются веб-ресурсами, основным назначением которых является предоставление доступа к картографической информации.
Этими терминами злоупотребляют по отношению к любым веб-ресурсам, связанным с пространственными данными и картами. Правильнее объединить картографические продукты, публикуемые в сети, под названием *картографические веб-ресурсы*. Они являются веб-ресурсами, основным назначением которых является предоставление доступа к картографической информации.
## Зум, детальность, масштаб
Вопрос о сопоставлении уровня зума, детальности данных и масштаба карты можно отнести к дискуссионным. Однако в прикладных задачах можно следовать следующим соотношениям.
| Уровень зума | Детальность | Масштаб |
| ------------ | ----------- | ------------- |
| z0 | 10 000 м | 1:320 000 000 |
@ -45,31 +53,27 @@ title: Внеклассное чтение
## Тайлы векторные и растровые
Нельзя сказать, что векторные тайлы легче, быстрее, производительнее, тем более лучше, чем растровые тайлы. Хотя некоторые авторы этим и грешат. Например, векторные тайлы, отображающие множество объектов с богатой атрибутикой, могут весит значительно больше растровых тайлов, а сложная, тем более динамическая, стилизация векторных тайлов, может привести к замедлению отрисовки картографического изображения в браузере.
У векторных и растровых тайлов есть свои достоинства и недостатки. Выбор конкретного варианта зависит от отображаемых данных, назначения веб-карты, требований к безопасности данных.
Нельзя сказать, что векторные тайлы легче, быстрее, производительнее, тем более лучше, чем растровые тайлы. Хотя некоторые авторы этим и грешат. Например, векторные тайлы, отображающие множество объектов с богатой атрибутикой, могут весит значительно больше растровых тайлов, а оформление векторных тайлов, тем более динамическая, может привести к замедлению отрисовки карты в браузере.
Векторные тайлы хорошо подходят для объектно-ориентированного картографирования: изображения точек интереса, дорог, границ. Растровые тайлы незаменимый вариант для отображения спутниковых снимков, непрерывных покрытий, данных без возможности прямого доступа к объектам.
Тайл привязан к глобальной системе координат одной точкой. Содержание тайла хранится во внутренней системе координат тайла. Для векторных тайлов это приводит к сложностям в объединении объектов, которые попадают в несколько тайлов сразу: их соединение требует использования вычислительно дорогих операций.
привязан к глобальной системе координат одной точкой, геометрии внутри тайла храняться во внутренней системе координат тайла. Для векторных тайлов это приводит к сложностям в объединении объектов, которые попадают в несколько тайлов сразу: их соединение требует использования вычислительно дорогих операций. Зато дальнейшая работа с векторными тайлами становится более удобной благодаря возможностям прямого доступа к объектам и их атрибутам для оформления картографических слоёв и организации интерактивной работы с объектами на карте.
Зато дальнейшая работа с векторными тайлами становится более удобной благодаря возможностям прямого доступа к объектам и их атрибутам для оформления картографических слоёв и организации интерактивной работы с объектами на карте.
Для векторных данных преобладает использование векторных тайлов. Снимки, ЦМР, индексы, в общем, продукты дистанционного зондирования -- растровые тайлы.
Изначально картографические тайловые системы или пирадимы тайлов применялись к растровым изображениям. Растровые тайлы делятся на стороне сервера, передаются в браузер, в браузере выглядят как единое изображение той части карты, которую просматривает пользователь.
Раньше растровые тайлы были для всего
Для растровых тайлов сложно обеспечить непрерывное изменение масштаба, интерактивное взаимодействие с объектами требует определения того, какому объекту соответствует тот или иной пиксель, серверная стилизация изображения может создать нагрузку, на которым не хватит вычислительных мощностей при наплыве пользователей.
Изначально картографические тайловые системы или пирадимы тайлов применялись к растровым изображениям. Растровые тайлы делятся на стороне сервера, передаются в браузер, в браезере сшиваются в единое изображение той части карты, которую просматривает пользователь.
Однако для растровых тайлов сложно обеспечить непрерывное изменение масштаба, дополнетельных операций требует определение того, какому объекту соответствует тот или иной пиксель, обычно требуется серверная стилизация изображения. Неудобства такого рода привели к разработке векторных тайловых систем.
У векторных и растровых тайлов есть свои достоинства и недостатки. Выбор конкретного варианта зависит от отображаемых данных, назначения веб-карты, требований к безопасности данных. Векторные тайлы хорошо подходят для объектно-ориентированного картографирования: изображения точек интереса, дорог, границ. Растровые тайлы незаменимый вариант для отображения спутниковых снимков, непрерывных покрытий, данных без возможности прямого доступа к объектам.
## Производительность векторных тайлов
Формирование тайла представляет собой запрос кусочка из полного набора пространственных данных, его перепроецирование и кодирование в векторных тайл.
Такие популярные серверы векторных тайлов, как Martin, Tegola, pg_tileserv, формируют тайл средствами базы данных PostGIS. Увидеть запросы, которые они используют можно в режиме отладки. Логично предположить, что на производительность формирования тайлов влияет
Такие популярные серверы векторных тайлов, как Martin, Tegola, pg_tileserv, формируют тайл средствами базы данных PostGIS. Увидеть запросы, которые они используют можно в режиме отладки. Изучив запросы видно, что на производительность формирования тайлов влияет
1. наличие пространственного индекса, так как есть этап запроса кусочка набора данных по границам тайла
2. проекция исходного набора данных, так как есть этап перепроецирования
@ -116,4 +120,10 @@ SELECT ((SELECT ST_AsMVT(q,'lines3857_index',4096,'geom','fid') AS data FROM (SE
| проекция веб-карты (3857) | 44,1 мс | 41,2 мс |
Проекция и пространственный индекс позволяют ускорить формирование тайлов, однако наибольший прирост производительности даёт *кэширование*, то есть сохранение результатов запросов. Если данные меняются редко можно предварительно рассчитать тайлы. Для хранения используются форматы MBTiles и PMTiles.
Проекция и пространственный индекс позволяют ускорить формирование тайлов, однако наибольший прирост производительности даёт *кэширование*, то есть сохранение результатов запросов.
Если данные меняются редко можно предварительно рассчитать тайлы. Для хранения используются форматы MBTiles и PMTiles.
---
Титов Г. С. Введение в веб-картографию / Веб-картография : материалы курса. Москва, 2025.
1. ГОСТ Р 58570-2019. Инфраструктура Пространственных Данных. Общие Требования. Стандартинформ, 2019. [ссылка](https://docs.cntd.ru/document/1200168445)
2. Абдуллин Р. К., Пономарчук А. И. Технологии интернет-картографирования: учебное пособие / Пермский государственный национальный исследовательский университет. - Пермь, 2020. – 132 с.: ил. [ссылка](https://gis.psu.ru/publications/технологии-интернет-картографирован/)
3. Аляутдинов А. Р., Лурье И. К., Ушакова Л. А. Основные принципы функционирования геоинформационных ресурсов // Известия высших учебных заведений. Геодезия и аэрофотосъемка. — 2016. — Т. 60, № 5. — С. 123–128 [ссылка](https://elibrary.ru/item.asp?id=27224121)
2. Аляутдинов А. Р., Лурье И. К., Ушакова Л. А. Основные принципы функционирования геоинформационных ресурсов // Известия высших учебных заведений. Геодезия и аэрофотосъемка. — 2016. — Т. 60, № 5. — С. 123–128 [ссылка](https://elibrary.ru/item.asp?id=27224121)
3. Абдуллин Р. К., Пономарчук А. И. Технологии интернет-картографирования: учебное пособие / Пермский государственный национальный исследовательский университет. - Пермь, 2020. – 132 с.: ил. [ссылка](https://gis.psu.ru/publications/технологии-интернет-картографирован/)
4. Берлянт А. М. Геоинформационное Картографирование. М.: Моск. гос. Ун-т им. М. В. Ломоносова, Рос. акад. естеств. наук, 1997. [ссылка](https://rusneb.ru/catalog/000199_000009_000611203/)
5. Каргашин П. Е. Основы цифровой картографии: Учебное пособие для бакалавров. 5-е изд., перераб. — Москва: Издательско-торговая корпорация Дашков и К, 2023. — 106 с. [ссылка](https://istina.msu.ru/publications/book/557759518/)
6. Лурье И.К., Самсонов Т.Е. Структура и содержание базы пространственных данных для мультимасштабного картографирования // Геодезия и картография. – 2010. – № 11. –С. 17-23. [ссылка](https://istina.msu.ru/publications/article/427465/)
@ -14,4 +14,8 @@ tableOfContents: false
9. Kraak M. J. Web Cartography: Developments and Prospects. Edited by M. J. Kraak and Allan Brown. New York: Taylor & Francis, 2001. [ссылка](https://doi.org/10.1201/9781482289237)
10. Muehlenhaus I. Web Cartography: Map Design for Interactive and Mobile Devices. Boca Raton, FL: CRC Press, 2014. [ссылка](https://doi.org/10.1201/b16229)
11. Neumann A. Web Mapping and Web Cartography. In Springer Handbook of Geographic Information, edited by Wolfgang Kresse and David M. Danko, 273–87. Berlin, Heidelberg: Springer Berlin Heidelberg, 2011. [ссылка](https://doi.org/10.1007/978-3-540-72680-7_14)
12. Wind waves web atlas of the russian seas / Myslenkov S., Samsonov T., Shurygina A. et al. // Water. — 2023. — Vol. 15, no. 11. — P. 2036. [ссылка](http://dx.doi.org/10.3390/w15112036)
12. Wind waves web atlas of the russian seas / Myslenkov S., Samsonov T., Shurygina A. et al. // Water. — 2023. — Vol. 15, no. 11. — P. 2036. [ссылка](http://dx.doi.org/10.3390/w15112036)
---
Титов Г. С. Введение в веб-картографию / Веб-картография : материалы курса. Москва, 2025.
Курс широкими мазками обрисовывает картину веб-картографии, акцентируя внимание на принципах, ключевых компонентах, их взаимодействии.
Введение в веб-картографию призвано дать читателю общую картину с акцентом на принципах работы и ключевых компонентах веб-карт.
```sh title="Пишем код"
Главный способ донесения информации -- практика
@ -12,4 +12,10 @@ draft: true
Мы создадим 4 функциональные веб-карты. Каждая из них является прекрасным шаблоном для решения собственных задач. Каждая карта сопровождается необходимым объёмом теоретических сведений для осознанного освоения практических навыков.
Опираясь на полученный опыт, мы зафиксируем походы к самостоятельной разработке веб-карт и пути дальнейшего развития в сфере веб-картографии.
Освоение материала обеспечит надёжных фундамент для дальнейшего роста в сфере веб-картографии.
<!-- Опираясь на полученный опыт, мы зафиксируем походы к самостоятельной разработке веб-карт и пути дальнейшего развития в сфере веб-картографии. -->
---
Титов Г. С. Введение в веб-картографию / Веб-картография : материалы курса. Москва, 2025.
gman
1 year ago
