dojo ARCGIS Javascript顶点自定义右键单击事件是否可能?

bvk5enib  于 2022-12-08  发布在  Dojo
关注(0)|答案(3)|浏览(221)

我正在使用ARCGIS Javascript API,并尝试替代形状顶点的默认右键单击行为。
在ESRI的帮助中,它确实列出了onVertexClick事件,但从此处似乎无法确定这是右键单击事件还是左键单击事件,因此我无法仅覆盖右键单击。https://developers.arcgis.com/javascript/jsapi/edit.html
我尝试设置右键单击行为,以便只删除当前节点/顶点,而不是显示带有“删除”选项的菜单。
EDIT这里是ARCGIS api中存在的当前事件。
在这个例子中,我们使用了一个工具栏来定义一个事件列表。
该事件已经在API中,但是它不返回任何方式来让我确定左/右点击。
您的注解“侦听单击事件,然后测试MouseEvent对象的按钮属性”将起作用,但实际上我无法直接向顶点添加单击事件,因为这些事件位于ARCGIS API代码中。

gudnpqoy

gudnpqoy1#

对于其他任何人谁正在寻找一种方法来做到这一点,而不是黑客周围。你可以听“contextmenu”(右键单击)事件,在“contextmenu”处理程序中设置一个标志,让应用程序知道当前状态。用“mousedown”对“顶点句柄”模拟一个单击事件,“mouseup”组合。在“vertex-click”处理程序中检查“contextmenu”处理程序中设置的右键单击标志

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

sg3maiej2#

在ESRI回复后,他们似乎没有在API中提供这一细节,因此这还不可能。

jvlzgdj9

jvlzgdj93#

最后我用了不同的方法。我想添加一个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;

相关问题