在 Angular 9 的 OpenLayers 6 中没有交互作用

Question

我正在尝试在 Angular 9 组件中设置 OpenLayers 6 地图。我可以成功加载 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;
}

Answer 1

问题是，我在 component.css 文件中包含了错误的 ol.css。

需要

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

为了适应我正在使用的 OpenLayers 版本。

Answer 2

您可以像这样将 "node_modules/ol/ol.css" 添加到 angular.json 文件中：

    "build": {
      ...
      "options": {
        ...
        "styles": [
          "src/styles.scss",
          "node_modules/ol/ol.css"
        ],
        ...
      },
    }

在 Angular 9 的 OpenLayers 6 中没有交互作用

No Interactions working in OpenLayers 6 with Angular 9

openlayers

angular-openlayers

angular

angular9

openlayers-6