У меня есть карта, которая взаимодействует с каруселью. Когда карусель перемещается, карта летит в новый регион, связанный с информацией в новом элементе карусели.
Для каждого элемента карусели я настроил соответствующий слой GeoJSON с набором точек и хочу включить / выключить слои при перемещении карты к новому элементу карусели. Для этого я написал следующий код:
let carouselMapMove = (event) => {
if (!this.map) {
return;
}
let camera = this.map.cameraForBounds(this.recents[event.to].bounds, {
padding: (window.innerWidth <= 640) ? (window.innerWidth * 0.15) : (window.innerHeight * 0.15)
});
if (camera) {
camera.duration = 3000;
this.map.flyTo(camera);
}
this.recents.forEach(recent_item =>{
this.map.setLayoutProperty(recent_item.id, 'visibility', 'none');
});
this.map.setLayoutProperty(this.recents[event.to].id, 'visibility', 'visible');
};
Где this.recents
- это еще один JSON-файл со всеми элементами карусели и их id
(я думаю, эта часть работает хорошо).
Вот копия одного из шаблонов GeoJSON:
{
"id": "1",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [
{"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [0,0]}},
{"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [0.1,-0.1]}}
]
}
},
"layout": {
"icon-image" : "pin",
"icon-size" : 0.05,
"icon-offset" : [0,-250],
"visibility":"visible"
}
}
Моя проблема заключается в том, что всякий раз, когда это событие выполняется и карта перемещается, объекты исчезают примерно на 0,5 секунды, но сразу же появляются снова, когда карта масштабируется и перемещается из области.
Кто-нибудь знает, как это исправить? Я предполагаю, что это связано с изменением уровня масштабирования и автоматическим включением слоя.
Заранее спасибо, я ценю даже толчок в правильном направлении!