В OpenLayers 6 с Angular 9 не работают взаимодействия

Я пытаюсь настроить карту 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;
}

angular angular9 openlayers angular-openlayers openlayers-6
person TNTea    schedule 23.03.2020    source источник
comment
6.1.1 - правильная версия css для вашего импорта?   -  person Mike    schedule 23.03.2020
comment
Изменил его на 6.2.1, и это решило проблему. Большое спасибо!   -  person TNTea    schedule 23.03.2020

Ответы (2)


arrow_upward
2
arrow_downward

Проблема заключалась в том, что я включил неправильный файл ol.css в свой файл component.css.

Это должно было быть

<link rel="stylesheet" href="https://openlayers.org/en/v6.2.1/css/ol.css" type="text/css">

чтобы соответствовать используемой мной версии OpenLayers.

person TNTea    schedule 23.03.2020

arrow_upward
0
arrow_downward

Вы можете добавить node_modules / ol / ol.css в файл angular.json следующим образом:

    "build": {
      ...
      "options": {
        ...
        "styles": [
          "src/styles.scss",
          "node_modules/ol/ol.css"
        ],
        ...
      },
    }
person Viter Rod    schedule 06.05.2020