无法单击使用 PIXI 创建的标记.传单地图上的精灵尽管是交互式属性 true 并添加了点击事件

Question

这是我的简单代码。我只是渲染一个标记并尝试单击它。 但它不可点击，也没有任何反应。

import React, { PureComponent } from 'react';
import ReactDOMServer from 'react-dom/server';
import * as PIXI from 'pixi.js';
import 'leaflet-pixi-overlay';
import L from 'leaflet';
import { SvgMarker } from '../../../utils/mapIcon';
const pixiMarkerContainer = new PIXI.Container();
let markerTextures = {};
class MapRouteMarkers extends PureComponent {
constructor(props) {
super(props);
this.state = { markerTexturesLoaded: false };
}

这是我的标记覆盖，我通过添加newMarker.interactive = true使其具有交互性;并在newMarker上注册了点击事件。

markerOverlay = L.pixiOverlay(utils => {
const map = utils.getMap();
const scale = utils.getScale();
const renderer = utils.getRenderer();
const container = utils.getContainer();
if (map && Object.keys(markerTextures).length !== 0) {
if (container.children.length) container.removeChildren();
const newMarker = new PIXI.Sprite(markerTextures.default);
const newMarkerPoint = utils.latLngToLayerPoint([50.63, 13.047]);
newMarker.x = newMarkerPoint.x;
newMarker.y = newMarkerPoint.y;
newMarker.scale.set(1 / scale);
newMarker.interactive = true;
newMarker.buttonMode = true;
newMarker.on('click', () => {
console.log('gggg');
});

container.addChild(newMarker);
renderer.render(container);
}
}, pixiMarkerContainer);

在这里我正在重绘标记

componentDidUpdate() {
if (this.state.markerTexturesLoaded) {
const map = this.props.mapRef;
this.markerOverlay.addTo(map);
this.markerOverlay.redraw();
}
}

在这里，我正在从 svg 加载基本纹理。

componentDidMount() {
if (Object.keys(markerTextures).length === 0) {
const loader = new PIXI.Loader();
const svgString = ReactDOMServer.renderToString(<SvgMarker iconColor="yellow" />);
const DOMURL = self.URL || self.webkitURL || self;
const img = new Image();
const svg = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
const url = DOMURL.createObjectURL(svg);
img.src = url;
const texture = new PIXI.Texture.from(img);
loader.load((thisLoader, resources) => {
markerTextures = { default: texture };
this.setState({
markerTexturesLoaded: true,
});
});
}
}
render() {
return null;
}
}
export default MapRouteMarkers;

这是相同的附加图像

有谁知道我在这里做错了什么？

Answer 1

尝试以不同的方式处理事件，这对我有用：

newMarker.click = (event) => {
console.log(`Click, info=${JSON.stringify(event.data.global)}`);
};

例如，您也可以以相同的方式使用"悬停"和"鼠标退出"事件。