Ускоренный курс по листовке | Все, что вам нужно знать о листовке | Leaflet | Tekson

• Leaflet.js — библиотека JavaScript с открытым исходным кодом для создания интерактивных веб-карт.  

• Видео охватывает семь тем: настройка основных функций, слои плитки, веб-картографические службы WMS, маркеры, элементы управления слоями, типы данных, включая GeoJSON, события и стилизация компонентов.  

• Создание HTML-файла index.html в Visual Studio.  

• Установка ссылки на CDN Leaflet.js в коде.  

• Добавление CSS-файла leaflet.css и JavaScript-файла leaflet.js в HTML-файл.  

• Создание элемента div для карты.  

• Назначение высоты и ширины карты с помощью CSS.  

• Инициализация карты с помощью JavaScript: создание переменной map, установка местоположения и уровня масштабирования.  

• Использование плагина Tile Layer Provider для работы со слоями плитки.  

• Пример добавления слоя OpenStreetMap osm.  

• Демонстрация добавления другого слоя, например, акварельной карты.  

• Добавление карты улиц Google с помощью URL-адреса.  

• Настройка параметров слоя для разных типов карт: рельеф местности, спутник, гибрид.  

• Пример добавления спутниковой карты Google.  

• Добавление маркера на карту с помощью функции addMarker.  

• Параметры маркера: значок, заголовок, z-индекс, непрозрачность.  

• Привязка всплывающего окна к маркеру с помощью метода bindPopup.  

• Добавление одиночного маркера и настройка всплывающего окна.  

• Открытие всплывающего окна по умолчанию при нажатии на маркер.  

• Возможность редактирования маркера на карте.  

• Указание параметра «значок» для настройки внешнего вида маркера.  

• Передача URL-адреса и размера значка в переменную icon.  

• Привязка значка к маркеру.  

• Копирование иконки и её настройка.  

• Использование двух иконок: чёрного и красного маркеров.  

• Настройка размера иконки 40x40.  

• Включение возможности перетаскивания маркера.  

• Перемещение маркера в другое место на карте.  

• Использование метода латеральной длины для вычисления длины маркера.  

• Получение широты и долготы маркера.  

• Преобразование маркера в формат GeoJSON.  

• Запись информации в консоль с помощью console.log.  

• Структура GeoJSON: геометрия, тип, координаты.  

• Создание объекта контроллера слоя для переключения базовых карт.  

• Добавление и редактирование слоёв на карте.  

• Использование функции collapse для управления отображением слоёв.  

• Удаление слоёв с карты с помощью метода remove.  

• Управление отображением слоёв через контроллер.  

• Создание второго маркера с изменёнными координатами.  

• Проверка двух наборов данных одновременно.  

• Создание точек, линий и полигонов в формате GeoJSON.  

• Сохранение объектов в папке загрузки.  

• Разделение файла на точки, линии и полигоны.  

• Создание строки и многоугольника.  

• Добавление свойств к полигональному объекту.  

• Сохранение объектов в формате GeoJSON.  

• Доступ к свойствам в поле «Свойства».  

• Изменение цвета и ширины заливки.  

• Перенос файлов в каталог данных и переименование.  

• Копирование и вставка файлов в проект.  

• Изменение расширения файлов на JS.  

• Добавление данных в скрипт для корректной загрузки.  

• Загрузка данных на карту с помощью функции geoJSON.  

• Передача имени переменной и URL-адреса данных.  

• Настройка стиля слоя и всплывающего окна привязки.  

• Определение стилей для объектов.  

• Настройка цвета заливки и непрозрачности.  

• Использование шестнадцатеричных цветов.  

• Преобразование файлов формы, dbf, csv в GeoJSON.  

• Загрузка данных в формате GeoJSON для корректной работы.  

• Использование плагина Leaflet-ax для загрузки GeoJSON.  

• Передача данных в формате GeoJSON без преобразования в JS.  

• Необходимость установки jQuery CDN для работы плагина.  

• Загрузка растровых данных через слой плитки WMS.  

• Указание URL-адреса слоя плитки и названия слоя.  

• Проверка работы URL на карте-листовке.  

• Уменьшение масштаба для отображения данных.  

• Создание демонстрационного набора данных на локальном хосте 8080.  

• Загрузка растрового файла на геосервер.  

• Визуализация данных на карте-листовке.  

• Преобразование векторных данных в формат GeoJSON для визуализации с помощью WFS.  

• Обзор интерактивных событий в Leaflet: наведение мыши, перемещение мыши.  

• Реализация функции обратного вызова для событий.  

• Получение координат мыши через события.  

• Добавление div-элемента для захвата координат.  

• Использование document.get по имени класса для получения координат.  

• Настройка положения координат с помощью CSS.  

• Изменение цвета фона и текста всплывающих окон.  

• Настройка границ и радиуса всплывающих окон.  

• Пример изменения цвета фона на чёрный и текста на белый.  

• Подведение итогов по настройке Leaflet.  

• Призыв к подписке и лайкам.