OpenLayers 无法设计 dragBox

Question

我将 Angular7/Typescript 与 OpenLayers 5 一起使用，并且我从 'ol/interaction';

添加了一个 DragBox

mapValues.drawObj = new DragBox({
  class: 'myDragBox'
});
mapValues.map.addInteraction(mapValues.drawObj);

我已将样式添加到我的 scss 文件

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

没有显示样式...

我还尝试将这种样式和其他几种变体直接放在 "Style" 标签中的 HTML 中。

非常感谢任何帮助！

更新根据评论，我将代码更改为...

mapValues.drawObj = new DragBox({
className: 'myDragBox'
});
mapValues.map.addInteraction(mapValues.drawObj);

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

...我仍然没有样式，但是所有 DragBox 事件都会触发。

更新当我在开发人员工具中查看样式时，它看起来像这样...

.ol-dragbox[_ngcontent-c6]{
  background-color: rgba(255,255,255,0.4) !important;
  border-color: rgba(100,150,0,1) !important;
  border-style: solid;
  border-width: 3px;
  }

如果我删除“[_ngcontent-c6]”样式开始工作...这是自动附加的内容。

Answer 1

我需要将“::ng-deep”添加到 css class 以便它可以到达它的封装内部。例如...

::ng-deep .myDragBox{
    background-color: rgba(255,255,255,0.3);
    border: 1px solid red;
  }

OpenLayers 无法设计 dragBox

OpenLayers cannot style dragBox

angular

typescript

openlayers-5