无法单击在传单地图上使用 PIXI.Sprite 创建的标记，尽管它是交互式属性 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 };
      }

这是我的 markerOverlay，我通过添加 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 加载 baseTexture。

 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;

here is the image attached for the same

有人知道我做错了什么吗？

Answer 1

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

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

例如，您也可以以相同的方式使用 'hover' 和 'mouseout' 事件。

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

Not able to click marker created using PIXI.Sprite on leaflet map despite being interactive property true and click event is added

leaflet

reactjs

pixi.js

react-leaflet

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

Not able to click marker created using PIXI.Sprite on leaflet map despite being interactive property true and click event is added

leaflet

reactjs

pixi.js

react-leaflet

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