g
/
wcwb
mirror of https://github.com/gtitov/wcwb.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

corrections

Browse Source
master
gman 6 months ago
parent 487df3e170
commit b0ea1c5794
9 changed files with 60 additions and 61 deletions
Show Stats Download Patch File Download Diff File

56
src/content/docs/1-web-map.mdx
Unescape View File

@ -14,7 +14,7 @@ import Option from '../../components/Option.astro';
- клиент-серверную архитектуру
- HTML, CSS, JavaScript
В рамках практической части создадим карту мира на основе GeoJSON-файлов с использованием открытой библиотеки MapLibre GL JS. При желании заранее посмотреть [полный код](https://github.com/gtitov/geojson-maplibre-map) и [возможный результат](https://gtitov.github.io/geojson-maplibre-map/).
В рамках практической части создадим карту мира на основе GeoJSON-файлов с использованием открытой библиотеки MapLibre GL JS. При желании посмотрите [полный код](https://github.com/gtitov/geojson-maplibre-map) и [возможный результат](https://gtitov.github.io/geojson-maplibre-map/).
<LinkCard title='Руки чешутся' href='#создание-первой-веб-карты' description='Сразу к практике'/>
@ -22,7 +22,7 @@ import Option from '../../components/Option.astro';
Любую ли карту в Интернете можно назвать веб-картой?
Яндекс.Карты — да!
Яндекс Карты — да!
Скан карты России, который я отправил по почте — пожалуй, нет.
@ -36,7 +36,7 @@ import Option from '../../components/Option.astro';
### Типы веб-карт
Веб-карты можно разделить на интерактивные / неинтерактивные и статические / динамически
Веб-карты можно разделить на интерактивные / неинтерактивные и статические / динамические
| | статические | динамические |
| --------------- | ------------------- | --------------------------- |
@ -73,7 +73,7 @@ import Option from '../../components/Option.astro';
Откройте инструменты разработчика, нажав на клавишу F12 или сочетание клавиш Ctrl+Shift+i, перейдите во вкладку Сеть (Network) и обновите страницу, чтобы увидеть, сколько запросов выполняет браузер, чтобы показать вашу любимую веб-страницу.
:::
Первый запрос инициирует пользователь выполняет путём ввода адреса. Дальнейшие действия пользователя на веб-странице могут инициировать последующие запросы. Запрашиваться могут как веб-страницы целиком, так и отдельные данные для обновления содержания текущей веб-страницы. Если мы обновляем только часть содержания веб-страницы данными с сервера, то речь идёт об асинхронном запросе.
Первый запрос пользователь выполняет путём ввода адреса. Дальнейшие действия пользователя на веб-странице могут инициировать последующие запросы. Запрашиваться могут как веб-страницы целиком, так и отдельные данные для обновления содержания текущей веб-страницы. Если мы обновляем только часть содержания веб-страницы данными с сервера, то речь идёт об асинхронном запросе.
![*Запросы, выполняемые с веб-страницы*](../../assets/network-tab.png)
@ -124,7 +124,7 @@ import Option from '../../components/Option.astro';
<title>Население мира</title>
<!-- Запрашиваем стили 👇 -->
<link rel="stylesheet" href="style.css">
<!-- Запрашиваем библиотеку Maplibre 👇 -->
<!-- Запрашиваем библиотеку MapLibre 👇 -->
<script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css" rel="stylesheet" />
</head>
@ -139,7 +139,7 @@ import Option from '../../components/Option.astro';
</html>
```
Библиотеку Maplibre мы запрашиваем из внешнего ресурса, а вот стили и логику карты нам нужно создать.
Библиотеку MapLibre мы запрашиваем из внешнего ресурса, а вот стили и логику карты нам нужно создать.
Создадим файл стилей `style.css`.
@ -180,22 +180,22 @@ const map = new maplibregl.Map({
Создадим подпапку `data` и загрузим в неё данные о [странах](https://raw.githubusercontent.com/gtitov/geojson-maplibre-map/refs/heads/master/data/countries.geojson), [городах](https://raw.githubusercontent.com/gtitov/geojson-maplibre-map/refs/heads/master/data/cities.geojson), [реках](https://raw.githubusercontent.com/gtitov/geojson-maplibre-map/refs/heads/master/data/rivers.geojson) и [озёрах](https://raw.githubusercontent.com/gtitov/geojson-maplibre-map/refs/heads/master/data/lakes.geojson).
Должна получится такая структура. HTML отвечает за структуру веб-страницы, CSS за оформление веб-страницы, JavaScript за логику работы веб-страницы. GeoJSON файлы хранят пространственные данные.
Получится такая структура. HTML отвечает за структуру веб-страницы, CSS за оформление веб-страницы, JavaScript за логику работы веб-страницы. GeoJSON-файлы хранят пространственные данные.
<FileTree>
- data/ # данные
- cities.geojson # города
- countries.geojson # страны
- lakes.geojson # озёра
- rivers.geojson # реки
- index.html # разметка
- style.css # стили
- main.js # логика
- data/ # данные
- cities.geojson # города
- countries.geojson # страны
- lakes.geojson # озёра
- rivers.geojson # реки
- index.html # разметка
- style.css # стили
- main.js # логика
</FileTree>
Все действия с картой выполняются после первичной загрузки исходной карты.
Добавление картографических слоёв включает два шага: добавление источника данных `addSource` и добавление слоя `addLayer`. На первом шаге указываем, откуда мы будем брать данные, а на втором, как их оформить. Из одного источника можно создать несколько слоёв.
Добавление картографических слоёв включает два шага: добавление источника данных `addSource` и добавление слоя `addLayer`. На первом шаге указываем, откуда мы будем брать данные, а на втором -- как их оформить. Из одного источника можно создать несколько слоёв.
```js title="main.js"
// Инициализируем карту
@ -280,14 +280,14 @@ map.on('load', () => {
```
:::tip
Порядок отрисовки слоёв соответсвует порядку их объявления в коде. Последующие слои перекрывают предыдущие.
Порядок отрисовки слоёв соответствует порядку их объявления в коде. Последующие слои перекрывают предыдущие.
:::
В MapLibre слои можно фильтровать и оформлять на основе атрибутов с помощью [выражений](https://maplibre.org/maplibre-style-spec/expressions/).
Например, оставим только города с численностью населения больше 1 000 000
Например, оставим только города с численностью населения больше 1 000 000.
```diff lang="js" title="main.js"
// Инициализируем карту
@ -308,7 +308,7 @@ map.on('load', () => {
})
```
Изобразим красным (`red`) цветом страны, у которых атрибут `MAPCOLOR7` равен 1, а остальные изобразим светло-серым (`lightgray`)
Изобразим красным (`red`) цветом страны, у которых атрибут `MAPCOLOR7` равен 1, а остальные изобразим светло-серым (`lightgray`).
```diff lang="js" title="main.js"
// Инициализируем карту
@ -333,7 +333,7 @@ map.on('load', () => {
Созданная нами карта сразу даёт пользователю возможности перемещения, зума и даже наклона (попробуйте зажать правую кнопку мыши). Однако чтобы, например, выводить атрибутивные сведения о слое по клику, надо указать это в коде.
Отследим событие клика по слою `cities-layer`. Назовём событие клика переменной `e`. Посмотрим в консоли браузера, что собой представляет это событие. Если мы отслеживаем событие клика по конкретному слою, а не по всей карте, то мы можем обратиться к набору объектов, по которым был выполнен клик `e.features`
Отследим событие клика по слою `cities-layer`. Назовём событие клика переменной `e`. Посмотрим в консоли браузера, что собой представляет это событие. Если мы отслеживаем событие клика по конкретному слою, а не по всей карте, то мы можем обратиться к набору объектов, по которым был выполнен клик `e.features`.
```js title="main.js"
// Инициализируем карту
@ -367,7 +367,7 @@ map.on('load', () => {
})
```
Попап отображается, но надо показать пользователю, что на объект можно кликать. При попадании мыши на слой `cities-layer` поменяем курсор на pointer, а при покидании слоя `cities-layer` вернём значение по умолчанию.
Попап отображается, но надо показать пользователю, что на объект можно кликать. При попадании мыши на слой `cities-layer` поменяем курсор на `pointer`, а при покидании слоя `cities-layer` вернём значение по умолчанию.
```js title="main.js"
// Инициализируем карту
@ -384,7 +384,7 @@ map.on('load', () => {
})
```
В качестве завершающего штриха уберём карту подложку и добавим фон. При этом фон добавляем перед всеми слоями, так как все слои должны рисоваться после фона, поверх него.
В качестве завершающего штриха уберём карту-подложку и добавим фон. При этом фон добавляем перед всеми слоями, так как все слои должны рисоваться после фона, поверх него.
```diff lang="js" title="main.js"
// Инициализируем карту
@ -426,21 +426,21 @@ map.on('load', () => {
1. Пользователь вводит адрес карты в браузере (в клиенте)
1. Клиент выполняет запрос к серверу по введённому адресу
1. Сервер обрабатывает запрос и возвращает разметку (HTML) (1)
1. В разметке содержаться запросы к офомлению (CSS), картографической библиотеке (MapLibre) и программной логике работы (JavaScript) веб-страницы (2)
1. В разметке содержатся запросы к оформлению (CSS), картографической библиотеке (MapLibre) и программной логике работы (JavaScript) веб-страницы (2)
1. Клиент (браузер), получив все необходимые сведения, отображает веб-страницу
1. Программная логика работы полученной веб-страницы выполняется и в соотстветвии с кодом инициирует запросы к данным (GeoJSON) для составления карты (3)
1. Полученные данные оформляются на веб-карте в рамках описанной разработчиком на языке JavaScript логики с использованием функций библиотеки MapLibre
1. Программная логика работы полученной веб-страницы выполняется и в соответствии с кодом инициирует запросы к данным (GeoJSON) для составления карты (3)
1. Полученные данные оформляются на веб-карте в рамках логики, описанной разработчиком на языке JavaScript, с использованием функций библиотеки MapLibre
1. Пользователь получает веб-карту
1. Веб-карта обогащается дополнительной интерактивностью в рамках описанной разработчиком логики
Такая карта удобна, когда немного данных, потому что мы всё переправляем пользователю данные как есть. Когда мы отправляем пользователю данные как есть, почти не требуется серверных мощностей, поэтому для таких карт есть варианты бесплатного размещения в Интернете.
Такая карта удобна, когда мы делаем карту с небольшим количеством объектов. Мы переправляем пользователю данные как есть, а когда мы отправляем пользователю данные как есть, почти не требуется серверных мощностей. Их легко разместить в Интернете, есть варианты бесплатной публикации.
*Перед тем как броситься на выполнение упражнений, полезно сделать паузу, выпить чаю и немного почитать*
<CardGrid>
{/* <CardGrid> */}
<LinkCard title='Теоретическая база' href='/extra/web-mapping' description='Веб-картографирование и веб-картография'/>
{/* <LinkCard title='Исторический экскурс' href='/extra/brief-history' description='Краткая история веб-картографии'/> */}
</CardGrid>
{/* </CardGrid> */}
## Упражнения

28
src/content/docs/2-api.mdx
Unescape View File

@ -22,9 +22,9 @@ import Option from '../../components/Option.astro';
## API
API обычно переводят как прикладной программный интерфейс или программный интерфейс приложений. На практике чаще говорят просто "апи".
API обычно переводят как "прикладной программный интерфейс" или "программный интерфейс приложений". На практике чаще говорят просто "апи".
Помните формулировку из предыдущего упражнения
Помните формулировку про клиента и сервер из предыдущего упражнения:
> ...клиент (браузер) обращается к серверу с запросом, сервер возвращает клиенту ответ
@ -42,9 +42,9 @@ API обычно переводят как прикладной программ
В идеале API будет иметь интуитивно понятное назначение и описание каждого метода.
> Про то, как этого добиться написана не одна книга. Но помните, сложно понять, что такое хорошо и что такое плохо, без практики, поэтому для начала надо дерзать и пробовать.
> Про то, как этого добиться, написана не одна книга. Но без практики сложно понять, что такое хорошо и что такое плохо. Для начала надо дерзать и пробовать.
Существуют стандарты API. Обращаясь к API, который следует стандарту пользователь знает, чего ему ожидать.
Существуют стандарты API. Обращаясь к API, который следует стандарту, пользователь знает, чего ему ожидать.
> Ряд стандартов API существует для пространственных и картографических данных. Мы уже использовали стандартный формат обмена GeoJSON и видели, что MapLibre принимает его без необходимости предварительной обработки. К другим популярным стандартам следует отнести протоколы WMS, WFS, векторные тайлы. Ряд стандартов курирует Открытый Геопространственный Консорциум (Open Geospatial Consortium), некоторые приняты как стандарты ISO и ГОСТ.
@ -123,7 +123,7 @@ API обычно переводят как прикладной программ
Удостоверимся, что карта отображается на локальном сервере.
> Вспомнить, как запустить локальный сервер, можно [тут](/2-webmap/#запуск-локального-сервера).
> Вспомнить, как запустить локальный сервер, можно [в главе про веб-карту](/1-web-map/#запуск-локального-сервера).
## Обращение к API
@ -136,7 +136,7 @@ map.on("load", () => {
})
```
> Сюжет с асинхронностью может показать контринтуитивным. Это нормально. Почитайте теорию, попрактикуйтесь, вернитесь к теории, можно поглядеть материалы из раздела [Чтение](#чтение). И всё получится! Проверено.
> Сюжет с асинхронностью может показаться контринтуитивным. Это нормально. Почитайте теорию, попрактикуйтесь, вернитесь к теории, можно поглядеть материалы из раздела [Чтение](#чтение). И всё получится! Проверено.
### Асинхронность
@ -148,7 +148,7 @@ map.on("load", () => {
### Работа с асинхронностью
Для асинхронных запросов мы должны в явном виде указать, что код, использующий запрашиваемые данные, должен выполняться после получения ответа на запрос. Для этого используем конструкцию `fetch...then`
Для асинхронных запросов мы должны в явном виде указать, что код, использующий запрашиваемые данные, должен выполняться после получения ответа на запрос. Для этого используем конструкцию `fetch...then`.
```js title="main.js" showLineNumbers
map.on("load", () => {
@ -158,7 +158,7 @@ map.on("load", () => {
})
```
> Можно запрашивать эту таблицу, но лучше скопировать её себе. Тогда можно будет менять данные, а этом и есть интерес этого упражнения. Чтобы открыть таблицу уберите из URL часть `/export?format=csv` или воспользуйтесь этой [ссылкой](https://docs.google.com/spreadsheets/d/1f0waZduz5CXdNig_WWcJDWWntF-p5gN2-P-CNTLxEa0). Чтобы потому запросить свою таблицу в формате CSV, добавьте в конец `/export?format=csv`, чтобы URL был похож на тот, что в коде выше.
> Можно запрашивать эту таблицу, но лучше скопировать её себе. Тогда можно будет менять данные, а этом и есть интерес этого упражнения. Чтобы открыть таблицу, уберите из URL часть `/export?format=csv` или воспользуйтесь этой [ссылкой](https://docs.google.com/spreadsheets/d/1f0waZduz5CXdNig_WWcJDWWntF-p5gN2-P-CNTLxEa0). Чтобы потом запросить свою таблицу в формате CSV, добавьте в конец `/export?format=csv`, чтобы URL был похож на тот, что в коде выше.
`fetch` выполняет запрос и возвращает Promise (1) -- обещание, что дождётся ответа от внешнего ресурса с csv-данными о вакансиях.
@ -172,7 +172,7 @@ map.on("load", () => {
В первой карте тоже был асинхронный код!
Сама карта создаётся асинхронно, поэтому все действия по добавлению слоёв мы выполняем после загрузки карты `map.on('load', () => {})`. Функция, которая вызывается после успешного завершения события, в данном случае `'load'` называется колбэк (callback) функцией. Колбэк -- это ещё один вариант работы с асинхронностью.
Сама карта создаётся асинхронно, поэтому все действия по добавлению слоёв мы выполняем после загрузки карты `map.on('load', () => {})`. Функция, которая вызывается после успешного завершения события, в данном случае `'load'`, называется колбэк (callback) функцией. Колбэк -- это ещё один вариант работы с асинхронностью.
А ещё асинхронно выполняется добавление источников данных `map.addSource`, они же тоже фактически загружаются с сервера. В этом случае библиотека MapLibre сама отслеживает, что код по добавлению источника должен завершиться, прежде чем мы сможем создавать картографические слои `map.addLayer` из этого источника. Спасибо ей за это!
@ -180,7 +180,7 @@ map.on("load", () => {
MapLibre не может работать с форматом CSV. Мы преобразуем данные в знакомый формат GeoJSON.
Подключим библиотеку для чтения CSV данных в JS-объект.
Подключим библиотеку для чтения CSV-данных в JS-объект.
```html title="index.html"
<head>
@ -189,7 +189,7 @@ MapLibre не может работать с форматом CSV. Мы прео
</head>
```
Выполним чтение CSV данных c использованием подключенной библиотеки и сконструируем GeoJSON-объект.
Выполним чтение CSV-данных c использованием подключенной библиотеки и сконструируем GeoJSON-объект.
```js title="main.js" del={1}
.then((csv) => console.log(csv))
@ -423,9 +423,9 @@ map.on("load", () => {
1. дожидаемся ответа, используя конструкцию `fetch...then`,
1. обрабатываем его -- конвертируем CSV в GeoJSON,
1. добавляем полученный GeoJSON как источник данных на карту,
1. создаём на основе этого GeoJSON кластеризованный слой
1. используем исходный GeoJSON для формирования списка всех объектов с возможностью поиска по карте
1. используем слой вакансий на карте для формирования списка видимых объектов
1. создаём на основе этого GeoJSON кластеризованный слой,
1. используем исходный GeoJSON для формирования списка всех объектов с возможностью поиска по карте,
1. используем слой вакансий на карте для формирования списка видимых объектов.
Такая карта хороша, когда нужно организовать совместную работу с обновляемыми пространственными данными. Например, на этой основе мне приходилось делать карту для выставки. Специалисты заполняли таблицу в своём темпе, а на основе содержания этой таблицы генерировалась карта, прямо как в этом упражнении. Главное заранее договориться о структуре таблицы. Такую карту можно разметить в Интернете практически бесплатно, потому что динамическая составляющая сайта обеспечивается бесплатным сервисом таблиц.

3
src/content/docs/3-backend.mdx
Unescape View File

@ -43,7 +43,7 @@ import Option from '../../components/Option.astro';
Создадим папку с заготовкой для нашей карты.
Добавим туда папку `backend`. Загрузим [отсюда](https://github.com/gtitov/flask-maplibre-map/raw/refs/heads/main/backend/cities_index.sqlite) базу данных и положим в созданную папку `backend`. Cоздадим в этой папке файл с нашим бэкендом `app.py`.
Добавим туда папку `backend`. Загрузим [базу данных из репозитория с полным кодом карты](https://github.com/gtitov/flask-maplibre-map/raw/refs/heads/main/backend/cities_index.sqlite) и положим в созданную папку `backend`. Cоздадим в этой папке файл с нашим бэкендом `app.py`.
<FileTree>
- backend/
@ -360,7 +360,6 @@ map.on("load", () => {
map.getCanvas().style.cursor = '';
});
})
```
> Если вы уже заметили кое-какую нестыковку в наших запросах, посмотрите упражнения в конце главы

12
src/content/docs/4-tiles.mdx
Unescape View File

@ -50,13 +50,13 @@ import { Card, LinkCard } from "@astrojs/starlight/components";
#### Установка
Дистрибутив для сервера баз данных загрузим [здесь](https://www.postgresql.org/download/). При установке следует обратить внимание на порт, который будет занимать сервер баз данных, и пароль для пользователя `postgres`.
Дистрибутив для сервера баз данных загрузим [с сайта PostgreSQL](https://www.postgresql.org/download/). При установке следует обратить внимание на порт, который будет занимать сервер баз данных, и пароль для пользователя `postgres`.
> Сервер баз данных запускается локально. Доступ к локальному серверу баз данных осуществляется по заданному при установке порту -- обычно 5432. Если установщик предлагает другой порт, возможно, сервер баз данных уже установлен на компьютер и занимает этот порт.
После установки сервера баз данных Postgres можно установить расширение для работы с пространственными данными PostGIS. Дистрибутив доступен [тут](https://postgis.net/documentation/getting_started/#installing-postgis).
После установки сервера баз данных Postgres можно установить расширение для работы с пространственными данными PostGIS. Дистрибутив доступен [на сайте расширения](https://postgis.net/documentation/getting_started/#installing-postgis).
> На Windows наблюдаются проблемы с установкой PostGIS через StackBuilder. Рабочим вариантом является самостоятельная загрузка дистрибутива PostGIS [отсюда](https://download.osgeo.org/postgis/windows/). Найдите папку с версией Postgres, которую установили. Например, для Postgres 17 нужна папка `pg17/`, в папке находится дистрибутив `pg17/postgis-bundle-pg17x64-setup-3.5.0-2.exe`.
> На Windows наблюдаются проблемы с установкой PostGIS через StackBuilder. Рабочим вариантом является самостоятельная загрузка дистрибутива PostGIS [с сайта OSGeo](https://download.osgeo.org/postgis/windows/). Найдите папку с версией Postgres, которую установили. Например, для Postgres 17 нужна папка `pg17/`, в папке находится дистрибутив `pg17/postgis-bundle-pg17x64-setup-3.5.0-2.exe`.
#### Создание базы данных
@ -64,7 +64,7 @@ import { Card, LinkCard } from "@astrojs/starlight/components";
![alt text](../../assets/image.png)
> При необходимости, его можно установить [отдельно](https://www.pgadmin.org/download/).
> При необходимости можно загрузить [только дистрибутив PgAdmin](https://www.pgadmin.org/download/) и установить графическую оболочку отдельно от сервера баз данных.
Через этот интерфейс мы создадим базу данных на нашем локальном сервере.
@ -74,7 +74,7 @@ import { Card, LinkCard } from "@astrojs/starlight/components";
![alt text](../../assets/image-2.png)
И добавим к созданной базе расширение `PostGIS`.
И добавим к созданной базе расширение `postgis`.
![alt text](../../assets/image-3.png)
@ -122,7 +122,7 @@ import { Card, LinkCard } from "@astrojs/starlight/components";
#### Сервер векторных тайлов
Для подготовки векторных тайлов используем сервер векторных тайлов Martin. Загрузим это приложение [отсюда](https://github.com/maplibre/martin/releases/tag/v0.14.2).
Для подготовки векторных тайлов используем сервер векторных тайлов Martin. Загрузим это приложение [со страницы релиза](https://github.com/maplibre/martin/releases/tag/v0.14.2).
Распакуем архив и запустим сервер векторных тайлов, указав подключение к локальной базе данных, куда мы загрузили ойконимы. Чтобы это сделать, надо запустить терминал в папке, где распакован исполняемый файл Martin, например, `martin.exe`. И выполнить команду, которая в общем виде будет выглядеть так.

6
src/content/docs/extra/tiles.md
Unescape View File

@ -13,10 +13,10 @@ sidebar:
Зато дальнейшая работа с векторными тайлами становится более удобной благодаря возможностям прямого доступа к объектам и их атрибутам для оформления картографических слоёв и организации интерактивной работы с объектами на карте.
Изначально картографические тайловые системы или пирадимы тайлов применялись к растровым изображениям. Растровые тайлы делятся на стороне сервера, передаются в браузер, в браузере выглядят как единое изображение той части карты, которую просматривает пользователь.
Изначально картографические тайловые системы или пирамиды тайлов применялись к растровым изображениям. Растровые тайлы делятся на стороне сервера, передаются в браузер, в браузере выглядят как единое изображение той части карты, которую просматривает пользователь.
Для растровых тайлов сложно обеспечить непрерывное изменение масштаба, интерактивное взаимодействие с объектами требует определения того, какому объекту соответствует тот или иной пиксель, серверная стилизация изображения может создать нагрузку, на которым не хватит вычислительных мощностей при наплыве пользователей.
У растровых тайлов свои недостатки. Например, нельзя обеспечить непрерывное изменение масштаба. Для интерактивного взаимодействия с объектами придётся определять, соответствие пикселей и объектов. Серверная стилизация изображения может создать избыточную нагрузку на сервер при наплыве пользователей.
Векторные тайлы нагружают клиентскую часть. Растровые тайлы нагружают серверную часть.
У векторных и растровых тайлов есть свои достоинства и недостатки. Выбор конкретного варианта зависит от отображаемых данных, назначения веб-карты, требований к безопасности данных. Векторные тайлы хорошо подходят для объектно-ориентированного картографирования: изображения точек интереса, дорог, границ. Растровые тайлы незаменимый вариант для отображения спутниковых снимков, непрерывных покрытий, данных без возможности прямого доступа к объектам.
У векторных и растровых тайлов есть свои достоинства и недостатки. Выбор конкретного варианта зависит от отображаемых данных, назначения веб-карты, требований к безопасности данных. Векторные тайлы хорошо подходят для объектно-ориентированного картографирования: изображения точек интереса, дорог, границ. Растровые тайлы -- незаменимый вариант для отображения спутниковых снимков, непрерывных покрытий, данных без возможности прямого доступа к объектам.

4
src/content/docs/extra/vector-tile-performance.md
Unescape View File

@ -7,7 +7,7 @@ sidebar:
Формирование тайла представляет собой запрос кусочка из полного набора пространственных данных, его перепроецирование и кодирование в векторных тайл.
Такие популярные серверы векторных тайлов, как Martin, Tegola, pg_tileserv, формируют тайл средствами базы данных PostGIS. Увидеть запросы, которые они используют можно в режиме отладки. Изучив запросы видно, что на производительность формирования тайлов влияет
Такие популярные серверы векторных тайлов, как Martin, Tegola, pg_tileserv, формируют тайл средствами базы данных PostGIS. Увидеть запросы, которые они используют, можно в режиме отладки. Изучив запросы, мы увидим, что на производительность формирования тайлов влияет
1. наличие пространственного индекса, так как есть этап запроса кусочка набора данных по границам тайла
2. проекция исходного набора данных, так как есть этап перепроецирования
@ -56,4 +56,4 @@ SELECT ((SELECT ST_AsMVT(q,'lines3857_index',4096,'geom','fid') AS data FROM (SE
Проекция и пространственный индекс позволяют ускорить формирование тайлов, однако наибольший прирост производительности даёт *кэширование*, то есть сохранение результатов запросов.
Если данные меняются редко можно предварительно рассчитать тайлы. Для хранения используются форматы MBTiles и PMTiles.
Если данные меняются редко, можно предварительно рассчитать тайлы. Для хранения используются форматы MBTiles и PMTiles.

2
src/content/docs/extra/web-map-et-al.md
Unescape View File

@ -17,4 +17,4 @@ sidebar:
*Картографический веб-сервис* — это веб-ресурс, предоставляющий возможности обращения к пространственным данным или метаданным, в т. ч. по стандартизированным протоколам обмена (WMS, WFS, WCS и т. д.). Картографические веб-сервисы не имеют графического интерфейса, к этим сервисам обращаются программно через API (прикладной программный интерфейс).
Этими терминами злоупотребляют по отношению к любым веб-ресурсам, связанным с пространственными данными и картами. Правильнее объединить картографические продукты, публикуемые в сети, под названием *картографические веб-ресурсы*. Они являются веб-ресурсами, основным назначением которых является предоставление доступа к картографической информации.
Этими терминами злоупотребляют по отношению к любым веб-ресурсам, связанным с пространственными данными и картами. Правильнее объединить картографические продукты, публикуемые в сети, под названием *картографические веб-ресурсы*. То есть веб-ресурсы, основное назначение которых -- предоставлять доступ к картографической информации.

6
src/content/docs/extra/web-mapping.mdx
Unescape View File

@ -35,7 +35,7 @@ import { Card } from '@astrojs/starlight/components';
Легко заметить соподчинённость выделенных особенностей. Веб-технологии позволяют вводить интерактивные элементы в содержание карты. Одним из ключевых интерактивных элементов веб-карт является возможность изменения масштаба, что обуславливает мультимасштабность наполнения карты.
Кроме того веб-картографирование характеризуют
Кроме того веб-картографирование характеризуют:
4. Общедоступность
5. Сходство с программным обеспечением
@ -62,7 +62,7 @@ import { Card } from '@astrojs/starlight/components';
<details>
<summary>Узнать ответ</summary>
Особенности веб-картографирования проистекают из сетевой среды распространения картографических материалов. Другими словами, сетевая среда распространения является ключевой особенностью веб-картографирования, а остальные производными от неё.
Особенности веб-картографирования проистекают из сетевой среды распространения картографических материалов. Другими словами, сетевая среда распространения является ключевой особенностью веб-картографирования, а остальные -- производными от неё.
</details>
</Card>
@ -79,5 +79,5 @@ import { Card } from '@astrojs/starlight/components';
<Card title="Короче">
Веб-картографирование — это создание карт для распространения и использования в Интернете. Оно характеризуется сетевой средой распространения и производными от этого особенностями, в частности интерактивностью и мультимасштабностью.
Веб-картография формируется на пересечении сетевых технологий, картографии и геоинформатики изучает особенности оборота пространственных данных в сетевой среде, включая хранение, кодирование, передачу, обработку данных, разработку веб-приложений и другие аспекты.
Веб-картография формируется на пересечении сетевых технологий, картографии и геоинформатики, изучает особенности оборота пространственных данных в сетевой среде, включая хранение, кодирование, передачу, обработку данных, разработку веб-приложений и другие аспекты.
</Card>

4
src/content/docs/index.md
Unescape View File

@ -3,11 +3,11 @@ title: Вступление
tableOfContents: false
---
Данное пособие призвано ввести читателя в сферу веб-картографию через практику. Мы будем акцентировать внимание на принципах работы веб-карт. Это позволит в короткие сроки освоить ключевые навыки, необходимые для веб-картографирования.
Пособие призвано ввести читателя в сферу веб-картографии через практику. Мы будем акцентировать внимание на принципах работы веб-карт. Это позволит в короткие сроки освоить ключевые навыки, необходимые для веб-картографирования.
Книга будет полезна специалистам в области картографии, которые хотят выяснить, как работают карты в Интернете, и веб-разработчикам, которые хотят понять особенности картографических интерфейсов и пространственных данных.
Пособие базируется на курсе по веб-картографии, который регулярно читается в Картетике, и многолетнем опыте работы на пересечении картографии и веб-разработки.
Пособие базируется на [курсе по веб-картографии](https://cartetika.ru/webcartography-i), который регулярно читается в Картетике, и многолетнем опыте работы на пересечении картографии и веб-разработки.
```sh title="Пишем код"
Главный способ донесения информации --- практика

Write Preview
Loading…
Cancel
Save