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の機能を返します。また、同じメニューを他のものにアタッチしても、正しく機能します。

ここに欠けているものはありますか？

また、起動時にオブジェクトIDをメニューに渡すと、メニューのさまざまなオプションを呼び出すときに使用できるようにするための良い方法があります。

編集：

このフィドルは、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 に答える