CC BY
19ИСПОЛЬЗОВАНИЕ ТЕХНОЛОГИИ LEAFLET В WEB-РЕСУРСАХ НА ПРИМЕРЕ ЛЕСНОГО АТЛАСА КРАСНОДАРСКОГО КРАЯ
Чернец З.А., Кузякина М.В., Пелина А.Н. ФГБОУ ВО «Кубанский государственный университет», г. Краснодар
Аннотация
В статье рассматривается технология разработки интерактивного атласа с использованием html-разметки текста и библиотек Leaflet. На сайт было внедрено ряд дополнительных плагинов, позволяющих расширить возможности работы с картой, упростить чтение и проводить простейшие измерения по карте. Имеются возможности переключения слоёв подложки и векторов, измерения расстояний, просмотр атрибутов объекта по клику мыши.
Ключевые слова: HTML, JavaScript, Leaflet, лесной атлас, интерактивный атлас.
Постановка задачи. Создать web-ресурс с интегрирацией библиотеки Leaflet, загрузить тайловые подложки OpenStreetMap и ArcGIS Imaginary, внедрить конвертированный shp-файл в GeoJSON и добавить на сайт модули измерений расстояний, всплывающих атрибутов, условных обозначений, меню переключения слоёв.
Материалы и методы. Работа проводится в редакторе Atom. Для работы используются атрибуты <meta>, указывающие кодировку документа [1]: распространённый стандарт кодирования текста UTF-8, который обозначает, что формат Юникод будет храниться более компактно с определённым количеством байт, обычно эти значения колеблются от 1 до 4.
В файле находятся ссылки на файлы библиотеки Leaflet, служащей для отображения карты и возможности работы с плагинами, информация об атрибутах, скриптах, и о *.png картинках, которые являются кнопками -
ссылками для переключения между картами. Скрипт «basic.ruler-src.js» отвечает за отображения плагина рулетки на карте, позволяющей проводить измерения на карте в километрах.
Для использования этой библиотеки необходимо наличие нескольких документов [2]. Особенные таблицы стилей *.css для Leaflet с ссылкой на соответствующий сайт [1]; документы *.js, представляющих собой основное рабочее пространство. Например, для плагина Leaflet-Ajax, отвечающего за отображение файла *.GeoJSON на карте. А также основной файл *.html, отвечающий за разметку.
Здесь в контейнере <body> первые строчки - контейнеры <a> будут отвечать за кнопки переключения html страниц карт данного атласа, а функция <div> за отображение всего поля карты, и 2 контейнера <script> за отображения кнопки плагина рулетки на карте и картографического изображения (рис. 1).
Рисунок 1 - Графическое воплощение контейнера </body> основной html-
страницы атласа
В контейнере <head> устанавливается связь с библиотекой посредством тега <link>. В атрибутах используется «rel», определяющий отношение между текущим документом и файлом, на который делается ссылка, и <href>, указывающим путь к связываемому файлу. Для атрибута «rel» используется значение <stylesheet>, которое указывает на наличие
таблицы стилей (CSS) в подключаемом файле. Далее, как обычно, прописываются теги <script>, предназначенные для описания скриптов карты, ссылающихся в документы *.js, в которых описывается основная внутренняя структура карты. В нём могут содержаться ссылки на программы или её текст на определённом языке. Поскольку нужно установить адрес скрипта из внешнего файла для импорта в текущий, то дополнительно использовался атрибут <src> [1].
Возможность простого добавления GeoJSON на карту реализована с помощью плагина LeafletAjax, в котором каждому файлу *.json ставится в соответствие [3]. Этот плагин также отвечает за появление всплывающего окна атрибутов полигонов при нажатии правой кнопкой мыши в качестве контекстного меню (рис. 2). Информация подается из атрибутивной таблицы файла *.shp, который был предварительно конвертирован в файл *.geojson посредством ГИС QGIS [4].
Для настрой карты создаётся переменная Map с параметрами, отвечающими за центр карты (в данном случае это г. Апшеронск), начальный зум, максимально и минимально возможный зум, начальная подложка и границы карты (рис. 3)
0
/
Рисунок 2 - Возможности плагина Leaflet-Ajax
261 var map = L.:nap('map',
362 {
: 53 center: [Л4.Л6&133, 39.730712],
.64 zoom: 9,
265 maxZoom: 17,
266 zoomSnap: 0r25T
267 minZoom: 3,
26В layers: [OCM],
269 maxBountls: bounds,
270 detectRetina: true}
271 );
Рисунок 3 - Настройка начальных параметров карты, используемых по
умолчанию
Границы (bounds) необходимы, чтобы оградить пользователя от случайного сдвигания карты в другую точку мира, не относящуюся к объектам на карте (рис. 4).
var cornerl = L.latLng(49,420, 30.000), corner2 = L.latLng(40.450, 46.100), bounds = L,latLng8ounds{cornerl, corner2);
Рисунок 4 - Границы карты
В ArcMap ГИС ArcGIS заранее подготовленные условные обозначения экспортированы в *.png для добавления на карту [5]. Поскольку выбранный модуль условных обозначений работает с внешними изображениями, то в нём имеется возможность настроить переключения разных условных обозначения в зависимости от выбранного слоя (рис. 5).
Для того, чтобы разработанные системные обозначения совпадали с цветами полигонов на карте, требуется в JavaScript файле создать функцию, например, «getColor», в которой производится настройка веса линии, прозрачности линии и заливки полигона [6]. Цвет, в данном случае, будет применяться по атрибутам объектов.
var 1евел(Мгилг1гд1 = i .tontnji^{position: 'twttoerjght'}); var legwid_les = l. .control({position: 'bottwrigjit'});
leeend_kvartal.onAdd ■■ -funetiort (map) {|
var div ■ L.DomuUI.cr&ate(fd±vf, 'info Legend'^
div. inn&r,nTHL +■
'ii-ч; 5-rc="k.rtr4.png" alt-"legend~ width™"!" height-''l"^"j return div; >i
leeend_leShOnflii(i = function (m,np) (
var div = L.Oo«Uti; .crejtiCdiv', 'Info legend");
div,innerHTML
1 iintg alt-№legflftdH width -"27Q" height-"702H> f;
retu^rt divj
1 egend_kv^ rt-з К addTo(nap) i
Hap-onCoverijyodd'j function {avert Layer) {
if (eventLayer.nane «■ 'Кадртэлы') { this. reHH№Contn>l(legflid_kvart3l) j 1 eeend_kv&r t a 1.eddlo{thi-a ) ; } else {
this. remaveCcntrol(lejjend_les);
legend_le*. ..lddFo(this);
}
_
Рисунок 5 - Фрагмент кода плагина легенды карты
На рис. 6 представлена Легенда карты, которая создана по атрибуту «Лесничество». Данная легенда далее применена к слою «Лесничество».
Слою «Кварталы» применены параметры цвета по атрибуту «Участковые» (лесничества) т. к. кварталы - следующая по счёту ступень территориального деления лесного фонда после участковых лесничеств. Создавать отдельную легенду для кварталов было затруднительно ввиду невозможности должным образом разместить легенду из 164 объектов -именно столько участковых лесничеств в Краснодарском крае и Республике Адыгея - при использовании данного воплощения легенды посредством растрового изображения.
6fe751
#еЭ2525
"Майкопское" ? _
"Дфипское" ? #ЬЬ2с^ "Геленджик с кое" ? "Краснодарское" ? 1#0Ь61901 "Белореченское" ? "Горяче-Ключевское" ? '#е94444|' "Джубгское" 'Каневское' "Крымское" 'Армавире к в 'Лабинское "Мостовско! 'Псебайско! "Днапское" "Новороссш "Пшишское "Туапсинск< "Апшеронск! "Хадыженск! "Кореновск! "Кропоткин
+
|
оеЛ/г ВЕН
1 == "Лоосский опытный" ?
d == "Селекц.-семеновод, л/х центр" ? '#1ЬЗс8-р 3 == "Отраднейское" ? #873Вс9' 1 #424242
Рисунок 6 - Настройка цвета легенды
Слою «Участковые лесничества» принято решение придать максимальную прозрачность заливки и выделить линии чёрным цветом для того, чтобы не повторяться в оформлении со слоем «Лесничества» [7]. Вдобавок к этой причине, при одновременном использовании данных двух слоёв, «Участковые лесничества» отображают границы внутреннего деления каждого лесничества (рис. 7).
Для установки плагина линейки требуется поместить JavaScript-файл линейки в соответствующую папку проекта <^» и настроить. Пример использования плагина линейки показан на рис. 8.
Рисунок 7 - Совместное использование двух слоёв карты
Рисунок 8 - Пример работы линейки
Меню с возможностью переключения слоёв изображено на рис. 9. На этом этапе все настройки интерактивного атласа завершены.
Рисунок 9 - Меню слоёв
Результаты и выводы. Подготовлены две карты: «Лесной фонд Краснодарского края и Республики Адыгея» (рис. 10) и «Лесные районы Российской Федерации» (рис. 11) [8, 9]. Обе карты представляют собой интерактивную область, содержащую, лесничества, участковые лесничества, лесные кварталы Краснодарского края и лесные районы России. Щелчком мыши по любому объекту можно узнать его атрибутивную информацию. Например: номер квартала, принадлежность к лесничеству и площадь. Данная информация высветится во всплывающем окне. Подобного эффекта получилось добиться с помощью плагинов JavaScript.
Картам атласа добавлена возможность измерения расстояний. Добавлена динамическая масштабная линейка, отображающая расстояние в километрах и милях. На карту добавлен плагин условных обозначений, который поможет пользователю ориентироваться в карте и избавит от лишних кликов, по объектам.
Рисунок 10 - Карта Краснодарского края и Адыгеи
Рисунок 11 - Карта России
Таким образом, получена возможность онлайн определять принадлежность земель лесного фонда к тому или иному лесничеству и лесному району, рассчитывать расстояния с помощью встроенной в сайт
линейки, проводить анализ земель лесного фонда совмещая встроенные на карты слои и, например, спутниковые изображения.
Библиографический список
1. Leaflet - an open-source JavaScript library for mobile-friendly interactive maps. URL: https://leafletjs.com/
2. Cyberleninka / Малышева Н. В., Золина Т. А., Владимирова Н. А., Райченко Н. Э., Попик С. А., Методика и практический опыт создания электронного атласа интерактивных карт информационно-справочного типа по данным государственного лесного реестра. - С. 3-7. - URL: https: //cyberleninka.ru
3. Cyberleninka / Дамекова, С. К., Функциональные возможности электронного географического атласа. - С. 122-123. - URL: https: //cyberleninka.ru
4. QGIS - Свободная географическая информационная система с открытым кодом. URL: https://qgis.org
5. ESRI - ArcGIS Online. URL: https://www.esri.com
6. Степанюк К.А., Кузякина М.В. Использование технологии LEAFLET для разработки интерактивного атласа // Современные проблемы и перспективы развития земельно-имущественных отношений: сборник статей по материалам II Всероссийской научно-практической конференции, г. Краснодар, 24 апреля 2020 г., Кубанский государственный аграрный университет имени И.Т. Трубилина, г. Краснодар, Россия, 2020, С. 646-651
7. Kuzyakina M., Gura D., Sekisov A., Granik N Assessment of Potential Forest Biomass Resource on the Basis of Data of Air Laser Scanning // Advances in Intelligent Systems and Computing: book series. - Vol. 923, Springer, Cham, Германия, 2019, P. 403-416
8. Atlas for a changing Planet. URL: http://storymaps.esri.com
9. Global Forest Watch. URL: https://globalforestwatch.org
