Разработка интерактивной карты музеев России на основе Викиданных и карт OpenStreetMap

Петрозаводский государственный университет Институт математики и информационных технологий Кафедра теории вероятностей и анализа данных Направление подготовки бакалавриата 01.03.02 Прикладная математика и информатика Отчет о практике по научно-исследовательской работе Разработка интерактивной карты музеев России на основе Викиданных и карт OpenStreetMap Выполнила: студентка 2 курса группы 22204 А. М. Феофанова подпись Место прохождения практики: Кафедра теории вероятностей и анализа данных Руководитель: А. А. Крижановский, к.т.н. подпись Итоговая оценка оценка Петрозаводск — 2021

Содержание Введение 3 1. Анализ карт 4 3. Получение информации из Викиданных 5 3. Создание прототипа приложения 8 4. Размещение полученной информации на карте 9 4.1 Панель поиска на карте . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 4.2 Добавление различных стилей карты . . . . . . . . . . . . . . . . . . . . . . . . 11 4.3 Создание дополнительного слоя с музеями . . . . . . . . . . . . . . . . . . . . . 13 4.4 Размещение дополнительной панели с общей информацией о карте . . . . . . 14 5. Создание столбчатой диаграммы с информацией о пяти музеях России с наибольшим числом экспонатов 15 Заключение 16 Список использованных источников 17 2

Введение На сегодняшний день картография является достаточно актуальной областью для различных предприятий, связанных с добычей ископаемых, поскольку карты нужны для выяснения закономерностей распространения месторождений полезных ископаемых. Карты используются в транспортном строительстве для построения железных дорог и автомагистралей. Более того, они полезны для обучения и научных исследований и пригождаются людям из сферы туризма, или просто желающим ориентироваться на незнакомой местности. Существует достаточное количество приложений с расписанием транспорта, картами городов с маршрутами. Пользователи создают и работают с картами, а также делятся ими. С помощью карт мы можем визуализировать, а также проанализировать некоторые данные. Цель научно-исследовательской работы: разработка интерактивной карты музеев России с использованием Викиданных на языке программирования JavaScript. Задачи исследования: 1. Сделать обзор существующих карт, выявить их достоинства и недостатки, сравнить набор их функций. 2. Создать несколько запросов к базе данных «Викиданные». 3. Разработать прототип приложения с использованием картографических сервисов. 4. Поместить информацию, полученную в запросе, на карту. 5. Создать столбчатую диаграмму с данными о пяти музеях России, имеющих наибольшее количество экспонатов в Викиданных. 3

1. Анализ карт Прежде чем создавать карту, были проанализированы существующие. По материалам статьи «Электронные карты пинежских говоров» [1] было выяснено, что карты, представленные в интернете, делятся на две группы: 1. Оцифрованные бумажные; 2. Электронные. Особую ценность для данной работы несут вторые. По сравнению с бумажными, электронные карты имеют следующие преимущества: 1. Доступность большому количеству пользователей. 2. Интерактивность. 3. Возможность исправления ошибок и добавления новых данных. К существенным недостаткам относятся различные ограничения карторафических сервисов, такие как лимитированное число запросов к к программному интерфейсу приложения (англ. application programming interface, далее API) или платный ключ. В ходе анализа было выявлено, что интерактивность карт заключается в свободном перемещении по ним, наличии дополнительной информации по объекту на карте, возможности послушать голоса или диалекты людей. После анализа десяти карт из статьи «Электронные карты пинежских говоров» [1] был сделан вывод, что наиболее часто используемым языком программирования для создания карт, приведённых в данной статье, является JavaScript, используемый в пяти из десяти случаев. Также распространен PHP и язык разметки HTML. В том числе создателям потребовалось использование библиотек, таких как Leaflet [3], которая предназначена для отображения карт на веб-сайтах. 4

