Это продолжение моего первого поста, в котором описана адаптация буклетов на базовом уровне. В этом блоге мы рассмотрим следующий уровень настройки.

Если вы пропустили это, в последнем я рассказал:

· Настройка исходных файлов файла index.html.

· Использование фрагмента javascript для настройки представления карты с использованием предоставленных координат.

· Размещение меток и добавление их в обозначенную область.

· Всплывающее окно для размещенных меток.

· Везде, где пользователь щелкнет по карте, появится всплывающее окно, показывающее широту/долготу.

· Для повышения интерактивности на карту добавлены изображения и видео.

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

В первом блоге настройки были описаны таким образом, что клиенту нужны настройки и сопутствующие решения. Мы продолжим в том же духе и в этом блоге.

Что сказал клиент

«Во многих приложениях есть графики населения соответствующих городов. Поскольку мы имеем дело с несколькими настройками карты, можете ли вы предложить какое-либо решение?»

У нас есть идеал. Теперь у нас будет карта на графике. Если вы озадачены, то поясню:

Все, что вам нужно, это информация GeoJSON для области, где нужна ваша диаграмма.

Карта США с соответствующими городами GeoJSON показана на иллюстрации ниже.

{
    "type": "Feature",
    "properties": {
        "name": "Alabama",
        "density": 94.65
    },…
}

GeoJSON

Теперь США должны быть выбраны в качестве точки обзора, и для этого необходимо добавить слой GeoJSON. Для добавления этого слоя на карту требуется всего 4 строки кода.

var map = L.map('map').setView([37.8, -96], 4);
var tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
L.geoJson(statesData).addTo(map);

Назначение цвета на основе плотности населения

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

function getColor(d) {
    return d > 1000 ? '#800026' :
           d > 500  ? '#BD0026' :
           d > 200  ? '#E31A1C' :
           d > 100  ? '#FC4E2A' :
           d > 50   ? '#FD8D3C' :
           d > 20   ? '#FEB24C' :
           d > 10   ? '#FED976' :
                      '#FFEDA0';
}

Во всех городах есть возможность вызова этой функции.

Масштабирование карты при нажатии на нее

Когда пользователь нажимает на определенный город, пользовательский интерфейс должен значительно увеличиваться. Таким образом, добавляется прослушиватель кликов, который приближается к состоянию.

function zoomToFeature(e) {
    map.fitBounds(e.target.getBounds());
}

Подсветка при наведении

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

function highlightFeature(e) {
    var layer = e.target;
    layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });
    layer.bringToFront();
}

Сброс стилей

Определение того, что происходит при выходе из мыши:

function resetHighlight(e) {
    geojson.resetStyle(e.target);
}

Сочетание всего этого

Все эти взаимодействия можно комбинировать следующим образом:

function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
    });
}
geojson = L.geoJson(statesData, {
    style: style,
    onEachFeature: onEachFeature
}).addTo(map);

Вот готовый продукт карты диаграммы:

Просмотрите визуализацию после того, как мы настроили карту:

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

– Джон Тьюки, 1977 г.

В результате визуализация становится легче для просмотра и более привлекательной.

Что спросил клиент:

Затем наш клиент запрашивает существенное изменение, говоря:

«Мы настраиваем карту, чтобы она выглядела как наша организационная диаграмма; почему мы не можем изменить значок маркера по умолчанию и разработать новый маркер, отражающий нашу организацию, и использовать его там, где это необходимо?»

Мы рассмотрим, как вы можете добиться этого с помощью Mendix. Где вы планируете хранить картину? Сколько картинок необходимо? Как вы отобразите тень, дающую эффект реальности? Как работает javascript для получения изображения?

Создание пользовательских значков

Чтобы создать собственный значок, сначала подготовьте изображения. Поскольку мы поддерживаем наш бизнес, мы разработали следующие три значка и теневые значки:

В иконе белый фон действительно прозрачен. Ниже приведен пример создания переменной значка с помощью Javascript:

var newMarker = L.icon({
    iconUrl: 'new-marker.png',
    shadowUrl: 'new-shadow.png',
    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the 
                                                    iconAnchor
});

Чтобы добавить этот недавно созданный маркер на карту, можно предпринять следующие шаги:

L.marker([51.5, -0.09], {icon: newMarker }).addTo(map);

Это упростит добавление этого маркера на карту, а поскольку мы планируем добавить еще три, в качестве наилучшей практики мы создадим отдельный класс. В javascript это может быть просто.

var MxIcon = L.Icon.extend({
    options: {
        shadowUrl: 'new-shadow.png',
        iconSize:     [38, 95],
        shadowSize:   [50, 64],
        iconAnchor:   [22, 94],
        shadowAnchor: [4, 62],
        popupAnchor:  [-3, -76]
    }
});

Если мы определим класс таким образом, мы сможем использовать его сразу для нескольких маркеров, как показано ниже.

var greenIcon = new LeafIcon({iconUrl: 'green-icon.png'}),
var yellowIcon = new LeafIcon({iconUrl: 'yellow-icon.png'}),
var redIcon = new LeafIcon({iconUrl: 'red-icon.png'});

Если вам нужно собственное изображение, преобразуйте свой png в base64 с помощью java-экшена Base64Encode общедоступного сообщества и добавьте префикс к вашей строке base64 следующим образом:

$convertedBase64 = ‘data: image/png;base64,’+$base64.

Смотрим на готовый продукт:

Похоже, мы получаем новую тему для нашей персонализированной карты. Leaflet имеет массу функций и параметров настройки. Изучите функции и используйте их по мере необходимости. Спасибо за чтение этого! Удачного дня!

Читать далее



Документация — Leaflet — библиотека JavaScript для интерактивных карт
Эта ссылка относится к Leaflet. Проверьте этот список, если вы используете другую версию Leaflet. Растр слоев пользовательского интерфейса…leafletjs.com





Учебники — Leaflet — библиотека JavaScript для интерактивных карт
Каждое руководство здесь сопровождается пошаговым объяснением кода и достаточно просто даже для новичков в JavaScript…leafletjs.com



От издателя –

Если вам понравилась эта статья, вы можете найти больше похожих на нашей Medium странице. Для просмотра отличных видео и прямых трансляций вы можете посетить MxLive или наше сообщество Страница YouTubee.

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

Заинтересованы в более активном участии в нашем сообществе? Присоединяйтесь к нам в нашем Канале сообщества Slack.