Невозможно щелкнуть маркер, созданный с помощью PIXI.Sprite на карте листовки, несмотря на то, что интерактивное свойство истинно, и добавлено событие щелчка - PullRequest
Новая
       96

Невозможно щелкнуть маркер, созданный с помощью PIXI.Sprite на карте листовки, несмотря на то, что интерактивное свойство истинно, и добавлено событие щелчка

0 голосов
/ 17 июня 2020

Это мой простой код. И я просто визуализирую один маркер и пытаюсь щелкнуть по нему. Но на него нельзя кликать, и ничего не происходит. 

     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();
   }
  }

Здесь я загружаю baseTexture из 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;

вот изображение, прикрепленное к тому же

Кто-нибудь знает, что я здесь делаю не так?

1 Ответ

0 голосов
/ 03 июля 2020

Попробуйте обработать событие по-другому, у меня это сработало: 

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

Вы также можете использовать, например, события 'hover' и 'mouseout' таким же образом.

...