[英]Mapbox GL JS Set Paint property on specific Feature in Layer
我使用 Mapbox Studio 作為映射和樣式的基礎,然后將 HTML 用於其他地圖功能。
其中一項功能是在懸停或鼠標輸入時更改圖標不透明度。 當您直接在 HTML 中創建它時,我已經檢查了其他示例和所有其他參考功能。 我設法改變了不透明度,但僅限於整個圖層。
我可以以某種方式使用 e.features[0] 命令行將更改僅應用於一個功能而不是整個圖層嗎?
我使用此代碼更改整個圖層“圖標”的不透明度(圖層包含 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);
});
謝謝!!!
有幾種方法可以實現這一點。 一種方法是將每個特征添加為單獨的圖層,這樣當您想更改添加到圖層'specific-icon-layer'
中的圖標的不透明度時,您可以將'specific-icon-layer'
傳遞給Map#on
方法。 如果您的標記數量相對較少,這可能是最直接的選擇。
另一種方法是為每個圖標功能添加唯一 ID,以便您可以將filter
表達式與Map#setPaintProperty
和Map#queryRenderedFeatures
(或Map#querySourceFeatures
)結合使用。 例如,假設您向每個 GeoJSON 要素添加了一個'id'
屬性,代表'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
。”
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.