在 OpenLayers 6 和 Angular 9 中没有交互答案

【问题标题】：No Interactions working in OpenLayers 6 with Angular 9在 OpenLayers 6 和 Angular 9 中没有交互
【发布时间】：2020-03-23 19:30:53
【问题描述】：

我正在尝试在 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;
}

【问题讨论】：

6.1.1 是您导入的正确 css 版本吗？
将其更改为 6.2.1 并解决了问题。非常感谢！

标签： angular openlayers angular9 openlayers-6 angular-openlayers

【解决方案1】：

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

应该是

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：