我有一张使用 mapboxgl-js 根据某些标准隐藏或显示地图标记的地图。
隐藏标记按预期工作,但是当我希望标记再次显示时,它们会闪烁几毫秒然后再次消失,而地图会在它们再次出现之前隐藏底层上的标签(街道名称等)。
观看此视频:https ://streamable.com/debcp
请参阅此代码笔: https ://codepen.io/jakobfuchs/details/VRRgJO
我得出的结论是,这是由'icon-allow-overlap': true
标记符号图层上的设置引起的。
有什么建议可以保持该设置并避免闪烁吗?
奇怪的是,这不是 100% 的时间发生,而是大约 95% 的时间发生。
代码示例:
标记层:
map.addLayer({
id: 'property-layer',
type: 'symbol',
source: 'properties',
filter: ['!has', 'point_count'],
layout: {
'symbol-placement': 'point',
'icon-image': 'marker',
'icon-size': 1,
'icon-anchor': 'bottom',
'icon-allow-overlap': true,
}
});
过滤器代码:
const filterToggle = document.getElementById('filterToggle');
filterToggle.addEventListener('change', function(e) {
if (openPopup) {
openPopup.remove();
openPopup = '';
}
let properties;
if (this.checked) {
properties = {
type: "FeatureCollection",
features: features.features.filter((property) => property.properties.availability === 'Available')
}
} else {
properties = features;
}
map.getSource('properties').setData(properties);
});