css - 无法以 Angular 获取openlayers css

我刚开始在我的angular 6中使用openlayers 5，然后按照this tutorial并同时查找this SO question。我的 Angular 分量现在有

import ol-map from 'ol/map';
import ol-xyz from 'ol/source/xyz';
import ol-tile from 'ol/layer/tile';
import ol-view from 'ol/View';
import * as ol-proj from 'ol/proj';

在我类

 olmap: ol-map;
 source: ol-xyz;
 layer: ol-tile;
 view: ol-view;

然后在我的ngOnInit中

this.source = new ol-xyz({
  url: 'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
});

this.layer = new ol-tile({
  source: this.source
});

this.view = new ol-view({
  center: ol-proj.fromLonLat([6.661594, 50.433237]),
  zoom: 3,
});

this.olmap = new ol-map({
  target: 'map',
  layers: [this.layer],
  view: this.view
});

这可行，但我不了解openlayers的样式。我在 map div下获得了缩放按钮，它们是简单的，未样式化的按钮。我在这里想念什么？如何插入opelayers CSS样式？

谢谢

最佳答案

您需要将OpenLayers样式表添加到styles文件的angular.json部分(此配置位于Angular 6之前的.angular-cli.json中)。
OpenLayers 5/6样式表node_modules/ol/ol.css OpenLayers 4样式表node_modules/openlayers/dist/ol.css angular.json

{
  ...
  "projects": {
    "<project name>": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "styles": [
              "node_modules/ol/ol.css",
              "src/styles.css"
            ],
            ...
          },
          ...
        },
        ...
        "test": {
          ...
          "options": {
            ...
            "styles": [
              "node_modules/ol/ol.css",
              "src/styles.css"
            ],
            ...
          }
        },
        ...
      }
    },
    ...
  },
  ...
}

关于css - 无法以 Angular 获取openlayers css，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51602298/