ARCGIS Javascript 顶点自定义右键单击事件可能吗？

Question

我正在使用 ARCGIS Javascript API 并尝试覆盖形状顶点的默认右键单击行为。

在 ESRI 的帮助中，它确实列出了 onVertexClick 事件，但是从这里似乎无法确定这是右击还是左击事件，所以我不能只覆盖右击。 https://developers.arcgis.com/javascript/jsapi/edit.html

我正在尝试将右键单击行为设置为仅删除当前节点/顶点，而不是显示带有“删除”选项的菜单。

编辑 这是 ARCGIS api 中存在的当前事件。

this.eventsList.push(dojo.connect(this._editToolbar, 'onVertexClick', $.proxy(this.addCustomVertexClickEvent, this)));

此事件已在 api 中，但它不会返回任何方式让我确定左/右键单击。

您的评论“监听点击事件然后测试 MouseEvent 对象的按钮属性”会起作用，但是我实际上不能直接将点击事件添加到顶点，因为这些在 ARCGIS api 代码中。

Answer 1

在收到 ESRI 的回复后，他们似乎没有在其 API 中提供此详细信息，因此目前还不可能。

Answer 2

对于其他正在寻找一种方法来做到这一点而无需到处乱搞的人。您可以在主体上监听“contextmenu”（右键单击）事件，在“contextmenu”处理程序中设置一个标志，让应用程序知道当前状态。使用“mousedown”、“mouseup”组合模拟对“顶点句柄”的点击事件。在“顶点单击”处理程序中检查“上下文菜单”处理程序中设置的右键单击标志

var editToolbar = new Edit(map, options);
var rightClick;

$('body').on('contextmenu', function(e) {
  var target = e.target;
  if(target.tagName === 'circle') {
    // We only care about this event if it targeted a vertex
    // which is visualized with an SVG circle element
    // Set flag for right click
    rightClick = true;
    // Simulate click on vertex to allow esri vertex-click
    // to fill in the data for us
    var mouseDownEvt = new MouseEvent('mousedown', e.originalEvent);
    target.dispatchEvent(mouseDownEvt);
    var mouseUpEvt = new MouseEvent('mouseup', e.originalEvent);
    target.dispatchEvent(mouseUpEvt);
    // Since this event will be handled by us lets prevent default
    // and stop propagation so the browser context menu doesnt appear
    e.preventDefault();
    e.stopPropagation();
  }
});

editToolbar.on('vertex-click', function(e) {
  if(rightClick) {
    // Handle the right click on a vertex
    rightClick = null;
  }
});

Answer 3

我最终以不同的方式做这件事。我想添加一个 UI，以便用户可以输入点的 XY

    // setup to allow editing
    this.editToolbar = new EditToolbar(this.map, { allowDeleteVertices: false });
    const rcMenuForGraphics = new RightClickVertexContextMenu();
    const menu =  rcMenuForGraphics.createMenu();
    // bind to the map graphics as this is where the vertex editor is
    this.map.graphics.on("mouse-over", (evt)=> {
        // bind to the graphic underneath the mouse cursor
        menu.bindDomNode(evt.graphic.getDojoShape().getNode());
      });

      this.map.graphics.on("mouse-out", (evt)=> {
        menu.unBindDomNode(evt.graphic.getDojoShape().getNode());
    });

    this.editToolbar.on("vertex-click", (evt2) => {
        rcMenuForGraphics.setCurrentTarget(evt2);
        // evt2.vertexinfo.graphic.geometry.setX(evt2.vertexinfo.graphic.geometry.x - 1000);
    })

    // when the graphics layer is clicked start editing
    gl.on("click", (evt: any) => {
        this.map.setInfoWindowOnClick(false);
        // tslint:disable-next-line: no-bitwise
        const t: any = EditToolbar.MOVE | EditToolbar.EDIT_VERTICES;
        this.editToolbar.deactivate();
        this.editToolbar.activate(t, evt.graphic);
    })

菜单代码使用 esri 的顶点编辑器来抓取点，更改其 XY，然后手动调用事件以刷新几何图形。只用多边形测试过

import Menu = require("dijit/Menu");
import MenuItem = require("dijit/MenuItem");
import Graphic = require("esri/graphic");
import Edit = require("esri/toolbars/edit");
import Point = require("esri/geometry/Point");

class RightClickVertexContextMenu {

  private curentTarget: { graphic: Graphic; vertexinfo: any; target: Edit; };
  public createMenu() {
    const menuForGraphics = new Menu({});

    menuForGraphics.addChild(new MenuItem({
        label: "Edit",
        onClick: () => {
            // this is a bit hooky. We grab the verx mover, change the x/y and then call the _moveStopHandler
            console.log(this.curentTarget.vertexinfo);
            const e: any =  this.curentTarget.target;
            const mover = e._vertexEditor._findMover(this.curentTarget.vertexinfo.graphic);
            const g: Graphic = mover.graphic;
            // add in a UI here to allow the user to set the new value. This just shifts the point to the left
            g.setGeometry(new Point(mover.point.x - 1000, mover.point.y ))
            e._vertexEditor._moveStopHandler(mover, {dx: 15});
            this.curentTarget.target.refresh();
        }
    }));

    menuForGraphics.addChild(new MenuItem({
        label: "Delete",
        onClick: () => {
            // call the vertex delete handler
            const ct: any = this.curentTarget.target;
            ct._vertexEditor._deleteHandler(this.curentTarget.graphic)
        }
    }));

    return menuForGraphics;
}

public setCurrentTarget(evt: { graphic: Graphic; vertexinfo: any; target: Edit; }) {
    this.curentTarget = evt;
}

}

export = RightClickVertexContextMenu;