Omeka Classic — это веб-платформа для публикации цифровых коллекций и создания мультимедийных онлайн-выставок. Он имеет множество существующих плагинов для расширения его основных функций.

Геолокация — один из плагинов Omeka Classic, который добавляет информацию о местоположении в цифровые коллекции и отображает местоположение на картах. Он реализует LeafletJS в качестве средства просмотра карт.

Ниже приведен демонстрационный экземпляр Omeka Classic с плагином Geolocation и 2 примера элементов, отображающих его местоположение на карте. Уловка, которую мы здесь пытаемся сыграть, заключается в том, чтобы эти предметы принадлежали разным коллекциям, отображаемым на карте в виде маркеров разных цветов.

Настройка формы и цвета маркера

По умолчанию Leaflet использует файл изображения «marker-icon.png» в каталоге «/plugins/Geolocation/views/shared/javascripts/leaflet/images». Если вам просто нужно другое изображение маркера, вы можете просто заменить этот файл изображением маркера, которое вам нравится.

По сути, если количество коллекций очень ограничено, мы можем просто создать несколько изображений с другой цветовой основой на исходном изображении. Но если у вас много коллекций и вы хотите отображать их разными цветами соответственно, этот способ выглядит глупо, к тому же относительно сложно динамически управлять им из скриптов.

Одним из решений здесь является использование Leaflet.DivIcon. Это облегченная иконка для маркеров, в которой вместо изображения используется простой элемент ‹div›. Наследуется от Icon, но игнорирует параметры iconUrl и shadow.

Очень просто реализовать, в «views/shared/javascripts/map.js» мы добавляем несколько скриптов в функцию «buildMarkerFromPlacemark» (перед строкой «this.addMarker()») для создания настраиваемого маркера:

//Создаем собственный значок
var markerHtmlStyles = `
background-color: #000000;
ширина: 1 рем;
высота: 1 рем;
дисплей: блок;
слева: -1,5 бэр;
вверху: -1,5 бэр;
положение: относительное;
радиус границы: 1 бэр 1 бэр 1 бэр;
непрозрачность: 0,6`

var custIcon = L.divIcon({
className:"custom-div-icon",
iconAnchor: [-15,10],
labelAnchor: [0, 0], popupAnchor: [0, -36], html:`‹span style=”${markerHtmlStyles}” /›`
})

Затем отредактируйте оператор «this.addMarker()», добавив «icon:custIcon» в качестве значения второго параметра.

Следовательно, мы обнаружим, что маркеры превратились в круглые точки на карте.

Добавить информацию о коллекции в файл KML

До тех пор, пока мы можем динамически устанавливать цвет точки маркера из скриптов, нам по-прежнему нужна информация о коллекции каждого элемента, чтобы установить соответствующий цвет. Отследил скрипты, где он считывал значение координат, обнаружил, что это из ajax-запроса к URL http://localhost:8080/geolocation/map.kml. Следуя этой подсказке, обнаружил, что Omeka генерирует этот файл map.kml с PHP-файлом browse.kml.php по пути /plugins/Geolocation/views/shared/map.

Обманите этот файл, добавьте новый узел рядом с узлом «‹address›‹/address›». Если в метаданных элемента есть поле «Название коллекции», мы добавляем ссылку на эту коллекцию как содержимое узла «коллекция». Следовательно, информация о коллекции каждого элемента будет записана в файле map.kml.

Если все пойдет хорошо, в файле map.kml теперь появится новый узел «коллекция».

Чтение информации о коллекции из файла KML

Поскольку файл map.kml теперь содержит информацию о коллекции, мы можем легко извлечь ее так же, как листовка использует координаты.

// Извлечение информации о коллекции из данных в формате KML
var collection = placeMark.find('collection').text().replace(/(‹([^›]+)›)/ ги, “”);

Для простоты мы удалили гиперссылку, оставив только название коллекции. Следовательно, цвет нашего маркера будет назначен в соответствии с названием коллекции. Цвет также может быть присвоен по порядковому номеру коллекции, указанному в гиперссылке.

С помощью приведенных ниже сценариев я создал массив разработанного цветового кода, присвоив его переменной «markercolor»:

var colors = ['#8e0411','#cf4c81','#300a13','#73ffbd','#38db94','#0f4b39'];

switch (коллекция){
case 'Имя столбца A':
markercolor = colors[0];
break;
case 'Имя столбца B':
> markercolor = colors[1];
break;
по умолчанию:
markercolor = '#3D3D3D';

Затем мы переходим к сценариям, которые мы добавили для создания пользовательского значка на шаге 1, замените значение «background-color» на переменную markercolor:

Обновите страницу, если все пойдет хорошо, мы сможем увидеть маркеры, которые теперь имеют разные цвета в соответствии с разными названиями коллекций.

Давайте добавим еще несколько элементов, чтобы посмотреть, как это выглядит.

Ура! Миссия выполнена!

Удачного кодирования!

PS. Особая благодарность Сэму Таттону и его решению на StackOverflow.

PS2. Демо-репозиторий на Github