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

edits

Browse Source
master
gman 1 year ago
parent bb5926aa0d
commit 4841ca8788
2 changed files with 47 additions and 39 deletions
Show Stats Download Patch File Download Diff File

8
src/content/docs/chapters/2-webmap.mdx
Unescape View File

@ -29,8 +29,6 @@ import Question from '../../../components/Question.astro'
Файлам карт, передаваемым по сети, или размещаемым на сайтах, изображениям карт для печати, загрузки, иллюстрации, украшения будет отказано в праве называться веб-картой. А вот если карту разместили в Интернете для того, чтобы пользователи могли работать с ней по сети, то это веб-карта. Файлам карт, передаваемым по сети, или размещаемым на сайтах, изображениям карт для печати, загрузки, иллюстрации, украшения будет отказано в праве называться веб-картой. А вот если карту разместили в Интернете для того, чтобы пользователи могли работать с ней по сети, то это веб-карта.
Другими словами, если целью размещения карты в сети является её публикация.
<Card title="Веб-карта —">это карта, предназначенная для использования в сети</Card> <Card title="Веб-карта —">это карта, предназначенная для использования в сети</Card>
### Типы веб-карт ### Типы веб-карт
@ -321,7 +319,7 @@ map.on('load', () => {
}) })
``` ```
Закомментируем вывод в консоль. Создадим попап. Установим его на координатах кликнутого объекта. Заполним попап текстом из атрибута с именем объекта. Добавим попап на карте. Закомментируем вывод в консоль и выведем по клику на слой попап.
```js title="main.js" ```js title="main.js"
// Инициализируем карту // Инициализируем карту
@ -390,7 +388,7 @@ map.on('load', () => {
При желании посмотрите [полный код](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/).
### Что мы получили ## Что мы получили
Откроем вкладку Сеть в инструментах разработчика и ещё разок проследим поток данных Откроем вкладку Сеть в инструментах разработчика и ещё разок проследим поток данных
@ -408,7 +406,7 @@ map.on('load', () => {
Такая карта удобна, когда немного данных, потому что мы всё переправляем пользователю данные как есть. Когда мы отправляем пользователю данные как есть, почти не требуется серверных мощностей, поэтому для таких карт есть варианты бесплатного размещения в Интернете. Такая карта удобна, когда немного данных, потому что мы всё переправляем пользователю данные как есть. Когда мы отправляем пользователю данные как есть, почти не требуется серверных мощностей, поэтому для таких карт есть варианты бесплатного размещения в Интернете.
### Упражнения ## Упражнения
1. Покрасьте Москву в красный цвет 1. Покрасьте Москву в красный цвет
2. Выведите в попап один из атрибутов стран 2. Выведите в попап один из атрибутов стран

78
src/content/docs/chapters/3-api.mdx
Unescape View File

@ -7,11 +7,12 @@ import Question from '../../../components/Question.astro'
В этой главе В этой главе
- определение API - определение API
- асинхронность JavaScript - асинхронность JavaScript
- запрос fetch...then - запрос `fetch...then`
## API ## API
@ -104,7 +105,7 @@ map.on("load", () => {
В консоль вывелся Promise -- обещание того, что браузер уже занимается нашим запросом. Ответ от сервера не вывелся, хотя во вкладке Сеть мы видим, что данные загружены. Дело в том, что вывод в консоль был выполнен раньше, чем мы получили ответ от сервера. В консоль вывелся Promise -- обещание того, что браузер уже занимается нашим запросом. Ответ от сервера не вывелся, хотя во вкладке Сеть мы видим, что данные загружены. Дело в том, что вывод в консоль был выполнен раньше, чем мы получили ответ от сервера.
> Браузер начал исполнять наш код, увидел запрос к внешему ресурсу и подумал: "Здесь можно завязнуть. Ещё неизвестно, сколько этот внешний ресурс будет отвечать. Я верну пока обещание, что когда будет ответ, я его предоставлю, и отправлю запрос. А пока жду ответа буду дальше код выполнять."" > Браузер начал исполнять наш код, увидел запрос к внешему ресурсу и подумал: "Здесь можно завязнуть. Ещё неизвестно, сколько этот внешний ресурс будет отвечать. Я верну пока обещание, что когда будет ответ, я его предоставлю, и отправлю запрос. А пока жду ответа буду дальше код выполнять."
Запрос к внешнему ресурсу выполняется асинхронно, то есть изымается из последовательного выполнения программного кода и выполняется отдельно. Поэтому вывод в консоль выполняется раньше того, как данные получены. Запрос к внешнему ресурсу выполняется асинхронно, то есть изымается из последовательного выполнения программного кода и выполняется отдельно. Поэтому вывод в консоль выполняется раньше того, как данные получены.
@ -121,6 +122,7 @@ map.on("load", () => {
}) })
``` ```
<details> <details>
<summary>В первой карте тоже был асинхронный код</summary> <summary>В первой карте тоже был асинхронный код</summary>
@ -132,36 +134,32 @@ map.on("load", () => {
MapLibre не может работать с форматом CSV. Мы должны преобразовать данные в знакомый формат GeoJSON. Сделаем это! MapLibre не может работать с форматом CSV. Мы должны преобразовать данные в знакомый формат GeoJSON. Сделаем это!
```js title="main.js" Подключим библиотеку для чтения CSV данных в JS-объект.
.then((csv) => {
const csvRows = csv.split("\r\n"); // разбиваем текст на строки
const colnames = csvRows[0].split(",") // разбиваем первую строку по колонкам
const rows = csvRows.slice(1); // берём всё кроме первой строки
// Формируем объекты GeoJSON
const geojsonFeatures = rows.map((row) => { // проходим по каждой строке
const rowValues = row.split(","); // разбиваем строку по колонкам
// Формируем атрибуты объекта ```html title="index.html"
const properties = {} <head>
rowValues.map((propertyValue, index) => { ...
properties[colnames[index]] = propertyValue // названия атрибутов берём из первой строки <script src="https://unpkg.com/papaparse@5.4.1/papaparse.min.js"></script>
}) </head>
```
// Формируем геометрию объекта Выполним чтение CSV данных c использованием подключенной библиотеки и сконструируем GeoJSON-объект.
const geometry = {
type: "Point",
coordinates: [properties.lon, properties.lat],
}
// Собираем GeoJSON объект ```js title="main.js"
.then((csv) => {
const rows = Papa.parse(csv, { header: true }) // читаем CSV
// console.log(rows) // любуемся
// Формируем объекты GeoJSON
const geojsonFeatures = rows.data.map((row) => {
return { return {
type: "Feature", type: "Feature",
properties: properties, properties: row,
geometry: geometry geometry: {
type: "Point",
coordinates: [row.lon, row.lat],
}
} }
}) })
// Собираем полный GeoJSON
const geojson = { const geojson = {
type: "FeatureCollection", type: "FeatureCollection",
features: geojsonFeatures features: geojsonFeatures
@ -169,7 +167,7 @@ MapLibre не может работать с форматом CSV. Мы долж
}) })
``` ```
Своими руками собрали GeoJSON из CSV-данных! GeoJSON уже можно использовать в качестве источника для MapLibre. GeoJSON уже можно использовать в качестве источника для MapLibre.
## Работа над картой ## Работа над картой
@ -186,8 +184,8 @@ MapLibre не может работать с форматом CSV. Мы долж
map.addSource("vacancies", { map.addSource("vacancies", {
type: "geojson", type: "geojson",
data: geojson, data: geojson,
cluster: true, cluster: true, // точки будем объединять в кластеры
clusterRadius: 20, clusterRadius: 20, // радиус поиска 20 пикселей
}); });
map.addLayer({ map.addLayer({
@ -215,7 +213,6 @@ MapLibre не может работать с форматом CSV. Мы долж
source: "vacancies", source: "vacancies",
layout: { layout: {
"text-field": ["get", "point_count"], "text-field": ["get", "point_count"],
"text-font": ["Noto Sans Regular"],
"text-size": 10, "text-size": 10,
}, },
}); });
@ -351,10 +348,23 @@ map.on("load", () => {
}) })
``` ```
Проделана прекрасная работа!
При желании посмотрите [полный код](https://github.com/gtitov/sheet-maplibre-map) и [возможный результат](https://gtitov.github.io/sheet-maplibre-map/).
## Упражнения
1. Сделайте, чтобы до первого перемещения карты список вакансий "Сейчас на карте" тоже был заполнен
1. Поменяйте местами списки (CSS)
1. Сделайте так, чтобы цвет кластера зависел от количества элементов внутри него
## Чтение ## Чтение
https://docs.cntd.ru/document/1200145773 1. ГОСТ Р ИСО/МЭК 24730-1-2017 Информационные технологии. Системы позиционирования в реальном времени (RTLS). Часть 1. Прикладной программный интерфейс (API) [ссылка](https://docs.cntd.ru/document/1200145773)
https://doka.guide/tools/api/ 1. Что такое API / Дока [ссылка](https://doka.guide/tools/api/)
https://doka.guide/js/fetch/ 1. Асинхронность в JavaScript / Дока [ссылка](https://doka.guide/js/async-in-js/)
https://doka.guide/js/async-in-js/ 1. fetch() / Дока [ссылка](https://doka.guide/js/fetch/)
https://doka.guide/js/promise/ 1. Promise / Дока [ссылка](https://doka.guide/js/promise/)

Write Preview
Loading…
Cancel
Save