3

我想在我的 geojson 图层上为各种元素右键单击添加一个上下文菜单（我正在做一个路线图，所以在我想显示上下文菜单的任何部分右键单击道路）。

通过使用 onEachFeature 并执行以下操作，我设法使左键单击正常

function onEachFeature(feature, layer) {
        layer.on({
            click: showAssetInfo,
            contextmenu: contextreg
        });

    }   

 function showAssetInfo(e) {
        AssetMouseClick(e.target.feature.properties.objectid, e.latlng);
    }

对于上下文菜单，我遵循了此处的示例 。上下文菜单库位于此处

我有以下内容可以在准备好的文档上调用（jquery）

$.contextMenu({
    selector: 'path.leaflet-clickable',
    zIndex: 99999,
    callback: function (key, options) {
        var m = "clicked: " + key;
        window.console && console.log(m) || alert(m);
    },
    items: {
        "edit": { name: "Edit", icon: "edit" },
        "cut": { name: "Cut", icon: "cut" },
        "copy": { name: "Copy", icon: "copy" },
        "paste": { name: "Paste", icon: "paste" },
        "delete": { name: "Delete", icon: "delete" },
        "sep1": "---------",
        "quit": { name: "Quit", icon: "quit" }
    }
});

我已经对其进行了测试，并且选择器确实返回了 GeoJson 功能，如果它将相同的菜单附加到其他东西上，它也可以正常工作。

我在这里缺少什么吗？

还有一种好方法可以在启动时将objectid传递给菜单，这样我就可以在调用菜单的不同选项时使用它

编辑：

我创建了这个小提琴来演示http://jsfiddle.net/Q3L4c/22/

4

1 回答 1

2

2013 年 8 月创建的上下文菜单有一个很好的传单插件：
Leaflet.contextmenu

这个上下文菜单库有很好的文档，包括在 GeoJSON 层中实现的分步说明。

在下面的代码片段中，请注意我们如何轻松地将完整的功能和图层对象传递给选择编辑菜单项时调用的函数。在此示例中，图层组是 GeoJSON 图层组，可以通过以下方式访问 GeoJSON 属性feature.properties

注意：在此解决方案中，内容菜单项定义是在onEachFeature处理过程中生成的，而不是在调用上下文菜单时动态生成的，如果您计划生成可能依赖于运行时可能发生变化的变量的动态菜单项生成，请注意这一点有时，您需要在创建菜单项时将每个项目的可见性或启用选项评估为静态值。

function onEachFeature(feature, layer) {

    layer.bindContextMenu({
        contextmenu: true,
        contextmenuInheritItems: false,
        contextmenuItems: [
            { text: 'edit', icon: 'edit', callback: function () { editFeature(feature, layer); } },
            { text: 'cut', icon: cut', callback: function () { console.log('cut'); } },
            { text: 'copy', icon: 'copy', callback: function () { console.log('copy'); } },
            { text: 'paste', icon: 'paste', callback: function () { console.log('paste'); } },
            { text: 'delete', icon: 'delete', callback: function () { console.log('delete'); } },
            { separator: true },
            { text: 'quit', icon: 'quit', callback: function () { console.log('quit'); } },
        ]
    });

    layer.on({
        click: showAssetInfo
    });

}   

/**
 * Edit a feature on the map
 * @param {GeoJSON} feature GeoJSON feature, access metadata through feature.properties
 * @param {any} layer Leaflet layer represents this feature on the map (the shape)
 */
function editFeature(feature, layer) {
    console.log(JSON.stringify(feature.properties));
}

function showAssetInfo(e) {
    AssetMouseClick(e.target.feature.properties.objectid, e.latlng);
}
于 2019-08-05T06:52:05.773 回答