|
|
|
@ -1,445 +1,454 @@
|
|
|
|
---
|
|
|
|
---
|
|
|
|
title: Веб-карта
|
|
|
|
title: Веб-карта
|
|
|
|
---
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
import { Card, FileTree, LinkCard } from '@astrojs/starlight/components';
|
|
|
|
import { Card, FileTree, LinkCard } from '@astrojs/starlight/components';
|
|
|
|
import Question from '../../../components/Question.astro';
|
|
|
|
import Question from '../../components/Question.astro';
|
|
|
|
import MultipleChoice from '../../../components/MultipleChoice.astro';
|
|
|
|
import MultipleChoice from '../../components/MultipleChoice.astro';
|
|
|
|
import Option from '../../../components/Option.astro';
|
|
|
|
import Option from '../../components/Option.astro';
|
|
|
|
|
|
|
|
|
|
|
|
В этой главе мы рассмотрим
|
|
|
|
В этой главе мы рассмотрим
|
|
|
|
|
|
|
|
|
|
|
|
- понятие веб-карты
|
|
|
|
- понятие веб-карты
|
|
|
|
- типы веб-карт
|
|
|
|
- типы веб-карт
|
|
|
|
- клиент-серверную архитектуру
|
|
|
|
- клиент-серверную архитектуру
|
|
|
|
- HTML, CSS, JavaScript
|
|
|
|
- HTML, CSS, JavaScript
|
|
|
|
|
|
|
|
|
|
|
|
В рамках практической части создадим карту мира на основе статических GeoJSON-файлов с использованием открытой библиотеки MapLibre.
|
|
|
|
В рамках практической части создадим карту мира на основе GeoJSON-файлов с использованием открытой библиотеки MapLibre GL JS. При желании заранее посмотреть [полный код](https://github.com/gtitov/geojson-maplibre-map) и [возможный результат](https://gtitov.github.io/geojson-maplibre-map/).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Карты в Интернете
|
|
|
|
## Карты в Интернете
|
|
|
|
|
|
|
|
|
|
|
|
Любую ли карту в Интернете можно назвать веб-картой?
|
|
|
|
Любую ли карту в Интернете можно назвать веб-картой?
|
|
|
|
|
|
|
|
|
|
|
|
> Яндекс.Карты — конечно, да!
|
|
|
|
Яндекс.Карты — да!
|
|
|
|
>
|
|
|
|
|
|
|
|
> Скан карты России, который я отправил по почте — пожалуй, нет.
|
|
|
|
Скан карты России, который я отправил по почте — пожалуй, нет.
|
|
|
|
>
|
|
|
|
|
|
|
|
> И между ними ещё огромное множество различных вариантов карт в Интернете.
|
|
|
|
И между ними ещё огромное множество различных вариантов карт в Интернете.
|
|
|
|
|
|
|
|
|
|
|
|
### Определение веб-карты
|
|
|
|
### Определение веб-карты
|
|
|
|
|
|
|
|
|
|
|
|
Цель размещения карты в сети определяет веб-карту.
|
|
|
|
Веб-карту определяет цель размещения карты в сети. Если карту разместили в Интернете для того, чтобы пользователи могли работать с ней по сети, то это веб-карта. А файлы карт, передаваемые по сети или размещаемые на сайтах, изображения карт, используемые для оформления веб-страницы, веб-картами не являются.
|
|
|
|
|
|
|
|
|
|
|
|
Файлам карт, передаваемым по сети, или размещаемым на сайтах, изображениям карт для печати, загрузки, иллюстрации, украшения будет отказано в праве называться веб-картой. А вот если карту разместили в Интернете для того, чтобы пользователи могли работать с ней по сети, то это веб-карта.
|
|
|
|
<Card title="Веб-карта —">это карта, предназначенная для использования в сети</Card>
|
|
|
|
|
|
|
|
|
|
|
|
<Card title="Веб-карта —">это карта, предназначенная для использования в сети</Card>
|
|
|
|
### Типы веб-карт
|
|
|
|
|
|
|
|
|
|
|
|
### Типы веб-карт
|
|
|
|
Веб-карты можно разделить на интерактивные / неинтерактивные и статические / динамически
|
|
|
|
|
|
|
|
|
|
|
|
Веб-карты можно разделить на интерактивные / неинтерактивные и статические / динамически
|
|
|
|
| | статические | динамические |
|
|
|
|
|
|
|
|
| --------------- | ------------------- | --------------------------- |
|
|
|
|
| | статические | динамические |
|
|
|
|
| неинтерактивные | карты-картинки | генераторы карт-картинок |
|
|
|
|
| --------------- | ------------------- | --------------------------- |
|
|
|
|
| интерактивные | "простые" веб-карты | картографические приложения |
|
|
|
|
| неинтерактивные | карты-картинки | генераторы карт-картинок |
|
|
|
|
|
|
|
|
| интерактивные | "простые" веб-карты | картографические приложения |
|
|
|
|
Интерактивность подразумевает возможность пользователя перемещаться по карте, менять масштаб, получать подробную информацию по клику, скрывать слои, менять цвета и так далее.
|
|
|
|
|
|
|
|
|
|
|
|
Инерактивность подразумевает возможность пользователя перемещаться по карте, менять масштаб, получать подробную информацию по клику, скрывать слои, менять цвета и так далее. Неинтерактивные карты лишены этих возможностей. Но неинтерактивная карта будет веб-картой, если предназначена для использования в Интернете.
|
|
|
|
Неинтерактивные карты лишены этих возможностей. Но неинтерактивная карта будет веб-картой, если предназначена для использования в Интернете.
|
|
|
|
|
|
|
|
|
|
|
|
Статические веб-карты получают данные на клиент точно в том виде, в котором они хранятся на сервере, без какой-либо обработки. Из программного обеспечения требуется только веб-сервер, который будет принимать запросы от клиентов и возвращать в ответ файлы данных с сервера клиенту.
|
|
|
|
Статические веб-карты получают данные на клиент точно в том виде, в котором они хранятся на сервере, без какой-либо обработки. Из программного обеспечения требуется только веб-сервер, который будет принимать запросы от клиентов и возвращать в ответ файлы данных с сервера клиенту.
|
|
|
|
|
|
|
|
|
|
|
|
Динамические веб-карты подразумевают серверную обработку данных и позволяют запрашивать данные более гибко. Из программного обеспечения обычно используются база данных, программа для обработки данных и веб-сервер. В общем случае веб-сервер примет запрос и обратится к программе для обработки данных, она извлечёт данные из базы, обработает их и передаст веб-серверу, который отправит подготовленные данные клиенту.
|
|
|
|
Динамические веб-карты подразумевают серверную обработку данных и позволяют запрашивать данные более гибко. Из программного обеспечения обычно используются база данных, программа для обработки данных и веб-сервер. В общем случае веб-сервер примет запрос и обратится к программе для обработки данных, она извлечёт данные из базы, обработает их и передаст веб-серверу, который отправит подготовленные данные клиенту.
|
|
|
|
|
|
|
|
|
|
|
|
Интерактивность касается интерфейса и клиентской части, а деление на статические и динамические веб-карты связано с обработкой данных в серверной части.
|
|
|
|
Интерактивность касается интерфейса и клиентской части, а деление на статические и динамические веб-карты связано с обработкой данных в серверной части.
|
|
|
|
|
|
|
|
|
|
|
|
<LinkCard title='Другие продукты веб-картографии' href='/chapters/7-extra#кроме-веб-карт' description='Геопорталы, картографические веб-сервисы, веб-атласы, веб-ГИС'/>
|
|
|
|
<LinkCard title='Другие продукты веб-картографии' href='/98-extra#кроме-веб-карт' description='Геопорталы, картографические веб-сервисы, веб-атласы, веб-ГИС'/>
|
|
|
|
|
|
|
|
|
|
|
|
## Клиент-серверная архитектура
|
|
|
|
## Клиент-серверная архитектура
|
|
|
|
|
|
|
|
|
|
|
|
Рассмотрим пример работы простого веб-ресурса.
|
|
|
|
Рассмотрим пример работы веб-ресурса.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Пользователь вводит адрес запрашиваемого веб-ресурса в адресную строку браузера и нажимает клавишу Enter (1). Браузер инициирует и выполняет запрос к серверу на получение данных для создания веб-страницы (2). Сервер возвращает ответ (3). Из этого ответа браузер формирует веб-страницу, которую видит пользователь (4).
|
|
|
|
Пользователь вводит адрес запрашиваемого веб-ресурса в адресную строку браузера и нажимает клавишу Enter (1). Браузер инициирует и выполняет запрос к серверу на получение данных для создания веб-страницы (2). Сервер возвращает ответ (3). Из этого ответа браузер формирует веб-страницу, которую видит пользователь (4).
|
|
|
|
|
|
|
|
|
|
|
|
<Card title="Короче">
|
|
|
|
<Card title="Короче">
|
|
|
|
Браузер -- это клиент. Сервер -- это сервер. Клиент обращается к серверу с запросом, сервер возвращает клиенту ответ. Вот суть клиент-серверной архитектуры.
|
|
|
|
Браузер -- это клиент. Сервер -- это сервер. Клиент обращается к серверу с запросом, сервер возвращает клиенту ответ. Вот суть клиент-серверной архитектуры.
|
|
|
|
</Card>
|
|
|
|
</Card>
|
|
|
|
|
|
|
|
|
|
|
|
В реальности клиент может выполнять множество запросов к серверу, чтобы показать пользователю веб-страницу.
|
|
|
|
В реальности клиент может выполнять множество запросов к серверу, чтобы показать пользователю веб-страницу.
|
|
|
|
|
|
|
|
|
|
|
|
:::tip
|
|
|
|
:::tip
|
|
|
|
Откройте инструменты разработчика, нажав на клавишу F12 или сочетание клавиш Ctrl+Shift+i, перейдите во вкладку Сеть (Network) и обновите страницу, чтобы увидеть, сколько запросов выполняет браузер, чтобы показать вашу любимую веб-страницу.
|
|
|
|
Откройте инструменты разработчика, нажав на клавишу F12 или сочетание клавиш Ctrl+Shift+i, перейдите во вкладку Сеть (Network) и обновите страницу, чтобы увидеть, сколько запросов выполняет браузер, чтобы показать вашу любимую веб-страницу.
|
|
|
|
:::
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
|
|
Первый запрос инициирует пользователь выполняет путём ввода адреса. Дальнейшие действия пользователя на веб-странице могут инициировать последующие запросы. Запрашиваться могут как веб-страницы целиком, так и отдельные данные для обновления содержания текущей веб-страницы. Если мы обновляем только часть содержания веб-страницы данными с сервера, то речь идёт об асинхронном запросе.
|
|
|
|
Первый запрос инициирует пользователь выполняет путём ввода адреса. Дальнейшие действия пользователя на веб-странице могут инициировать последующие запросы. Запрашиваться могут как веб-страницы целиком, так и отдельные данные для обновления содержания текущей веб-страницы. Если мы обновляем только часть содержания веб-страницы данными с сервера, то речь идёт об асинхронном запросе.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
*Запросы, выполняемые с веб-страницы*
|
|
|
|
*Запросы, выполняемые с веб-страницы*
|
|
|
|
|
|
|
|
|
|
|
|
Веб-карты тоже строятся на основе клиент-серверной архитектуры. Рассмотрим интерактивную статическую карту.
|
|
|
|
Веб-карты тоже строятся на основе клиент-серверной архитектуры. Рассмотрим интерактивную статическую карту (пока воображаемую).
|
|
|
|
|
|
|
|
|
|
|
|
Разметка, стили, логика (программный код) веб-карты, а также наборы пространственных данных веб-карты хранятся на сервере. Пользователь вводит адрес карты. Браузер запрашивает с сервера разметку веб-карты (html). Разметка приходит в браузер. Разметра содержит запросы к стилям и логике веб-карты. Логика веб-карты приходит в браузер и запрашивает наборы пространственных данных для создания веб-карты. Пространственные данные приходят [Взаимодействие с сервером закончено!] и кодом веб-карты превращаются в картографические слои.
|
|
|
|
Разметка, стили, логика (программный код) веб-карты, а также наборы пространственных данных веб-карты хранятся на сервере. Пользователь вводит адрес карты. Браузер запрашивает с сервера разметку веб-карты (html). Разметка приходит в браузер. Разметка содержит запросы к стилям и логике веб-карты. Логика веб-карты приходит в браузер и запрашивает наборы пространственных данных для создания веб-карты. Пространственные данные приходят [Взаимодействие с сервером закончено!] и кодом веб-карты превращаются в картографические слои.
|
|
|
|
|
|
|
|
|
|
|
|
{/* <Card title='В клиент-серверной архитектуре браузер это'>
|
|
|
|
<Card title='В клиент-серверной архитектуре браузер это'>
|
|
|
|
<Question answer="клиент" ballast={['сервер', 'пользователь']} explanation="Пользователь использует браузер (клиент), чтобы выполнить запрос к серверу"/>
|
|
|
|
<MultipleChoice>
|
|
|
|
</Card> */}
|
|
|
|
<Option>
|
|
|
|
|
|
|
|
сервер
|
|
|
|
<Card title='В клиент-серверной архитектуре браузер это'>
|
|
|
|
</Option>
|
|
|
|
<MultipleChoice>
|
|
|
|
<Option isCorrect>
|
|
|
|
<Option>
|
|
|
|
клиент
|
|
|
|
сервер
|
|
|
|
</Option>
|
|
|
|
</Option>
|
|
|
|
<Option >
|
|
|
|
<Option isCorrect>
|
|
|
|
пользователь
|
|
|
|
клиент
|
|
|
|
</Option>
|
|
|
|
</Option>
|
|
|
|
</MultipleChoice>
|
|
|
|
<Option >
|
|
|
|
|
|
|
|
пользователь
|
|
|
|
<details>
|
|
|
|
</Option>
|
|
|
|
<summary>Развёрнутый ответ</summary>
|
|
|
|
</MultipleChoice>
|
|
|
|
Пользователь использует браузер (клиент), чтобы выполнить запрос к серверу
|
|
|
|
|
|
|
|
</details>
|
|
|
|
<details>
|
|
|
|
</Card>
|
|
|
|
<summary>Развёрнутый ответ</summary>
|
|
|
|
|
|
|
|
Пользователь использует браузер (клиент), чтобы выполнить запрос к серверу
|
|
|
|
## Создание первой веб-карты
|
|
|
|
</details>
|
|
|
|
|
|
|
|
</Card>
|
|
|
|
Мы рассмотрели интерактивную статическую карту, а сейчас мы её сделаем своими руками!
|
|
|
|
|
|
|
|
|
|
|
|
## Создание первой веб-карты
|
|
|
|
Выделим нашей первой веб-карте отдельную папку.
|
|
|
|
|
|
|
|
|
|
|
|
Мы рассмотрели интерактивную статическую карту, а сейчас мы её сделаем своими руками!
|
|
|
|
> В качестве среды разработки можно использовать [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).
|
|
|
|
Создадим файл разметки `index.html`.
|
|
|
|
|
|
|
|
|
|
|
|
### Инициализация карты
|
|
|
|
```html title="index.html"
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
Создадим файл разметки `index.html`.
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
|
|
```html title="index.html"
|
|
|
|
<head>
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<html lang="en">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
|
|
<title>Население мира</title>
|
|
|
|
<head>
|
|
|
|
<!-- Запрашиваем стили 👇 -->
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<!-- Запрашиваем библиотеку Maplibre 👇 -->
|
|
|
|
<title>Население мира</title>
|
|
|
|
<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" />
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
</head>
|
|
|
|
<!-- Запрашиваем библиотеку Maplibre 👇 -->
|
|
|
|
|
|
|
|
<script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
|
|
|
|
<body>
|
|
|
|
<link href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css" rel="stylesheet" />
|
|
|
|
<!-- Размечаем контейнер для карты 👇 -->
|
|
|
|
</head>
|
|
|
|
<div id="map"></div>
|
|
|
|
|
|
|
|
<!-- Запрашиваем логику карты 👇 -->
|
|
|
|
<body>
|
|
|
|
<script src="main.js"></script>
|
|
|
|
<!-- Размечаем контейнер для карты 👇 -->
|
|
|
|
</body>
|
|
|
|
<div id="map"></div>
|
|
|
|
|
|
|
|
<!-- Запрашиваем логику карты 👇 -->
|
|
|
|
</html>
|
|
|
|
<script src="main.js"></script>
|
|
|
|
```
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
Библиотеку Maplibre мы запрашиваем из внешнего ресурса, а вот стили и логику карты нам нужно создать.
|
|
|
|
</html>
|
|
|
|
|
|
|
|
```
|
|
|
|
Создадим файл стилей `style.css`.
|
|
|
|
|
|
|
|
|
|
|
|
Библиотеку Maplibre мы запрашиваем из внешнего ресурса, а вот стили и логику карты нам нужно создать.
|
|
|
|
```css title="style.css"
|
|
|
|
|
|
|
|
/* Объявляем, что контейнер карты должен занимать всю страницу */
|
|
|
|
Создадим файл стилей `style.css`.
|
|
|
|
#map {
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
```css title="style.css"
|
|
|
|
top: 0;
|
|
|
|
/* Объявляем, что контейнер карты должен занимать всю страницу */
|
|
|
|
bottom: 0;
|
|
|
|
#map {
|
|
|
|
left: 0;
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
top: 0;
|
|
|
|
}
|
|
|
|
bottom: 0;
|
|
|
|
```
|
|
|
|
left: 0;
|
|
|
|
|
|
|
|
right: 0;
|
|
|
|
И файл с логикой карты `main.js`.
|
|
|
|
}
|
|
|
|
|
|
|
|
```
|
|
|
|
```js title="main.js"
|
|
|
|
|
|
|
|
// Инициализируем карту
|
|
|
|
И файл с логикой карты `main.js`.
|
|
|
|
const map = new maplibregl.Map({
|
|
|
|
|
|
|
|
container: 'map',
|
|
|
|
```js title="main.js"
|
|
|
|
style: "https://raw.githubusercontent.com/gtitov/basemaps/refs/heads/master/positron-nolabels.json",
|
|
|
|
// Инициализируем карту
|
|
|
|
center: [51, 0],
|
|
|
|
const map = new maplibregl.Map({
|
|
|
|
zoom: 4
|
|
|
|
container: 'map',
|
|
|
|
});
|
|
|
|
style: "https://raw.githubusercontent.com/gtitov/basemaps/refs/heads/master/positron-nolabels.json",
|
|
|
|
```
|
|
|
|
center: [51, 0],
|
|
|
|
|
|
|
|
zoom: 4
|
|
|
|
> Наименование файла `index.html` важно тем, что именно страница `index.html` загружается при обращении к корневому URL. Наименования файлов CSS и JavaScript особой роли не играют.
|
|
|
|
});
|
|
|
|
>
|
|
|
|
```
|
|
|
|
> Страница HTML является корневой. Ей необходимо дать информацию о том, какие внешние библиотеки и файлы будут использоваться. Например, `style.css` и `main.js` являются внешними файлами, а MapLibre является внешней библиотекой. Находящиеся на сервере файлы необходимо подключать по URL.
|
|
|
|
|
|
|
|
|
|
|
|
> Наименование файла `index.html` важно тем, что именно страница `index.html` загружается при обращении к корневому URL. Наименования файлов CSS и JavaScript особой роли не играют.
|
|
|
|
После этого запустим Live Server, перейдём по адресу локального сервера и увидим карту.
|
|
|
|
>
|
|
|
|
|
|
|
|
> Страница HTML является корневой. Ей необходимо дать информацию о том, какие внешние библиотеки и файлы будут использоваться. Например, `style.css` и `main.js` являются внешними файлами, а MapLibre является внешней библиотекой. Находящиеся на сервере файлы необходимо подключать по URL.
|
|
|
|
> Live Server обычно запускается по адресу `127.0.0.1:5500`. `127.0.0.1` или `localhost` -- это внутренний адрес сервера на нашем компьютере. Он будет одним и тем же у всех компьютеров. И он недоступен для запросов снаружи. На одном веб-сервере может быть запущено несколько приложений. Для их разграничения используется порт, в нашем случае `5500`.
|
|
|
|
|
|
|
|
|
|
|
|
После этого запустим Live Server, перейдём по адресу локального сервера и увидим карту.
|
|
|
|
### Добавление слоёв
|
|
|
|
|
|
|
|
|
|
|
|
> Live Server обычно запускается по адресу `127.0.0.1:5500`. `127.0.0.1` или `localhost` -- это внутренний адрес сервера на нашем компьютере. Он будет одним и тем же у всех компьютеров. И он недоступен для запросов снаружи. На одном веб-сервере может быть запущено несколько приложений. Для их разграничения используется порт, в нашем случае `5500`.
|
|
|
|
Создадим подпапку `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 файлы хранят пространственные данные.
|
|
|
|
|
|
|
|
|
|
|
|
Создадим подпапку `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).
|
|
|
|
<FileTree>
|
|
|
|
|
|
|
|
- data/ # данные
|
|
|
|
Должна получится такая структура. HTML отвечает за структуру веб-страницы, CSS за оформление веб-страницы, JavaScript за логику работы веб-страницы. GeoJSON файлы хранят пространственные данные.
|
|
|
|
- cities.geojson # города
|
|
|
|
|
|
|
|
- countries.geojson # страны
|
|
|
|
<FileTree>
|
|
|
|
- lakes.geojson # озёра
|
|
|
|
- data/ # данные
|
|
|
|
- rivers.geojson # реки
|
|
|
|
- cities.geojson # города
|
|
|
|
- index.html # разметка
|
|
|
|
- countries.geojson # страны
|
|
|
|
- style.css # стили
|
|
|
|
- lakes.geojson # озёра
|
|
|
|
- main.js # логика
|
|
|
|
- rivers.geojson # реки
|
|
|
|
</FileTree>
|
|
|
|
- index.html # разметка
|
|
|
|
|
|
|
|
- style.css # стили
|
|
|
|
Все действия с картой выполняются после первичной загрузки исходной карты.
|
|
|
|
- main.js # логика
|
|
|
|
|
|
|
|
</FileTree>
|
|
|
|
Добавление картографических слоёв включает два шага: добавление источника данных `addSource` и добавление слоя `addLayer`. На первом шаге указываем, откуда мы будем брать данные, а на втором, как их оформить. Из одного источника можно создать несколько слоёв.
|
|
|
|
|
|
|
|
|
|
|
|
Все действия с картой выполняются после первичной загрузки исходной карты.
|
|
|
|
```js title="main.js"
|
|
|
|
|
|
|
|
// Инициализируем карту
|
|
|
|
Добавление картографических слоёв включает два шага: добавление источника данных `addSource` и добавление слоя `addLayer`. На первом шаге указываем, откуда мы будем брать данные, а на втором, как их оформить. Из одного источника можно создать несколько слоёв.
|
|
|
|
// ... этим многоточием отмечен код, который мы уже написали
|
|
|
|
|
|
|
|
// в случае сомнений всегда можно свериться с полным кодом веб-карты
|
|
|
|
```js title="main.js"
|
|
|
|
// ссылка на него есть в конце упражнения
|
|
|
|
// Инициализируем карту
|
|
|
|
|
|
|
|
...
|
|
|
|
map.on('load', () => {
|
|
|
|
map.on('load', () => {
|
|
|
|
// Выполняется после загрузки карты
|
|
|
|
// Выполняется после загрузки карты
|
|
|
|
// Добавление источника данных
|
|
|
|
// Добавление источника данных
|
|
|
|
map.addSource('countries', {
|
|
|
|
map.addSource('countries', {
|
|
|
|
type: 'geojson',
|
|
|
|
type: 'geojson',
|
|
|
|
data: './data/countries.geojson',
|
|
|
|
data: './data/countries.geojson',
|
|
|
|
attribution: 'Natural Earth'
|
|
|
|
attribution: 'Natural Earth'
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// Добавление слоя
|
|
|
|
// Добавление слоя
|
|
|
|
map.addLayer({
|
|
|
|
map.addLayer({
|
|
|
|
id: 'countries-layer',
|
|
|
|
id: 'countries-layer',
|
|
|
|
type: 'fill',
|
|
|
|
type: 'fill',
|
|
|
|
source: 'countries',
|
|
|
|
source: 'countries',
|
|
|
|
paint: {
|
|
|
|
paint: {
|
|
|
|
'fill-color': 'lightgray',
|
|
|
|
'fill-color': 'lightgray',
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
Мы добавили полигональный слой (`type: 'fill'`). Аналогично добавляем слой линий и слой точек.
|
|
|
|
Мы добавили полигональный слой (`type: 'fill'`). Аналогично добавляем слой линий и слой точек.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```js title="main.js"
|
|
|
|
```js title="main.js"
|
|
|
|
// Инициализируем карту
|
|
|
|
// Инициализируем карту
|
|
|
|
...
|
|
|
|
...
|
|
|
|
map.on('load', () => {
|
|
|
|
map.on('load', () => {
|
|
|
|
// Выполняется после загрузки карты
|
|
|
|
// Выполняется после загрузки карты
|
|
|
|
...
|
|
|
|
...
|
|
|
|
map.addSource('rivers', {
|
|
|
|
map.addSource('rivers', {
|
|
|
|
type: 'geojson',
|
|
|
|
type: 'geojson',
|
|
|
|
data: './data/rivers.geojson'
|
|
|
|
data: './data/rivers.geojson'
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
map.addLayer({
|
|
|
|
map.addLayer({
|
|
|
|
id: 'rivers-layer',
|
|
|
|
id: 'rivers-layer',
|
|
|
|
type: 'line',
|
|
|
|
type: 'line',
|
|
|
|
source: 'rivers',
|
|
|
|
source: 'rivers',
|
|
|
|
paint: {
|
|
|
|
paint: {
|
|
|
|
'line-color': '#00BFFF'
|
|
|
|
'line-color': '#00BFFF'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
map.addSource('lakes', {
|
|
|
|
map.addSource('lakes', {
|
|
|
|
type: 'geojson',
|
|
|
|
type: 'geojson',
|
|
|
|
data: './data/lakes.geojson'
|
|
|
|
data: './data/lakes.geojson'
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
map.addLayer({
|
|
|
|
map.addLayer({
|
|
|
|
id: 'lakes-layer',
|
|
|
|
id: 'lakes-layer',
|
|
|
|
type: 'fill',
|
|
|
|
type: 'fill',
|
|
|
|
source: 'lakes',
|
|
|
|
source: 'lakes',
|
|
|
|
paint: {
|
|
|
|
paint: {
|
|
|
|
'fill-color': 'lightblue',
|
|
|
|
'fill-color': 'lightblue',
|
|
|
|
'fill-outline-color': '#00BFFF'
|
|
|
|
'fill-outline-color': '#00BFFF'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
map.addSource('cities', {
|
|
|
|
map.addSource('cities', {
|
|
|
|
type: 'geojson',
|
|
|
|
type: 'geojson',
|
|
|
|
data: './data/cities.geojson'
|
|
|
|
data: './data/cities.geojson'
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
map.addLayer({
|
|
|
|
map.addLayer({
|
|
|
|
id: 'cities-layer',
|
|
|
|
id: 'cities-layer',
|
|
|
|
type: 'circle',
|
|
|
|
type: 'circle',
|
|
|
|
source: 'cities',
|
|
|
|
source: 'cities',
|
|
|
|
paint: {
|
|
|
|
paint: {
|
|
|
|
'circle-color': 'rgb(123, 12, 234)',
|
|
|
|
'circle-color': 'rgb(123, 12, 234)',
|
|
|
|
'circle-radius': 3
|
|
|
|
'circle-radius': 3
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
:::tip
|
|
|
|
:::tip
|
|
|
|
Порядок отрисовки слоёв соответсвует порядку их объявления в коде. Последующие слои перекрывают предыдущие.
|
|
|
|
Порядок отрисовки слоёв соответсвует порядку их объявления в коде. Последующие слои перекрывают предыдущие.
|
|
|
|
:::
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
В MapLibre слои можно фильтровать и оформлять на основе атрибутов с помощью [выражений](https://maplibre.org/maplibre-style-spec/expressions/).
|
|
|
|
В MapLibre слои можно фильтровать и оформлять на основе атрибутов с помощью [выражений](https://maplibre.org/maplibre-style-spec/expressions/).
|
|
|
|
|
|
|
|
|
|
|
|
Например, оставим только города с численностью населения больше 1 000 000
|
|
|
|
Например, оставим только города с численностью населения больше 1 000 000
|
|
|
|
|
|
|
|
|
|
|
|
```diff lang="js" title="main.js"
|
|
|
|
```diff lang="js" title="main.js"
|
|
|
|
// Инициализируем карту
|
|
|
|
// Инициализируем карту
|
|
|
|
...
|
|
|
|
...
|
|
|
|
map.on('load', () => {
|
|
|
|
map.on('load', () => {
|
|
|
|
// Выполняется после загрузки карты
|
|
|
|
// Выполняется после загрузки карты
|
|
|
|
...
|
|
|
|
...
|
|
|
|
map.addLayer({
|
|
|
|
map.addLayer({
|
|
|
|
id: 'cities-layer',
|
|
|
|
id: 'cities-layer',
|
|
|
|
type: 'circle',
|
|
|
|
type: 'circle',
|
|
|
|
source: 'cities',
|
|
|
|
source: 'cities',
|
|
|
|
paint: {
|
|
|
|
paint: {
|
|
|
|
'circle-color': 'rgb(123, 12, 234)',
|
|
|
|
'circle-color': 'rgb(123, 12, 234)',
|
|
|
|
'circle-radius': 3
|
|
|
|
'circle-radius': 3
|
|
|
|
},
|
|
|
|
},
|
|
|
|
+ filter: ['>', ['get', 'POP_MAX'], 1000000]
|
|
|
|
+ filter: ['>', ['get', 'POP_MAX'], 1000000]
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
Изобразим красным (`red`) цветом страны, у которых атрибут `MAPCOLOR7` равен 1, а остальные изобразим светло-серым (`lightgray`)
|
|
|
|
Изобразим красным (`red`) цветом страны, у которых атрибут `MAPCOLOR7` равен 1, а остальные изобразим светло-серым (`lightgray`)
|
|
|
|
|
|
|
|
|
|
|
|
```diff lang="js" title="main.js"
|
|
|
|
```diff lang="js" title="main.js"
|
|
|
|
// Инициализируем карту
|
|
|
|
// Инициализируем карту
|
|
|
|
...
|
|
|
|
...
|
|
|
|
map.on('load', () => {
|
|
|
|
map.on('load', () => {
|
|
|
|
// Выполняется после загрузки карты
|
|
|
|
// Выполняется после загрузки карты
|
|
|
|
...
|
|
|
|
...
|
|
|
|
map.addLayer({
|
|
|
|
map.addLayer({
|
|
|
|
id: 'countries-layer',
|
|
|
|
id: 'countries-layer',
|
|
|
|
type: 'fill',
|
|
|
|
type: 'fill',
|
|
|
|
source: 'countries',
|
|
|
|
source: 'countries',
|
|
|
|
paint: {
|
|
|
|
paint: {
|
|
|
|
- 'fill-color': 'lightgray',
|
|
|
|
- 'fill-color': 'lightgray',
|
|
|
|
+ 'fill-color': ['match', ['get', 'MAPCOLOR7'], 1, 'red', 'lightgray']
|
|
|
|
+ 'fill-color': ['match', ['get', 'MAPCOLOR7'], 1, 'red', 'lightgray']
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
...
|
|
|
|
...
|
|
|
|
})
|
|
|
|
})
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### Расширение интерактивности
|
|
|
|
### Расширение интерактивности
|
|
|
|
|
|
|
|
|
|
|
|
Созданная нами карта сразу даёт пользователю возможности перемещения, зума и даже наклона (попробуйте зажать правую кнопку мыши). Однако чтобы, например, выводить атрибутивные сведения о слое по клику, надо указать это в коде.
|
|
|
|
Созданная нами карта сразу даёт пользователю возможности перемещения, зума и даже наклона (попробуйте зажать правую кнопку мыши). Однако чтобы, например, выводить атрибутивные сведения о слое по клику, надо указать это в коде.
|
|
|
|
|
|
|
|
|
|
|
|
Отследим событие клика по слою `cities-layer`. Назовём событие клика переменной `e`. Посмотрим в консоли браузера, что собой представляет это событие. Если мы отслеживаем событие клика по конкретному слою, а не по всей карте, то мы можем обратиться к набору объектов, по которым был выполнен клик `e.features`
|
|
|
|
Отследим событие клика по слою `cities-layer`. Назовём событие клика переменной `e`. Посмотрим в консоли браузера, что собой представляет это событие. Если мы отслеживаем событие клика по конкретному слою, а не по всей карте, то мы можем обратиться к набору объектов, по которым был выполнен клик `e.features`
|
|
|
|
|
|
|
|
|
|
|
|
```js title="main.js"
|
|
|
|
```js title="main.js"
|
|
|
|
// Инициализируем карту
|
|
|
|
// Инициализируем карту
|
|
|
|
...
|
|
|
|
...
|
|
|
|
map.on('load', () => {
|
|
|
|
map.on('load', () => {
|
|
|
|
// Выполняется после загрузки карты
|
|
|
|
// Выполняется после загрузки карты
|
|
|
|
...
|
|
|
|
...
|
|
|
|
map.on('click', ['cities-layer'], (e) => {
|
|
|
|
map.on('click', ['cities-layer'], (e) => {
|
|
|
|
console.log(e)
|
|
|
|
console.log(e)
|
|
|
|
console.log(e.features)
|
|
|
|
console.log(e.features)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
Закомментируем вывод в консоль и выведем по клику на слой попап.
|
|
|
|
Закомментируем вывод в консоль и выведем по клику на слой попап.
|
|
|
|
|
|
|
|
|
|
|
|
```js title="main.js"
|
|
|
|
```js title="main.js"
|
|
|
|
// Инициализируем карту
|
|
|
|
// Инициализируем карту
|
|
|
|
...
|
|
|
|
...
|
|
|
|
map.on('load', () => {
|
|
|
|
map.on('load', () => {
|
|
|
|
// Выполняется после загрузки карты
|
|
|
|
// Выполняется после загрузки карты
|
|
|
|
...
|
|
|
|
...
|
|
|
|
map.on('click', ['cities-layer'], (e) => {
|
|
|
|
map.on('click', ['cities-layer'], (e) => {
|
|
|
|
// console.log(e)
|
|
|
|
// console.log(e)
|
|
|
|
// console.log(e.features)
|
|
|
|
// console.log(e.features)
|
|
|
|
new maplibregl.Popup() // создадим попап
|
|
|
|
new maplibregl.Popup() // создадим попап
|
|
|
|
.setLngLat(e.features[0].geometry.coordinates) // установим на координатах объекта
|
|
|
|
.setLngLat(e.features[0].geometry.coordinates) // установим на координатах объекта
|
|
|
|
.setHTML(e.features[0].properties.NAME) // заполним текстом из атрибута с именем объекта
|
|
|
|
.setHTML(e.features[0].properties.NAME) // заполним текстом из атрибута с именем объекта
|
|
|
|
.addTo(map); // добавим на карту
|
|
|
|
.addTo(map); // добавим на карту
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
Попап отображается, но надо показать пользователю, что на объект можно кликать. При попадании мыши на слой `cities-layer` поменяем курсор на pointer, а при покидании слоя `cities-layer` вернём значение по умолчанию.
|
|
|
|
Попап отображается, но надо показать пользователю, что на объект можно кликать. При попадании мыши на слой `cities-layer` поменяем курсор на pointer, а при покидании слоя `cities-layer` вернём значение по умолчанию.
|
|
|
|
|
|
|
|
|
|
|
|
```js title="main.js"
|
|
|
|
```js title="main.js"
|
|
|
|
// Инициализируем карту
|
|
|
|
// Инициализируем карту
|
|
|
|
...
|
|
|
|
...
|
|
|
|
map.on('load', () => {
|
|
|
|
map.on('load', () => {
|
|
|
|
// Выполняется после загрузки карты
|
|
|
|
// Выполняется после загрузки карты
|
|
|
|
...
|
|
|
|
...
|
|
|
|
map.on('mouseenter', 'cities-layer', () => {
|
|
|
|
map.on('mouseenter', 'cities-layer', () => {
|
|
|
|
map.getCanvas().style.cursor = 'pointer'
|
|
|
|
map.getCanvas().style.cursor = 'pointer'
|
|
|
|
})
|
|
|
|
})
|
|
|
|
map.on('mouseleave', 'cities-layer', () => {
|
|
|
|
map.on('mouseleave', 'cities-layer', () => {
|
|
|
|
map.getCanvas().style.cursor = ''
|
|
|
|
map.getCanvas().style.cursor = ''
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
В качестве завершающего штриха уберём карту подложку и добавим фон. При этом фон добавляем перед всеми слоями, так как все слои должны рисоваться после фона, поверх него.
|
|
|
|
В качестве завершающего штриха уберём карту подложку и добавим фон. При этом фон добавляем перед всеми слоями, так как все слои должны рисоваться после фона, поверх него.
|
|
|
|
|
|
|
|
|
|
|
|
```diff lang="js" title="main.js"
|
|
|
|
```diff lang="js" title="main.js"
|
|
|
|
// Инициализируем карту
|
|
|
|
// Инициализируем карту
|
|
|
|
const map = new maplibregl.Map({
|
|
|
|
const map = new maplibregl.Map({
|
|
|
|
container: 'map',
|
|
|
|
container: 'map',
|
|
|
|
- style: "https://raw.githubusercontent.com/gtitov/basemaps/refs/heads/master/positron-nolabels.json",
|
|
|
|
- style: "https://raw.githubusercontent.com/gtitov/basemaps/refs/heads/master/positron-nolabels.json",
|
|
|
|
+ style: {
|
|
|
|
+ style: {
|
|
|
|
+ "version": 8,
|
|
|
|
+ "version": 8,
|
|
|
|
+ "sources": {},
|
|
|
|
+ "sources": {},
|
|
|
|
+ "layers": []
|
|
|
|
+ "layers": []
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
center: [51, 0],
|
|
|
|
center: [51, 0],
|
|
|
|
zoom: 4
|
|
|
|
zoom: 4
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
map.on('load', () => {
|
|
|
|
map.on('load', () => {
|
|
|
|
// Выполняется после загрузки карты
|
|
|
|
// Выполняется после загрузки карты
|
|
|
|
+ map.addLayer({
|
|
|
|
+ map.addLayer({
|
|
|
|
+ id: 'background',
|
|
|
|
+ id: 'background',
|
|
|
|
+ type: 'background',
|
|
|
|
+ type: 'background',
|
|
|
|
+ paint: {
|
|
|
|
+ paint: {
|
|
|
|
+ 'background-color': 'lightblue'
|
|
|
|
+ 'background-color': 'lightblue'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
...
|
|
|
|
...
|
|
|
|
})
|
|
|
|
})
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
У нас получилась отличная карта!
|
|
|
|
У нас получилась отличная карта!
|
|
|
|
|
|
|
|
|
|
|
|
При желании посмотрите [полный код](https://github.com/gtitov/geojson-maplibre-map) и [возможный результат](https://gtitov.github.io/geojson-maplibre-map/).
|
|
|
|
При желании посмотрите [полный код](https://github.com/gtitov/geojson-maplibre-map) и [возможный результат](https://gtitov.github.io/geojson-maplibre-map/).
|
|
|
|
|
|
|
|
|
|
|
|
## Что мы получили
|
|
|
|
## Что мы получили
|
|
|
|
|
|
|
|
|
|
|
|
Откроем вкладку Сеть в инструментах разработчика и ещё разок проследим поток данных
|
|
|
|
Откроем вкладку Сеть в инструментах разработчика и ещё разок проследим поток данных
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1. Пользователь вводит адрес карты в браузере (в клиенте)
|
|
|
|
1. Пользователь вводит адрес карты в браузере (в клиенте)
|
|
|
|
1. Клиент выполняет запрос к серверу по введённому адресу
|
|
|
|
1. Клиент выполняет запрос к серверу по введённому адресу
|
|
|
|
1. Сервер обрабатывает запрос и возвращает разметку (HTML) (1)
|
|
|
|
1. Сервер обрабатывает запрос и возвращает разметку (HTML) (1)
|
|
|
|
1. В разметке содержаться запросы к офомлению (CSS), картографической библиотеке (MapLibre) и программной логике работы (JavaScript) веб-страницы (2)
|
|
|
|
1. В разметке содержаться запросы к офомлению (CSS), картографической библиотеке (MapLibre) и программной логике работы (JavaScript) веб-страницы (2)
|
|
|
|
1. Клиент (браузер), получив все необходимые сведения, отображает веб-страницу
|
|
|
|
1. Клиент (браузер), получив все необходимые сведения, отображает веб-страницу
|
|
|
|
1. Программная логика работы полученной веб-страницы выполняется и в соотстветвии с кодом инициирует запросы к данным (GeoJSON) для составления карты (3)
|
|
|
|
1. Программная логика работы полученной веб-страницы выполняется и в соотстветвии с кодом инициирует запросы к данным (GeoJSON) для составления карты (3)
|
|
|
|
1. Полученные данные оформляются на веб-карте в рамках описанной разработчиком на языке JavaScript логики с использованием функций библиотеки MapLibre
|
|
|
|
1. Полученные данные оформляются на веб-карте в рамках описанной разработчиком на языке JavaScript логики с использованием функций библиотеки MapLibre
|
|
|
|
1. Пользователь получает веб-карту
|
|
|
|
1. Пользователь получает веб-карту
|
|
|
|
1. Веб-карта обогащается дополнительной интерактивностью в рамках описанной разработчиком логики
|
|
|
|
1. Веб-карта обогащается дополнительной интерактивностью в рамках описанной разработчиком логики
|
|
|
|
|
|
|
|
|
|
|
|
Такая карта удобна, когда немного данных, потому что мы всё переправляем пользователю данные как есть. Когда мы отправляем пользователю данные как есть, почти не требуется серверных мощностей, поэтому для таких карт есть варианты бесплатного размещения в Интернете.
|
|
|
|
Такая карта удобна, когда немного данных, потому что мы всё переправляем пользователю данные как есть. Когда мы отправляем пользователю данные как есть, почти не требуется серверных мощностей, поэтому для таких карт есть варианты бесплатного размещения в Интернете.
|
|
|
|
|
|
|
|
|
|
|
|
## Упражнения
|
|
|
|
## Упражнения
|
|
|
|
|
|
|
|
|
|
|
|
1. Покрасьте Москву в красный цвет
|
|
|
|
1. Покрасьте Москву в красный цвет
|
|
|
|
2. Выведите в попап один из атрибутов стран
|
|
|
|
2. Выведите в попап один из атрибутов стран
|
|
|
|
3. Добавьте слой с границами озёр, установите им толщину в 2 пикселя
|
|
|
|
3. Добавьте слой с границами озёр, установите им толщину в 2 пикселя
|
|
|
|
4. Замените курсор на перекрестие (`crosshair`) при расположении поверх стран
|
|
|
|
4. Замените курсор на перекрестие (`crosshair`) при расположении поверх стран
|
|
|
|
5. ⁎ Офомление карты оставляет желать лучшего. Попробуйте оформить карту в соответствии с собственными представлениями о прекрасном.
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
## Контрольные вопросы
|
|
|
|
|
|
|
|
|
|
|
|
Титов Г. С. Введение в веб-картографию / Веб-картография : учебные материалы. Москва, 2025.
|
|
|
|
1. В каком файле описывается разметка веб-страницы?
|
|
|
|
|
|
|
|
1. Какой тег содержит ссылку на стили веб-страницы?
|
|
|
|
|
|
|
|
1. Что означает `container: 'map'` в коде `new maplibregl.Map({ container: 'map', ... })`?
|
|
|
|
|
|
|
|
1. Какой метод библиотеки MapLibre позволяет добавить картографический слой на карту?
|
|
|
|
|
|
|
|
1. Какой тип слоя используется для отображения полигонов озёр?
|
|
|
|
|
|
|
|
1. Какой текстовый формат пространственных данных может использоваться в качестве источника пространственных данных для библиотеки MapLibre?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Титов Г. С. Практическое введение в веб-картографию. Москва, 2025.
|
gman
6 months ago
