Не работает YMapListener.onUpdate
При перемещении центра карты, изменении масштаба, кликах ни одно из событий не выстреливает, не могу понять почему :(
import { MapEventUpdateHandler, YMapListener, YMapLocationRequest } from "@yandex/ymaps3-types";
import { YMap, YMapDefaultSchemeLayer} from '@yandex/ymaps3-types';
import { useEffect, useState } from "react";
import {Deck, MapViewState} from '@deck.gl/core';
import {ScatterplotLayer} from '@deck.gl/layers';
const INITIAL_VIEW_STATE: MapViewState = {
latitude: 37.8,
longitude: -122.45,
zoom: 15
};
type DataType = {
position: [longitude: number, latitude: number];
color: [r: number, g: number, b: number];
radius: number;
};
async function initMap(): Promise<YMap> {
const LOCATION: YMapLocationRequest = {
center: [37.623082, 55.75254],
zoom: 9
};
const map = new YMap(document.getElementById('yandex-maps')!, { location: LOCATION });
map.addChild(new YMapDefaultSchemeLayer({}));
return map;
}
function initDeckGl(): Deck {
const deckInstance = new Deck({
initialViewState: INITIAL_VIEW_STATE,
controller: true,
layers: [
new ScatterplotLayer<DataType>({
data: [
{position: [-122.45, 37.8], color: [255, 0, 0], radius: 100}
],
getPosition: (d: DataType) => d.position,
getFillColor: (d: DataType) => d.color,
getRadius: (d: DataType) => d.radius
})
],
canvas: document.getElementById('deck-gl-canvas')! as HTMLCanvasElement,
parent: document.getElementById('deck-gl-container')! as HTMLDivElement,
});
return deckInstance;
}
export const MapRR = () => {
const [deckGlInstance, setDeckGlInstance] = useState<Deck | undefined>(undefined);
const [yMapInstance, setYMapInstance] = useState<YMap | undefined>(undefined);
const updateHandler: MapEventUpdateHandler = (object) => {
console.log('Update object: ', object);
deckGlInstance?.setProps({
viewState: {
latitude: object.location.center[1],
longitude: object.location.center[0],
zoom: object.location.zoom - 1,
}
})
};
useEffect(() => {
setDeckGlInstance(initDeckGl());
initMap().then((map) => setYMapInstance(map));
}, []);
useEffect(() => {
if (!deckGlInstance || !yMapInstance){
return;
}
yMapInstance.addChild(
new YMapListener({
layer: 'any',
onUpdate: (z) => console.log('ou',z),
onClick: (z) => console.log('oc', z),
onStateChanged: (z) => console.log('zc', z)
})
);
}, [deckGlInstance, yMapInstance]);
return (
<div
id="deck-gl-container"
style={{
width: "100vw",
height: "100vh",
position: "relative"
}}
>
<div
id="yandex-maps"
style={{
position: "absolute",
width: "100%",
height: "100%",
}}
/>
<canvas id="deck-gl-canvas"
style={{
pointerEvents: "none"
}}
/>
</div>
);
}
Ответы (2 шт):
Автор решения: YaSupport
→ Ссылка
Пожалуйста, отправьте пример, который вы составили в jsbin.com или codepen.io, или ссылку на страницу, где мы можем воспроизвести эту ситуацию.
JS API 3.0 работает только с ключами, у которых заполнено поле «Ограничение по HTTP Referer». Поэтому, если вы используете JS API 3.0, нужно внести домены jsbin.com и cdpn.io в список разрешённых.
Автор решения: UniqueUlysees
→ Ссылка
Проблема в useEffect, он создает 2 экземпляра YMap, рисуется первый, а события слушались от второго инстанса. Проблему решает использование метода для очистки представления возвратная функция у useEffect