Angular 4: доступ к элементу наложения Openlayers - PullRequest
Новая
       8

Angular 4: доступ к элементу наложения Openlayers

0 голосов
/ 03 ноября 2018

Как я могу использовать Openlayer 'overlay' внутри Angular? Я думаю, что лучший способ - через конструкцию @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>

Неангулярным решением является присоединение логики наложения к элементу 'overlay' HTML-элемента через 'element: document.getElementById (' overlay ')'. Это работает.

ОБНОВЛЕНИЕ : благодаря @ zerO логика перемещается из конструктора в ngOnInit ().

В моем Angular-компоненте я надеялся присоединить оверлейный Html-элемент с тегом представления "#overlayElement". В моем коде компонента я надеялся получить к нему доступ через @Viewchild. Я получаю странную ошибку [объект объекта]. 

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

1 Ответ

0 голосов
/ 04 ноября 2018

Я думаю constructor может быть слишком рано, чтобы получить к нему доступ. Не могли бы вы попробовать поставить его в ngOnInit() или ngAfterViewInit()?

...