Javascript 使用React、传单、传单pixi叠加，单击后立即关闭标记弹出窗口

我正在制作传单地图，在React下。出于性能原因，我不得不使用PixiOverlay来绘制标记（）。 但我面临弹出窗口的问题。使用以下代码：

• 单击标记时会正确触发标记的单击事件
• 如果在单击并释放标记的同时拖动地图，弹出窗口将正常打开
• 但只需单击一次“清除”，popupclose事件就会立即触发

到目前为止，我的混合方法（react传单、PixiOverlay）运行良好，但我无法解决这个问题

以下代码被简化，一些元素不受React的控制，以简化测试代码：

import { Map, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import { Paper } from '@material-ui/core';

import * as PIXI from 'pixi.js';
import 'leaflet-pixi-overlay';
import L from 'leaflet';

const pixiMarkerContainer = new PIXI.Container();
let markerTextures = {};

const testPopup = L.popup({ autoPan: false, pane: 'popupPane' });

const 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;

    container.addChild(newMarker);
    newMarker.anchor.set(0.5, 1);
    newMarker.scale.set(1 / scale);
    newMarker.interactive = true;
    newMarker.buttonMode = true;

    newMarker.click = () => {
      testPopup
        .setLatLng([50.63, 13.047])
        .setContent('<b>Test</b>');
      console.log('Open popup');
      map.openPopup(testPopup);
    };

    map.on('popupclose', () => { console.log('Close popup'); });

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

function PixiMap() {
  const [markerTexturesLoaded, setMarkerTexturesLoaded] = useState(false);
  const [mapReady, setMapReady] = useState(false);
  const mapRef = useRef(null);

  useEffect(() => {
    if (Object.keys(markerTextures).length === 0) {
      const loader = new PIXI.Loader();
      loader.add('default', 'https://manubb.github.io/Leaflet.PixiOverlay/img/marker-icon.png');
      loader.load((thisLoader, resources) => {
        markerTextures = { default: resources.default.texture };
        setMarkerTexturesLoaded(true);
      });
    }
  }, []);

  useEffect(() => {
    if (mapReady && markerTexturesLoaded) {
      const map = mapRef.current.leafletElement;
      markerOverlay.addTo(map);
      markerOverlay.redraw();
    }
  }, [mapReady, markerTexturesLoaded]);

  return (
    <Paper
      style={{ flexGrow: 1, height: '100%' }}
    >
      <Map
        preferCanvas
        ref={mapRef}
        style={{ height: '100%' }}
        center={[50.63, 13.047]}
        zoom={12}
        minZoom={3}
        maxZoom={18}
        whenReady={() => { setMapReady(true); }}
        onClick={() => { console.log('map click'); }}
      >
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?" />
      </Map>
    </Paper>
  );
}

export default PixiMap;

---

但这绝对没用。。。看起来这是一个基本的PIXI问题？

在这一点上，我真的看不到阻止事件传播的“干净”方法。 我的解决办法是：

• 单击地图时禁用弹出窗口自动关闭
• 检测地图的点击是否与标记的点击相同；当弹出窗口不可用时关闭它

使用以下选项声明弹出窗口：

const testPopup = L.popup({
  autoPan: false,
  pane: 'popupPane',
  closeOnClick: false,    // : disable the automatic close
});

在标记单击处理程序中，记录单击的位置：

    newMarker.click = (event) => {
      // Set aside the click position:
      lastMarkerClickPosition = { ...event.data.global };
      testPopup
        .setLatLng([50.63, 13.047])
        .setContent('<b>Test</b>');
      setPopupParams({ text: 'test' });
      map.openPopup(testPopup);
    };

这有点脏，因为如果首先处理标记的单击事件，它会假定标记的单击事件

    newMarker.click = (event) => {
      // Set aside the click position:
      lastMarkerClickPosition = { ...event.data.global };
      testPopup
        .setLatLng([50.63, 13.047])
        .setContent('<b>Test</b>');
      setPopupParams({ text: 'test' });
      map.openPopup(testPopup);
    };

    map.on('click', (event) => {
      // Find click position
      const clickPixiPoint = new PIXI.Point();
      interaction.mapPositionToPoint(
        clickPixiPoint,
        event.originalEvent.clientX,
        event.originalEvent.clientY,
      );

      if (
        (clickPixiPoint.x !== lastMarkerClickPosition.x)
      || (clickPixiPoint.y !== lastMarkerClickPosition.y)
      ) {
        map.closePopup();
      }
    });