javascript - 如何在 openlayers 3 中的图标周围添加可点击的边距？

Question

我正在使用 openlayers 3显示带有一些带有小图标的标记的 map 。单击其中一个后，浏览器将切换到与该标记关联的另一个页面。

标记目前作为特征实现:

const style = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 1.0],
        anchorXUnits: 'fraction',
        anchorYUnits: 'fraction',
        src: img_url,
    })
});

const feature = new ol.Feature({
    geometry: new ol.geom.Point([x, y]),
});

feature.setStyle(style);

这是我的点击处理程序:

map.on("click", e => {
    map.forEachFeatureAtPixel(e.pixel, (feature) => {
        window.location.href = "/s/" + feature.getId();
        return true; // stop after first feature
    });
});

不幸的是，这些图标非常小，因此很难在 iPad 等基于触摸的界面上点击。

是否有一种可接受的方法可以使目标变大？我的想法如下:

• 为每个标记创建一个额外的不可见标记，并使其可点击。
• 我不仅可以使用事件的位置，还可以对其周围的一些像素进行采样并使用附近的所有特征。

有更好的方法吗？

Answer 1

我的建议是在图标周围创建一个不可见的正方形，例如:

const style = [
  new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 1.0],
      anchorXUnits: 'fraction',
      anchorYUnits: 'fraction',
      src: img_url,
    })
  }),
  new ol.style.Style({
    image: new ol.style.RegularShape({
      stroke: new ol.style.Stroke({ color: [0, 0, 0, 0] }),
      points: 4,
      radius: 50, // <--------- control its size
      angle: Math.PI / 4
    })
  })
];