Я пытаюсь настроить карту OpenLayers 6 в компоненте Angular 9. Я могу успешно загрузить источник OSM, и элементы управления работают, но такие взаимодействия, как перетаскивание карты или масштабирование с помощью колесика мыши, не работают. Добавление взаимодействий по умолчанию вручную не решает проблему.
Все работало в моем предыдущем проекте, поэтому я в основном ищу факторы вне моего компонента, от которых зависят взаимодействия, о которых я мог бы и не подумать.
map.component.ts
import { Component, OnInit } from '@angular/core';
import Map from 'ol/Map';
import OsmSource from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import {fromLonLat} from 'ol/proj';
import View from 'ol/View';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
constructor() { }
ngOnInit(): void {
let map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OsmSource()
})
],
view: new View({
center: fromLonLat([10.4515, 51.1657]),
zoom: 6.3
})
});
}
}
map.component. html
<div id="map" class="map"></div>
<link rel="stylesheet" href="https://openlayers.org/en/v6.1.1/css/ol.css" type="text/css">
map.component. css
.map {
width: 100%;
height: 100vh;
}