@ -36,7 +36,7 @@ import Option from '../../components/Option.astro';
### Типы веб-карт
Веб-карты можно разделить на интерактивные / неинтерактивные и статические / динамические
Веб-карты можно разделить, во-первых, на интерактивные / неинтерактивные и, во-вторых, на статические / динамические. Интерактивность касается интерфейса и клиентской части, а деление на статические и динамические веб-карты связано с обработкой данных в серверной части.
| |статические|динамические|
|-|-|-|
@ -51,17 +51,15 @@ import Option from '../../components/Option.astro';
Динамические веб-карты подразумевают серверную обработку данных и позволяют запрашивать данные более гибко. Из программного обеспечения обычно используются база данных, программа для обработки данных и веб-сервер. В общем случае веб-сервер примет запрос и обратится к программе для обработки данных, она извлечёт данные из базы, обработает их и передаст веб-серверу, который отправит подготовленные данные клиенту.
Интерактивность касается интерфейса и клиентской части, а деление на статические и динамические веб-карты связано с обработкой данных в серверной части.
Веб-ресурсы работают по клиент-серверной архитектуре. Рассмотрим пример работы веб-ресурса.
Пользователь вводит адрес запрашиваемого веб-ресурса в адресную строку браузера и нажимает клавишу Enter (1). Браузер инициирует и выполняет запрос к серверу на получение данных для создания веб-страницы (2). Сервер возвращает ответ (3). Из этого ответа браузер формирует веб-страницу, которую видит пользователь (4).
Пользователь вводит URL-адрес запрашиваемого веб-ресурса в адресную строку браузера и нажимает клавишу Enter (1). Браузер инициирует и выполняет HTTP-запрос к серверу на получение данных для создания веб-страницы (2). Сервер возвращает ответ (3). Из этого ответа браузер формирует веб-страницу, которую видит пользователь (4).
<Card title="Короче">
Браузер -- это клиент. Сервер -- это сервер. Клиент обращается к серверу с запросом, сервер возвращает клиенту ответ. Вот суть клиент-серверной архитектуры.
@ -81,7 +79,7 @@ import Option from '../../components/Option.astro';
Веб-карты тоже строятся на основе клиент-серверной архитектуры. Рассмотрим интерактивную статическую карту (пока воображаемую).
Разметка, стили, логика (программный код) веб-карты, а также наборы пространственных данных веб-карты хранятся на сервере. Пользователь вводит адрес карты. Браузер запрашивает с сервера разметку веб-карты (html). Разметка приходит в браузер. Разметка содержит запросы к стилям и логике веб-карты. Логика веб-карты приходит в браузер и запрашивает наборы пространственных данных для создания веб-карты. Пространственные данные приходят [Взаимодействие с сервером закончено!] и кодом веб-карты превращаются в картографические слои.
Разметка, стили, логика (программный код) веб-карты, а также наборы пространственных данных веб-карты хранятся на сервере. Пользователь вводит адрес карты. Браузер запрашивает с сервера разметку веб-карты (HTML). Разметка приходит в браузер. Разметка содержит запросы к стилям (CSS) и логике веб-карты (JS). Логика веб-карты приходит в браузер и запрашивает наборы пространственных данных для создания веб-карты. Пространственные данные приходят [Взаимодействие с сервером закончено!] и кодом веб-карты превращаются в картографические слои.
@ -108,7 +106,7 @@ import Option from '../../components/Option.astro';
Выделим нашей первой веб-карте отдельную папку.
> В качестве среды разработки можно использовать [VS Code](https://code.visualstudio.com/), а чтобы запустить сервер -- расширение [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).
> В качестве среды разработки можно использовать [VS Code](https://code.visualstudio.com/), а чтобы локально запустить сервер -- расширение [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).
### Инициализация карты
@ -444,7 +442,7 @@ map.on('load', () => {
## Упражнения
1. Покрасьте Москву в красный цвет
1. Присвойте Москве красный цвет
2. Выведите в попап один из атрибутов стран
3. Добавьте слой с границами озёр, установите им толщину в 2 пикселя
4. Замените курсор на перекрестие (`crosshair`) при расположении поверх стран
@ -22,7 +22,7 @@ import Option from '../../components/Option.astro';
## API
API обычно переводят как "прикладной программный интерфейс" или "программный интерфейс приложений". На практике чаще говорят просто "апи".
API (Application Programming Interface) обычно переводят как "прикладной программный интерфейс" или "программный интерфейс приложений". На практике чаще говорят просто "апи".
Помните формулировку про клиента и сервер из предыдущего упражнения:
@ -38,7 +38,7 @@ API обычно переводят как "прикладной програм
Мы знаем, потому что ожидаем, что при обращении к определённому *адресу* (URL) нам вернётся определённый ответ. Например, при обращении за файлом `style.css` мы получим стили, потому что сами и создали этот файл.
<Card title="API">Совокупность *адресов* (URL) и правил обращения к ним называется API. Отдельные адреса называются методами API или, в обиходе, ручками API.</Card>
<Card title="API">Совокупность *адресов* (URL) и правил обращения к ним называется API. Отдельные адреса называются методами API или, в обиходе, "ручками" API.</Card>
В идеале API будет иметь интуитивно понятное назначение и описание каждого метода.
@ -136,7 +136,7 @@ map.on("load", () => {
})
```
> Сюжет с асинхронностью может показаться контринтуитивным. Это нормально. Почитайте теорию, попрактикуйтесь, вернитесь к теории, можно поглядеть материалы из раздела [Чтение](#чтение). И всё получится! Проверено.
> Сюжет с асинхронностью может показаться контринтуитивным. Это нормально. Почитайте теорию, попрактикуйтесь, вернитесь к теории, можно посмотреть материалы из раздела [Чтение](#чтение). И всё получится! Проверено.
В рамках практической части создадим карту ойконимов Московского региона по векторным тайлам, генерирующимся на лету приложением Martin из базы данных PostGIS. При желании посмотрите [полный код](https://github.com/gtitov/martin-maplibre-map) и [возможный результат](https://gtitov.github.io/martin-maplibre-map/).
В рамках практической части создадим карту ойконимов (названий населённых пунктов) Московского региона по векторным тайлам, генерирующимся на лету приложением Martin из базы данных PostGIS. При желании посмотрите [полный код](https://github.com/gtitov/martin-maplibre-map) и [возможный результат](https://gtitov.github.io/martin-maplibre-map/).
gman
3 months ago
