Angular 4：访问 Openlayers 的“覆盖”元素答案

【问题标题】：Angular 4: access an Openlayers 'overlay' elementAngular 4：访问 Openlayers 的“覆盖”元素
【发布时间】：2018-11-03 20:06:57
【问题描述】：

如何在 Angular 中使用 Openlayer“覆盖”？我认为最好的方法是通过@Viewchild 构造。所以，不是通过 document.getElementById('overlay')。

在 HTML 文件中我有类似的东西。

<div #overlayElement id="overlay" style="background-color: yellow; width: 20px; height: 20px; border-radius: 10px;">
<div #mapElement id="map" class="map"> </div>

非 Angular 解决方案是通过 'element: document.getElementById('overlay')' 将覆盖逻辑附加到 Html 'overlay' 元素。这样可行。

更新：感谢@zerO，逻辑从构造函数转移到了ngOnInit()。

在我的 Angular 组件中，我希望使用视图标签“#overlayElement”附加覆盖 Html 元素。在我的组件代码中，我希望通过@Viewchild 访问它。我收到一个奇怪的 [Object object] 错误。

declare var ol: any;

@Component({
  selector: 'app-tab4-controls',
  templateUrl: './tab4-controls.component.html',
  styleUrls: ['./tab4-controls.component.css']
})
export class Tab4ControlsComponent implements AfterViewInit, OnInit {

@ViewChild('mapElement') mapElement: ElementRef;
@ViewChild('overlayElement') overlayElement: ElementRef;
public map: any;

constructor() { }

ngOnInit(): void {

  const layer = new ol.layer.Tile({
    source: new ol.source.OSM()
  });
  const interaction = new ol.interaction.DragRotateAndZoom();
  const control = new ol.control.FullScreen();
  const center = ol.proj.transform([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857');
  const overlay = new ol.Overlay({
    position: center,
    // element: document.getElementById('overlay') <== this works
    element : this.overlayElement.nativeElement.id
  });
  const view = new ol.View({
    center: center,
    zoom: 6
  });
  this.map = new ol.Map({
    layers: [layer],
    interactions: [interaction],
    controls: [control],
    overlays: [overlay],
    view: view
  });
}

ngAfterViewInit() {
    this.map.setTarget(this.mapElement.nativeElement.id);
}

【问题讨论】：

您应该在ngAfterViewInit 中使用element: this.overlayElement.nativeElement（所以不要使用.id）。在该事件之前尚未创建元素

标签： angular openlayers-3

【解决方案1】：

我认为constructor 访问它可能为时过早。你能试试把它放在ngOnInit()或ngAfterViewInit()吗？

【讨论】：

这是解决方案的一部分。现在地图显示了我何时使用该元素：document.getElementById('overlay')。我怎样才能用@ViewChild 做到这一点？
@tjm1706 是的，它是正确的。我不明白为什么它不起作用。我创建了一个 stackblitz 供参考 stackblitz.com/edit/angular-esyqkj
以这种方式从覆盖对象引用到目标不起作用：'element : this.overlayElement.nativeElement.id'。当我将其更改为“元素：document.getElementById('overlay')”时，它就可以工作了。
我认为在您的情况下，this 引用正在更改。试试这个：const overlayElement = this.overlayElement.nativeElement.id; const overlay = new ol.Overlay({ position: center, element : overlayElement });