2. Получение информации из Викиданных Был сделан запрос с целью получения информации о всех музеях России, представленных в Викиданных. Для отображения музеев на карте, было необходимо получить их координаты из Викиданных. Также решено добавить некоторую дополнительную информацию на карту, поэтому в запрос были включены изображения музеев и ссылки на статьи в русской Википедии. Запрос (Листинг 1) был сделан с помощью сервиса Wikidata Query Service [4]. Листинг 1. Запрос музеев России (URL: https://w.wiki/3J64) SELECT DISTINCT ?item ?name ?lat ?lon ?article ?image WHERE { # turn off the built-in query optimizer hint:Query hint:optimizer "None". # searching for museums in Russia ?item (wdt:P131*) wd:Q159; (wdt:P31/(wdt:P279*)) wd:Q33506; wdt:P625 ?coord; p:P625 ?coordinate. ?coordinate psv:P625 ?coordinate_node. # get latitudes and longitudes ?coordinate_node wikibase:geoLatitude ?lat; wikibase:geoLongitude ?lon. SERVICE wikibase:label { bd:serviceParam wikibase:language "ru". ?item rdfs:label ?name. } OPTIONAL { ?item wdt:P18 ?image. } OPTIONAL { # get wikipedia links ?article schema:about ?item; schema:isPartOf <https://ru.wikipedia.org/>. } } Результаты запроса (Рис. 1) были сохранены как CSV-файл, для последующей работы и 5

отображения на карте. Получено 992 результата. Рис. 1: Часть результатов запроса в виде сетки изображений Далее был написан запрос (Листинг 2), который возвращает число экспонатов в музеях. Музеи в запросе отсортированы в порядке убывания количества объектов, представленных в Викиданных. Результат запроса (Таблица 1) аналогично предыдущему был сохранён как CSV-файл. В данном файле для каждого музея есть элемент Викиданных, начинающийся с префикса Q и имеющий числовую часть, название музея и общее число экспонатов в нём, расположенное в столбце ’total’. Результаты получены с использованием свойства P195 — «хранится в коллекции». Проанализировав результат запроса, можно заметить, что разница между первым по числу объектов в Викиданных музеем и вторым составляет 7468 экспонатов, а между первым и пятым — 7899. Следовательно, по сравнению с Эрмитажем в других музеях представлено крайне мало объектов в Викиданных. Также можно сравнить количество экспонатов Государственного Эрмитажа с тем числом объектов, что представлено в Викиданных: По данным сайта «Вокруг света» [5], коллекция Эрмитажа, входящего в «высшую лигу» мировых музейных сокровищниц, насчитывает 2 953 296 экспонатов. Таким образом, в Викиданных представлено лишь 0,27% от общего количества объектов, расположенных в Государственном Эрмитаже. Листинг 2. Запрос числа объектов в музеях России (URL: https://w.wiki/3DR2) SELECT ?widerCollection ?widerCollectionLabel ?total 6

WITH { SELECT ?collection (COUNT(?work) AS ?count) WHERE { ?work wdt:P195 ?collection. ?collection wdt:P17 wd:Q159. } GROUP BY ?collection } AS %collections WITH { SELECT ?widerCollection (SUM(?count) AS ?total) WHERE { INCLUDE %collections. ?collection wdt:P361* ?widerCollection. MINUS { ?widerCollection wdt:P361 []. } } GROUP BY ?widerCollection } AS %widerCollections WHERE { INCLUDE %widerCollections. SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en". } ORDER BY DESC(?total) Таблица 1: Первые 5 музеев в России с наибольшим числом экспонатов в Викиданных widerCollection widerCollectionLabel total wd:Q132783 Государственный Эрмитаж 8006 wd:Q183334 Государственная Третьяковская галерея 538 wd:Q211043 Государственный Русский музей 380 wd:Q4872 Государственный музей изобразительных искусств 284 имени А. С. Пушкина wd:Q4174318 Екатеринбургский музей изобразительных искусств 7 107

3. Создание прототипа приложения За основу была взята карта мира OpenStreetMap [2], содержащая сведения о точках на земной поверхности, поскольку она распространяется по свободной лицензии. С помощью библиотеки Leaflet [3], предназначенной для отображения карт на веб-сайтах, была создана карта (Листинг 3) на языке программирования JavaScript. Начальное положение — координаты города Петрозаводск (Рис. 2). Листинг 3. Часть кода на языке программирования JavaScript, ответственная за отображение карты мира const mymap = L.map('issMap').setView([61.7849, 34.3469], 10); const attribution ='© <a href="https://www.openstreetmap.org/copyright"> OpenStreetMap</a> contributors'; const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; const tiles = L.tileLayer(tileUrl, { attribution }); tiles.addTo(mymap); Рис. 2: Вид карты при открытии разработанного приложения с начальным положением в Петрозаводске 8

4. Размещение полученной информации на карте Для чтения CSV-файла была использована библиотека Papa Parse. Чтобы отобразить информацию на карте (Листинг 4), была использована функция bindPopup() библиотеки Leaflet [3]. С помощью нее можно создать маркер, информация о котором появляется после щелчка по нему. В данном случае это ссылка на статью в Википедии и изображение размером 300 пикселей (Рис. 3). Листинг 4. Чтение CSV-файла и последующее отображение информации на карте $.get('./museums.csv', function(csvString) { // Convert string to array of objects var museums = Papa.parse(csvString, {header: true, dynamicTyping: true}).data; // Сreate a marker and add it to the map for (var i in museums) { var row = museums[i]; var image = row.image var marker = L.marker([row.lat, row.lon], { opacity: 1, icon: myIcon }).bindPopup('<a href="' + row.article + '" target="_blank">' + row.name + '<img src="' + image + '"style="width: 300px"/>') marker.addTo(mymap); } }); Стандартная иконка маркера была заменена на собственную иконку музея двух размеров: 24 и 48 пикселей. Это можно увидеть на рисунках 3,5,6,7. 9

Рис. 3: Появление изображения и ссылки на статью в Википедии при клике на иконку музея на примере Музея изобразительных искусств РК 4.1 Панель поиска на карте С помощью сервиса ArcGIS [6] был получен бесплатный API ключ, чтобы появилась возможность осуществлять поиск различных объектов на карте. В бесплатной версии доступно до 20 000 использований панели поиска в месяц. Геокодирование работает на нескольких языках. Предварительно потребовалось подключить к проекту библиотеку Esri [7] и геокодер, чтобы на карте появился рабочий значок панели поиска (Рис. 4), с помощью которого осуществляется поиск объектов. 10

Рис. 4: Использование панели поиска на примере ввода слова «Петрозаводск» на русском и английском языках и результаты геокодирования в виде локаций, в которые можно переместиться 4.2 Добавление различных стилей карты Было решено добавить два дополнительных цвета карты: серый и чёрный (Листинг 5). Они нужны для того, чтобы пользователь мог выбрать понравившийся дизайн карты (Рис. 5), к примеру, на чёрном фоне иконки музея выделяются лучше всего. Оба стиля были взяты с сайта Leaflet Provider Demo [8]. Данный сайт представляет собой бесплатное расширение для библиотеки Leaflet. Листинг 5. Добавление стилей на карту var Stadia_AlidadeSmoothDark = L.tileLayer('https://tiles.stadiamaps.com/tiles/ alidade_smooth_dark/{z}/{x}/{y}{r}.png', { maxZoom: 20, attribution: '© <a href="https://stadiamaps.com/">Stadia Maps</a>, © <a href="https://openmaptiles.org/">OpenMapTiles</a> © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' }); var Esri_WorldGrayCanvas = L.tileLayer('https://server.arcgisonline.com/ArcGIS/ rest/services/Canvas/World_Light_Gray_Base/MapServer/ 11

tile/{z}/{y}/{x}', { attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ', maxZoom: 16 }); var baseMaps = { 'OSM': osm, 'Black': Stadia_AlidadeSmoothDark, 'Gray': Esri_WorldGrayCanvas } Рис. 5: Переключение слоёв карты с помощью использования специальной кнопки справавверху экрана 12

4.3 Создание дополнительного слоя с музеями По запросу из Листинга 2 с количеством объектов в музеях России была сделана визуализация в виде кругов на карте (Рис. 6) с радиусами, равными числу содержащихся в них экспонатов (Листинг 6). Для визуализации отобраны первые пять музеев России по количеству объектов в Викиданных. Все маркеры объединены в один слой ’Museums’, который можно отключить. Листинг 6. Добавление круглых маркеров-музеев var marker1 = L.circle([59.9412, 30.31549], 8006, {color: 'red'}).addTo(mymap); // Эрмитаж 8006 объектов var marker2 = L.circle([55.74135, 37.62021], 538, {color: 'blue'}).addTo(mymap); // Третьяковская галерея 538 объектов var marker3 = L.circle([59.93848, 30.32889], 380, {color: 'yellow'}).addTo(mymap); // Русский музей 380 объектов var marker4 = L.circle([55.74721, 37.60547], 284, {color: 'green'}).addTo(mymap); // Музей изобразительных искусств имени А. С. Пушкина 284 объекта var marker5 = L.circle([56.83293, 60.59629], 107, {color: 'purple'}).addTo(mymap); // Екатеринбургский музей изобразительных искусств 107 объектов // Объединение маркеров в один слой var allCircles = L.layerGroup([marker1, marker2, marker3, marker4, marker5]); // Добавление слоя на карту var overlayerMaps = { 'Museums': allCircles } 13

Рис. 6: Визуализация Эрмитажа и Русского музея на карте на слое ’Museums’ в виде кругов различных радиусов 4.4 Размещение дополнительной панели с общей информацией о карте С помощью библиотеки JQuery [9] был создан вертикальный аккордеон1 справа от карты (Рис. 7) с основной информацией о ней, чтобы пользователю было легче разобраться в карте. Рис. 7: Дополнительная информация о карте справа от неё в виде вертикального аккордеона 1 Аккордеон — меню, каждый элемент которого имеет заголовок и содержимое. 14

5. Создание столбчатой диаграммы с информацией о пяти музеях России с наибольшим числом экспонатов На основе музеев из слоя ’Museums’ была создана столбчатая диаграмма (Листинг 7) с использованием библиотеки Chart.js [10]. При наведении на каждый столбец высвечивается число объектов в Викиданных. Диаграмма (Рис. 8) добавлена ниже карты. Посмотрев на неё, можно заметитить, что объекты Эрмитажа составляют 85,95% от общего числа экспонатов в пяти музеях. Листинг 7. Создание диаграммы с информацией о пяти музеях var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Эрмитаж', 'Третьяковская галерея', 'Русский музей', 'Музей изобразительных искусств имени А. С. Пушкина', 'Екатеринбургский музей изобразительных искусств'], datasets: [{ label: 'Число объектов в Викиданных', data: [8005, 538, 380, 284, 107], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)' ], borderWidth: 1 15

}] }, options: { scales: { y: { beginAtZero: true } } } }); Рис. 8: Столбчатая диаграмма с информацией о пяти музеях с наибольшим числом объектов, представленных в Викиданных Заключение Проведен тщательный анализ существующих интерактивных карт, выявлены их преимущества и недостатки. С помощью библиотеки Leaflet [3] создана интерактивная карта музеев России на языке программирования JavaScript. Также была проведена работа с базой данных «Викиданные». Получено два CSV-файла с результатами запросов, которые использованы для отображения музеев, их изображений и ссылок на статьи в Википедии. Помимо этого, для отображения диаграммы и описания карты были использованы библиотеки JQuery [9] и Chart.js [10]. 16

