Блог

Главная - Вопросы по программированию - OpenLayers 6.4.3 Не работает в Angular 10

OpenLayers 6.4.3 Не работает в Angular 10

#javascript #angular #typescript #openlayers #openlayers-6

#javascript #angular #typescript #openlayers #openlayers-6

Вопрос:

Я пытаюсь отобразить очень простую карту в openlayers. У меня включена правильная таблица стилей, и я не понимаю, что не так. Как можно использовать очень простой компонент openlayers в Angular?

У меня действительно есть шаблон с элементом map, да. Я не думаю, что это какая-то тривиальная ошибка, но что я знаю.

 import { Component, Input, OnInit, ViewChild } from '@angular/core';

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';

@Component({
  selector: 'core-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.sass']
})
export class MapComponent implements OnInit {
  constructor() { }

  ngOnInit() {
    var map = new Map({
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      target: 'map',
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });
  }
}

Комментарии:

1. Возможно, вам потребуется установить цель в AfterViewInit вместо ngOnInit, я думаю, причина, по которой это не работает, заключается в том, что в ngOnInit div, который должен отображать карту, не инициализирован, поэтому, если вы установите цель в ngOnInit, это не даст никакого эффекта. Все остальное выглядит нормально (Stackblitz: stackblitz.com/edit /… )

2. Это было смешно. Мне нужно было установить фиксированный размер в CSS для карты.

3. Рад, что вы поняли это: D

4. В моем случае мне нужно было установить дополнительные компоненты: npm install @types /ol