无法以角度获取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的主要内容,如果未能解决你的问题,请参考以下文章
使用 Openlayers 的 WFS 请求中出现奇怪的错误