Question

我在OpenLayers 5中使用了Angular7 / Typescript，并且从'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);
}

没有样式显示...

我还尝试过将这种样式和其他几种变体直接放在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

我需要在CSS类中添加“ :: ng-deep”，以便它可以到达其封装内部。例如...

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

OpenLayers无法设置dragBox的样式

1 个答案: