无法以角度获取openlayers css

Posted

技术标签:

【中文标题】无法以角度获取openlayers css【英文标题】:Cannot get the openlayers css in angular 【发布时间】:2019-01-07 04:42:08 【问题描述】:

我刚开始在我的 angular 6 中使用 openlayers 5,我关注 this tutorial 并查看 this SO question。我的角度组件现在有

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 的样式。我在地图div 下将缩放按钮设置为简单的无样式按钮。我在这里想念什么?如何插入 opelayers css 样式?

谢谢

【问题讨论】:

【参考方案1】:

您需要将 OpenLayers 样式表添加到您的 angular.json 文件的 styles 部分(此配置在 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"
            ],
            ...
          
        ,
        ...
      
    ,
    ...
  ,
  ...

【讨论】:

以上是关于无法以角度获取openlayers css的主要内容,如果未能解决你的问题,请参考以下文章

无法以角度反应形式获得 FormArray 结构

openlayers二次简单封装 线性、点

在 Openlayers 中抓取 GeoJSON 数据

使用 Openlayers 的 WFS 请求中出现奇怪的错误

OpenLayers - 将地图保存为具有自定义名称的 png 图像

openlayer3中地图重复怎么获取正确的坐标点