Mapbox GL JS Установить свойство Paint на указанную c функцию в слое - PullRequest
Новая
       52

Mapbox GL JS Установить свойство Paint на указанную c функцию в слое

0 голосов
/ 26 марта 2020

Я использую Mapbox Studio в качестве основы для отображения и стилизации, а затем использую HTML для дополнительных функций карты.

Одной из функций является изменение непрозрачности значков при наведении курсора или вводе с помощью мыши. Я проверил другие примеры и все остальные ссылки на функцию, когда вы создаете ее непосредственно в HTML. Мне удалось изменить непрозрачность, но только для всего слоя.

Могу ли я каким-либо образом использовать командную строку e.features [0], чтобы применить изменения только к одному объекту, а не ко всему слою?

Я использовал этот код, который изменял непрозрачность для всего слоя 'Icon' (Слой содержит 5 значков с текстом): 

    // Change the cursor to a default and change opacity when the it enters a feature in the 'Icons' layer.
map.on('mouseenter', 'Icons', function() {
    map.getCanvas().style.cursor = 'default';
    var feature = e.features[0];
    map.setPaintProperty('Icons', 'icon-opacity', 0.5);
});

// Change it back to a pointer and reset opacity when it leaves.
map.on('mouseleave', 'Icons', function() {
    map.getCanvas().style.cursor = '',
    map.setPaintProperty('Icons', 'icon-opacity', 1);
});

Спасибо !!!

1 Ответ

0 голосов
/ 31 марта 2020

Есть несколько способов, которыми вы могли бы достичь этого. Один из подходов заключается в добавлении каждого объекта в качестве отдельного слоя, чтобы при изменении непрозрачности значка, добавленного в слой 'specific-icon-layer', можно было передать 'specific-icon-layer' методу Map#on. Это, вероятно, самый простой вариант, если у вас относительно небольшое количество маркеров.

Другой подход заключается в добавлении уникальных идентификаторов для каждой функции значков, чтобы вы могли использовать выражение filter в сочетании с * 1007. *Map#setPaintProperty и Map#queryRenderedFeatures (или Map#querySourceFeatures). Например, предположим, что вы добавляете свойство 'id' к каждому объекту Geo JSON, представляющему значок в источнике для слоя 'Icons'. Затем вы можете настроить прослушиватель событий, подобный в этом примере , получить 'id' возвращенного объекта и использовать 'id' (предположим, здесь 'example-id'), чтобы обновить свойство рисования для слоя 'Icons': 

map.setPaintProperty(
  'Icons', 
  'icon-opacity', 
  ['match', ['get', 'id'], 'example-id', 0.5 , 1]
);

Здесь мы используем выражения match и get, чтобы сказать "если 'id' из 'example-id', закрасьте его значок с непрозрачностью 0.5, в противном случае используйте непрозрачность 1. "

...