如何摆脱 "blue dot" 选择图标并使悬停在整个图片上允许移动它

Question

我有一张 openlayers 地图和地图上的图钉。我想去掉这个蓝点，当你将鼠标悬停在图钉上时它会出现。有很多类似的主题，但发现指南并没有给我带来结果。我还希望能够通过鼠标在任何地方单击来移动图像

我试着这样做：

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/

Answer 1

为交互提供与标记相同的样式将删除蓝点。图钉图标应锚定在左下角附近，并且修改交互仅适用于该位置（除非 pixelTolerance 设置为高，否则它也会在图标之外工作，这会造成混淆）。与修改 select 不同，交互将作用于图标的任何可见部分。通过在拖动上添加悬停（pointermove）select 交互和自定义 condition 以检查悬停是否选择了任何功能，高 pixelTolerance 可以仅限于图标。如果你想要悬停也可以改变鼠标指针的样式让你知道它在图标上（删除蓝点的需要）。修订 fiddle https://jsfiddle.net/vynk7Ld8/4/（也从非常旧的 OpenLayers 3 版本更新到 OpenLayers 4）

如何摆脱 "blue dot" 选择图标并使悬停在整个图片上允许移动它

How to get rid of the "blue dot" selection icons and make hovering over the whole picture allowed to move it

openlayers-5