无法使用 PIXI JS 和 Leaflet Mapping API 在地图上拖放标记

Question

我已使用 Leaflet.PixiOverlay 在地图上加载标记或纬度/经度点

现在我有两个要求

1. 将现有标记/点 (PIXI.Sprite) 拖放到另一个标记/点上
2. 将现有标记/点 (PIXI.Sprite) 拖放到地图上的另一个位置。

我尝试了以下方法，但它不起作用

/**
* In the below for loop identify the marker on which mouse down event has occurred. 
* In the 'mouseup' event on map, change the position of the selected marker
* 
* **Marker here is PIXI.Sprite**
*/
for (var i = 0; i < markersLength; i++) {
    var marker = new PIXI.Sprite(texture);
    marker.interactive = true;
    marker.buttonMode = true;
    marker.on('mousedown', (event) => {
      self.map.dragging.disable();
      marker['dragging'] = true;
      self.selectedMarker = marker;
      console.log('event mousedown on marker ', event);
    });

    marker.on('mouseup', (event) => {
      marker['dragging'] = false;

      console.log('event mouseup on marker ', event);
    });
    marker.on('mouseupoutside', (event) => {
      //marker['dragging'] = false;
      console.log('event mouseupoutside on marker ', event);
      self.map.dragging.enable();
    })

    markerArr.push(marker);
    childContainer.addChild(marker);
}

/**
* mouseup event on map should move selected marker but it doesnot
*
*/

this.map.on('mouseup', (event) => {
  if (this.selectedMarker) {
    let markerCoords = this.latLngToLayerPoint(event.latlng, this.map.getZoom());
    this.selectedMarker.position.x = markerCoords.x;
    this.selectedMarker.position.y = markerCoords.y;
    this.selectedMarker = null;
  }
})

Answer 1

为了通过鼠标移动来拖动或移动标记，我做了以下操作。

首先创建的 PIXI Overlay Layer

var pixiOverlayOptions = {
    doubleBuffering: /iPad|iPhone|iPod/.test(navigator.userAgent) && !window['MSStream'],
    autoPreventDefault: false,
}
var pixiContainer = new PIXI.Container();
pixiContainer.interactive = true;
pixiContainer.buttonMode = true;

var pixiOverlay = L.pixiOverlay(function (utils, event) {
var zoom = utils.getMap().getZoom();
var container = utils.getContainer();
var renderer = utils.getRenderer();
var project = utils.latLngToLayerPoint;
var layerPointToLatLng = utils.layerPointToLatLng;
var getScale = utils.getScale;
var invScale = 1 / getScale();
var interaction = renderer.plugins.interaction;

switch (event.type) {
    // all other events
    ...
    case 'add':{
        var texture = resources['markerImage']
        var markerSprite = new PIXI.Sprite(texture);
        invScale = 1 / getScale(utils.getMap().getZoom());
        markerSprite.scale.set(invScale);
        markerSprite.on('mousedown', (event) => {
            this.mouseDownOnPoint(event, this);
        });
        container.addChild(markerSprite);
        renderer.render(container);
    }
        break;
    case 'pointDrag': {
       let latlng = event.latlng;
       let newCoords = project([latlng.lat, latlng.lng]);
       let marker = container.children[0];
       marker.x = newCoords.x;
       marker.y = newCoords.y;
       invScale = 1 / getScale(utils.getMap().getZoom());
        marker.scale.set(invScale); 
       renderer.render(container);
    }
      break;
  }
},pixiContainer, pixiOverlayOptions);

pixiOverlay.addTo(map);

这里有几件事很重要

1. 将 Pixi Container 标记为 interactive 为 true，buttonMode 为 true
2. 在图层选项对象中将 autoPreventDefault 添加为 false，并传递给图层
3. 添加一个“mousedown”事件处理程序，它实际上标记了被点击的标记。

定义处理标记上的'mousedown'事件的函数，请参阅此处禁用地图拖动

function mouseDownOnPoint(event, self) {
   self.map.dragging.disable();
   self.mouseDownOnSelectedMarker = event.currentTarget;
}

定义图层重绘函数

function redraw(data: { type: PixiLayerEvents, [key: string]: any }) {
  pixiOverlay.redraw(data);
}

在地图上添加'mousemove'处理程序，它实际上使用'pointDrag'事件调用重绘函数

map.on('mousemove', (event: L.LeafletMouseEvent) => {
  if (this.mouseDownOnSelectedMarker) {
    this.redraw({ type: 'pointDrag', latlng: event.latlng });
  }
});

在 'pointDrag' 事件中，标记位置随着鼠标在地图上的移动而不断变化。

一旦 'mouseup' 事件发生，只需将 'mouseDownOnSelectedMarker' 标记为 null 并启用地图拖动

map.on('mouseup', (event: L.LeafletMouseEvent) => {
 if (this.mouseDownOnSelectedMarker) {
    this.mouseDownOnSelectedMarker = null;
 }
 map.dragging.enable();
})