无法在 angular 中获取 openlayers css
Cannot get the openlayers css in angular
我刚开始在我的 angular 6 中使用 openlayers 5,我遵循 this tutorial and also looking 。我的 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';
在我的 class
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 样式?
谢谢
您需要将 OpenLayers 样式表添加到 angular.json
文件的 styles
部分(此配置在 .angular-cli.json
之前 Angular 6).
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"
],
...
}
},
...
}
},
...
},
...
}
我刚开始在我的 angular 6 中使用 openlayers 5,我遵循 this tutorial and also looking
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';
在我的 class
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 样式?
谢谢
您需要将 OpenLayers 样式表添加到 angular.json
文件的 styles
部分(此配置在 .angular-cli.json
之前 Angular 6).
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"
],
...
}
},
...
}
},
...
},
...
}