2

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

2 回答 2

2

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

它需要是

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

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

于 2020-03-23T20:59:17.973 回答
0

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

    "build": {
      ...
      "options": {
        ...
        "styles": [
          "src/styles.scss",
          "node_modules/ol/ol.css"
        ],
        ...
      },
    }
于 2020-05-06T17:49:39.627 回答