Как сделать слои плитки Leaflet доступными

Как можно добавить тег «alt» к слоям листов и повысить показатель доступности приложения, в частности, для Esri.WorldGrayCanvas, но любой из плиток, найденных по адресу http://leaflet-extras.github.io/leaflet-providers/preview/?


leaflet accessibility map alt tiles
person geospatialem    schedule 04.11.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

esriGray.on('tileload', function (tileEvent) {
    tileEvent.tile.setAttribute('alt', 'Map tile image');
});

Таким образом, изображения всегда имеют тег alt, даже после масштабирования/панорамирования, и вам не нужно использовать Jquery.

person iH8    schedule 22.12.2014
comment
Спасибо, iH8! Я немного отредактировал код, добавив также tileloadstart. Вот обновление: esriGray.on('tileload, tileloadstart', function (tileEvent) { tileEvent.tile.setAttribute('alt', 'Map tile image'); }); - person geospatialem; 22.12.2014
comment
Нет проблем, всегда пожалуйста. Но не могли бы вы объяснить, почему вы также хотите установить атрибут alt в событии tileloadstart? мне кажется лишним... - person iH8; 22.12.2014
comment
Хорошо, что они избыточны. Кажется, что событие tileload работает только при начальной загрузке тайла, но событие tileloadstart охватывает начальную загрузку и последующие загрузки тайлов. Поэтому замените исходный код на 'tileloadstart', и все получится. - person geospatialem; 22.12.2014

arrow_upward
0
arrow_downward

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

Примечание. Поскольку приведенное ниже решение ссылается на jQuery, убедитесь, что вы ссылаетесь на JavaScript jQuery в своем коде.

После установки переменной базовой карты, например:

var esriGray = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Map Tiles © Esri — Esri, DeLorme, NAVTEQ',
    maxZoom: 16
});

Добавьте функцию готовности документа jQuery, придав панелям плиток Leaflet атрибут. Затем запустите функцию, указывающую, что на каждый фрагмент карты будет ссылаться «Изображение фрагмента карты» и его порядковый номер.

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

$(document).on('ready', function(){
    addMapTileAttr('.leaflet-tile-pane img')
});

function addMapTileAttr(styleClass) {
    var selector = $(styleClass);
    selector.each(
    function(index) {
        $(this).attr('alt',"Map tile image " + index);
    });
}
person geospatialem    schedule 22.12.2014