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);
  }

OpenLayers 3 DragBox未显示在地图上

2 个答案: