edits

1 year ago · 4841ca8788
parent bb5926aa0d
commit 4841ca8788
2 changed files with 47 additions and 39 deletions
--- a/src/content/docs/chapters/2-webmap.mdx
+++ b/src/content/docs/chapters/2-webmap.mdx
@ -29,8 +29,6 @@ import Question from '../../../components/Question.astro'

 Файлам карт, передаваемым по сети, или размещаемым на сайтах, изображениям карт для печати, загрузки, иллюстрации, украшения будет отказано в праве называться веб-картой. А вот если карту разместили в Интернете для того, чтобы пользователи могли работать с ней по сети, то это веб-карта.

-Другими словами, если целью размещения карты в сети является её публикация.
-
 <Card title="Веб-карта —">это карта, предназначенная для использования в сети</Card>

 ### Типы веб-карт
@ -321,7 +319,7 @@ map.on('load', () => {
 })
 ```

-Закомментируем вывод в консоль. Создадим попап. Установим его на координатах кликнутого объекта. Заполним попап текстом из атрибута с именем объекта. Добавим попап на карте.
+Закомментируем вывод в консоль и выведем по клику на слой попап.

 ```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/).

-### Что мы получили
+## Что мы получили

 Откроем вкладку Сеть в инструментах разработчика и ещё разок проследим поток данных

@ -408,7 +406,7 @@ map.on('load', () => {

 Такая карта удобна, когда немного данных, потому что мы всё переправляем пользователю данные как есть. Когда мы отправляем пользователю данные как есть, почти не требуется серверных мощностей, поэтому для таких карт есть варианты бесплатного размещения в Интернете.

-### Упражнения
+## Упражнения

 1. Покрасьте Москву в красный цвет
 2. Выведите в попап один из атрибутов стран
--- a/src/content/docs/chapters/3-api.mdx
+++ b/src/content/docs/chapters/3-api.mdx
@ -7,11 +7,12 @@ import Question from '../../../components/Question.astro'



+
 В этой главе

 - определение API
 - асинхронность JavaScript
- запрос fetch...then
+- запрос `fetch...then`

 ## API

@ -104,7 +105,7 @@ map.on("load", () => {

 В консоль вывелся Promise -- обещание того, что браузер уже занимается нашим запросом. Ответ от сервера не вывелся, хотя во вкладке Сеть мы видим, что данные загружены. Дело в том, что вывод в консоль был выполнен раньше, чем мы получили ответ от сервера.

-> Браузер начал исполнять наш код, увидел запрос к внешему ресурсу и подумал: "Здесь можно завязнуть. Ещё неизвестно, сколько этот внешний ресурс будет отвечать. Я верну пока обещание, что когда будет ответ, я его предоставлю, и отправлю запрос. А пока жду ответа буду дальше код выполнять.""
+> Браузер начал исполнять наш код, увидел запрос к внешему ресурсу и подумал: "Здесь можно завязнуть. Ещё неизвестно, сколько этот внешний ресурс будет отвечать. Я верну пока обещание, что когда будет ответ, я его предоставлю, и отправлю запрос. А пока жду ответа буду дальше код выполнять."

 Запрос к внешнему ресурсу выполняется асинхронно, то есть изымается из последовательного выполнения программного кода и выполняется отдельно. Поэтому вывод в консоль выполняется раньше того, как данные получены.

@ -121,6 +122,7 @@ map.on("load", () => {
 })
 ```

+
 <details>
 <summary>В первой карте тоже был асинхронный код</summary>

@ -132,36 +134,32 @@ map.on("load", () => {

 MapLibre не может работать с форматом CSV. Мы должны преобразовать данные в знакомый формат GeoJSON. Сделаем это!

-```js title="main.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(","); // разбиваем строку по колонкам
+Подключим библиотеку для чтения CSV данных в JS-объект.

-    // Формируем атрибуты объекта
-    const properties = {}
-    rowValues.map((propertyValue, index) => {
-      properties[colnames[index]] = propertyValue // названия атрибутов берём из первой строки
-    })
+```html title="index.html"
+<head>
+  ...
+  <script src="https://unpkg.com/papaparse@5.4.1/papaparse.min.js"></script>
+</head>
+```

-    // Формируем геометрию объекта
-    const geometry = {
-      type: "Point",
-      coordinates: [properties.lon, properties.lat],
-    }
+Выполним чтение CSV данных c использованием подключенной библиотеки и сконструируем GeoJSON-объект.

-    // Собираем 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 {
      type: "Feature",
-      properties: properties,
-      geometry: geometry
+      properties: row,
+      geometry: {
+        type: "Point",
+        coordinates: [row.lon, row.lat],
+      }
    }
  })
-
-  // Собираем полный GeoJSON
  const geojson = {
    type: "FeatureCollection",
    features: geojsonFeatures
@ -169,7 +167,7 @@ MapLibre не может работать с форматом CSV. Мы долж
 })
 ```

-Своими руками собрали GeoJSON из CSV-данных! GeoJSON уже можно использовать в качестве источника для MapLibre.
+GeoJSON уже можно использовать в качестве источника для MapLibre.

 ## Работа над картой

@ -186,8 +184,8 @@ MapLibre не может работать с форматом CSV. Мы долж
  map.addSource("vacancies", {
    type: "geojson",
    data: geojson,
-    cluster: true,
-    clusterRadius: 20,
+    cluster: true, // точки будем объединять в кластеры
+    clusterRadius: 20, // радиус поиска 20 пикселей
  });

  map.addLayer({
@ -215,7 +213,6 @@ MapLibre не может работать с форматом CSV. Мы долж
    source: "vacancies",
    layout: {
      "text-field": ["get", "point_count"],
-      "text-font": ["Noto Sans Regular"],
      "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
-https://doka.guide/tools/api/
-https://doka.guide/js/fetch/
-https://doka.guide/js/async-in-js/
-https://doka.guide/js/promise/
+1. ГОСТ Р ИСО/МЭК 24730-1-2017 Информационные технологии. Системы позиционирования в реальном времени (RTLS). Часть 1. Прикладной программный интерфейс (API) [ссылка](https://docs.cntd.ru/document/1200145773)
+1. Что такое API / Дока [ссылка](https://doka.guide/tools/api/)
+1. Асинхронность в JavaScript / Дока [ссылка](https://doka.guide/js/async-in-js/)
+1. fetch() / Дока [ссылка](https://doka.guide/js/fetch/)
+1. Promise / Дока [ссылка](https://doka.guide/js/promise/)
+
+
+