时间戳

首页 > 解决方案 > 如何摆脱“蓝点”选择图标并使悬停在整个图片上允许移动它

openlayers-5 - 如何摆脱“蓝点”选择图标并使悬停在整个图片上允许移动它

问题描述

我有一张 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/

标签： openlayers-5

解决方案

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

推荐阅读