Как избавиться от иконки выделения «синяя точка» и сделать так, чтобы наведение на всю картинку позволяло ее перемещать - PullRequest
Новая
       13

Как избавиться от иконки выделения «синяя точка» и сделать так, чтобы наведение на всю картинку позволяло ее перемещать

0 голосов
/ 29 мая 2019

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

Я пытаюсь сделать это: 

var selectedStyleFunction = function(feature, resolution) {
    return [new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: "white",
            lineCap: "butt",
            lineJoin: "bevel",
            width:3
        }),
        fill : new ol.style.Fill({
            color: "black"
        }),
    })];
};

//drag and drop
const dragInteraction = new ol.interaction.Modify({
        features: new ol.Collection([marker]),
        style: selectedStyleFunction,
});

Это делает точку вообще не видимой, но затем онаТрудно найти его на изображении.

Мой пример здесь: https://jsfiddle.net/anetka31/eo4prjgx/51/

1 Ответ

0 голосов
/ 29 мая 2019

Придание взаимодействию того же стиля, что и у маркера, удалит синюю точку. Значок булавки должен быть закреплен рядом с левым нижним краем, и взаимодействия модификации работают только в этой позиции (если только pixelTolerance не установлено на высоком уровне, когда оно также будет работать за пределами значка, что может привести к путанице). В отличие от изменения, взаимодействие выбора будет работать с любой видимой частью значка. При добавлении зависания (указатель перемещения) выберите взаимодействие и пользовательский condition при перетаскивании, чтобы проверить, были ли какие-либо объекты выбраны при наведении курсора, максимум pixelTolerance можно ограничить только значком. Если вы хотите, чтобы указатель мыши также изменил стиль указателя мыши, чтобы вы знали, что он находится над значком (устраняя необходимость в синей точке). Пересмотренная скрипка https://jsfiddle.net/vynk7Ld8/4/ (также обновлена ​​с очень старой версии OpenLayers 3 до OpenLayers 4)

...