Список использованных источников 1. Левичкин, А.Н., Крылова, О. Н., Гайдамашко Р. В. Электронные карты пинежских говоров (по материалам Словаря пинежских говоров) / С.А. Мызников // Лексический атлас русских народных говоров (Материалы и исследования) 2018. - СПб.: ИЛИ РАН, 2018. - С. 212-225. 2. OpenStreetMap [Электронный ресурс].- URL: https://www.openstreetmap.org/ (дата обращения 05.11.2020). 3. Leaflet [Электронный ресурс].- URL: https://leafletjs.com/ (дата обращения 04.12.2020). 4. Wikidata Query Service [Электронный ресурс].- URL: https://query.wikidata.org/ (дата обращения 11.03.2021). 5. Ксенофонтов, А. (2006) Эрмитаж / А. Б. Ксенофонтов. — Текст : электронный // Энциклопедия «Вокруг Света» : [https://www.vokrugsveta.ru/encyclopedia/]. — URL: https://www.vokrugsveta.ru/encyclopedia/index.php?title=Государственный_Эрмитаж (дата обращения: 21.05.2021). 6. ArcGIS [Электронный ресурс].- URL: https://developers.arcgis.com/ (дата обращения 10.04.2021). 7. Esri Leaflet [Электронный ресурс].- URL: https://esri.github.io/esri-leaflet/ (дата обращения 25.04.2021). 8. Leaflet Provider Demo [Электронный ресурс].- URL: https://leaflet-extras.github.io/leafletproviders/preview/ (дата обращения 03.03.2021). 9. JQuery UI [Электронный ресурс].- URL: http://code.jquery.com/ (дата обращения 03.05.2021). 10. Chart.js [Электронный ресурс].- URL: https://www.chartjs.org/ (дата обращения 04.05.2021). 17

Рецензии:

Авторизуйтесь, чтобы добавить рецензию

- у работы пока нет рецензий -

Отзывы:

Авторизуйтесь, чтобы оставить отзыв