При использовании React, Leaflet, leaflet-pixi-overlay всплывающее окно маркера закрывается сразу после щелчка

Я работаю над картой-буклетом в разделе React. По соображениям производительности мне пришлось использовать PixiOverlay для рисования маркеров (https://github.com/manubb/Leaflet.PixiOverlay). Однако у меня проблема со всплывающими окнами. Со следующим кодом:

  • событие щелчка маркера правильно запускается при нажатии на маркер
  • если карту перетащить, пока маркер нажат и отпущен, всплывающее окно открывается нормально
  • НО с одним "чистым" щелчком сразу же запускается событие popupclose.

Мой гибридный подход (реакция-листовка, 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;

Любое предложение? Спасибо.

Изменить. Похоже, что и маркер, и карта обрабатывают событие клика (добавлено ведение журнала кликов в исходном коде). Я хочу, чтобы карта обрабатывала щелчки (которые закрывают всплывающие окна), но не тогда, когда щелчок уже обрабатывается маркером ...

Изменить № 2: Я попытался добавить следующее в обработчик кликов маркера:

event.stopPropagation();
event.data.originalEvent.stopPropagation();

Но это абсолютно ничего не дает ... Похоже, это основная проблема PIXI?


reactjs javascript leaflet react-leaflet pixi.js
person Will59    schedule 10.03.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

На данный момент я действительно не вижу «чистого» способа остановить распространение события. У меня есть решение:

  • отключить автоматическое закрытие всплывающих окон при щелчке по карте
  • определить, совпадает ли щелчок карты с маркером; закройте всплывающее окно, когда это не так

Объявите всплывающее окно со следующей опцией:

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

Добавьте обработчик кликов на карте, при необходимости закройте всплывающее окно:

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

Это несколько грязно, так как предполагает, что событие щелчка маркера обрабатывается первым ...

person Will59    schedule 12.03.2020