OpenLayers无法设置dragBox的样式

时间:2019-06-24 14:36:01

标签: angular typescript openlayers-5

我在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]”,样式就会开始起作用...这是自动添加的内容。

1 个答案:

答案 0 :(得分:0)

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

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