Как удалить функцию по правому клику в openlayers 5 - PullRequest
Новая
       22

Как удалить функцию по правому клику в openlayers 5

2 голосов
/ 08 марта 2019

У меня есть особенность на карте в открытых слоях, мое требование - разрешить пользователю удалить эту функцию, щелкнув правой кнопкой мыши.

Вот скриншоты с ссылками:

Hover on the feature

After right click

Когда пользователь нажимает «Удалить», эта функция должна быть удалена.Если пользователь щелкнет в другом месте, где после щелчка правой кнопкой мыши на элементе меню «Удалить» должно исчезнуть.

Вот пример: openlayers карта с элементом

1 Ответ

2 голосов
/ 08 марта 2019

Вам нужно будет переопределить стандартное меню контента и добавить свое собственное. Добавьте слушателей, чтобы отключить его, если вид меняется, пользователи нажимают клавишу esc и т. Д. Добавление этого кода сработало на вашем примере: 

var contextMenu = document.createElement('div');
contextMenu.id = "contextMenu"
contextMenu.dir = "ltr";
contextMenu.className = "contextMenu";
contextMenu.style.position = "absolute";
contextMenu.style.left = "0px";
contextMenu.style.top = "0px";
contextMenu.style.display = "none";
map.getViewport().appendChild(contextMenu);

contextMenu.innerHTML = 
    '<div id="contextMenuRemove" class="menuItem" onclick="removeFeature();"> Remove </div>';

var mouseOver = false;

function hideContextMenu() {
    contextMenu.style.display = "none";
}

map.on('click', hideContextMenu);

map.getView().on('change', function () {
    if (contextMenu.style.display != "none") {
       setTimeout(hideContextMenu, 250);  // delay reset until map singleclick event has fired
    }
});

contextMenu.addEventListener('contextmenu', function (e) {
    e.preventDefault();
});

document.addEventListener('keydown', function (e) {
    if (e.keyCode == 27) {
        hideContextMenu();
    }
});

function openContextMenu(x, y) {
    contextMenu.style.right = "";
    contextMenu.style.bottom = "";
    contextMenu.style.left = x + "px";
    contextMenu.style.top = y + "px";
    contextMenu.style.display = "block";
}

var canvas = map.getViewport().getElementsByTagName("canvas")[0];
var features;

canvas.addEventListener('contextmenu', function (e) {
    features = map.getFeaturesAtPixel([e.x, e.y]);
    if (features) {
        e.preventDefault();
        openContextMenu(e.x, e.y);
    }
});

function removeFeature() {
    source.removeFeature(features[0]);
}

Это стиль, который я использую для контекстных меню (в вашем случае не было отключенных записей или разделителей) 

.contextMenu {
    background-color: #eee;
    position: absolute;
    border: solid 1px black;
    width: 100px;
}
.contextMenu .menuItem {
    cursor: pointer;
    padding: 5px;
}
.contextMenu .disabled {
    color: #aaa;
    pointer-events: none;
    cursor: none;
}
.contextMenu .menuItem:hover {
    background-color: #ccc;
}
.menuSeparator {
    border-bottom: solid 1px black;
}";
...