Нет взаимодействий, работающих в OpenLayers 6 с Angular 9 - PullRequest
Новая
       61

Нет взаимодействий, работающих в OpenLayers 6 с Angular 9

1 голос
/ 23 марта 2020

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

1 Ответ

0 голосов
/ 23 марта 2020

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

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

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

, чтобы соответствовать версия OpenLayers, которую я использую.

...