OpenLayers 3 DragBox 未显示在地图上

Question

当我在地图上移动+拖动并释放时，“boxend”侦听器会触发。 此外，如果我在将 dragBox 交互添加到地图后检查地图对象，则 dragBox 交互位于地图对象中。 问题是在选择区域时，该框在地图上永远不可见。 我错过了什么？

 $scope.drawBox = () => {
    const dragBox = new ol.interaction.DragBox({
      condition: ol.events.condition.shiftKeyOnly,
      style: new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: [0, 0, 255, 1],
          width: 2
        })
      })
    });

    map.addInteraction(dragBox);

    dragBox.on("boxend", function(e) {
      console.log("boxend called"); // listener is triggered
    });
  };

Answer 1

OpenLayers 版本 v3.11.0 的发布改变了您设置 ol.interaction.DragBox 和 ol.interaction.DragZoom 样式的方式。 在创建对象时不使用样式属性，您必须使用 CSS 为该功能设置样式。

老的：

 new ol.interaction.DragZoom({
      style: new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'red',
          width: 3
        }),
        fill: new ol.style.Fill({
          color: [255, 255, 255, 0.4]
        })
      })
    })

新的：

.ol-dragzoom {
  border-color: red;
  border-width: 3px;
  background-color: rgba(255,255,255,0.4);
}

Answer 2

我有同样的问题。 我使用 OL 3.14，我用那个 CSS 解决了这个问题：

.ol-dragbox {
    background-color: rgba(255,255,255,0.4);
    border-color: rgba(100,150,0,1);
  }