将OpenLayers 4与Angular 5一起使用 [英] Use OpenLayers 4 with Angular 5
问题描述
我正在尝试在Angular 5中使用OpenLayers 4.
I'm trying to use OpenLayers 4 in Angular 5.
基本上,我只是想从OpenLayers官方网站上实现 QuickStart 示例
Basically I just want to implement the QuickStart example from the official OpenLayers Site.
到目前为止我所做的:
-
npm install ol --save
下载ol软件包 - angular-cli.json 将这些行添加到angular-cli.json中.看到必须在Stackoverflow的另一个示例上完成此操作. ol.css文件存在. ol.js文件没有.因此,我不知道这是对还是错,但显然无法正常工作.
npm install ol --save
to download the ol package- angular-cli.json added those lines to the angular-cli.json. Saw that this has to be done on another example on Stackoverflow. The ol.css file exists. The ol.js file doesnt. So I don't know if this is the right or the wrong way but it can clearly not work.
我的角度项目由3个组成部分组成:
My angular project consists of 3 components:
-app
--console
--map
--sidebar
app.component.css
app.compinent.html
app.component.spec.ts
app.component.ts
app.module.ts
map.component.html
map.component.html
import { Component, OnInit } from '@angular/core';
import * as ol from '../../../node_modules/ol';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
mapId: string;
map: ol.Map = undefined;
constructor() { }
ngOnInit() {
this.map = new ol.Map({
target: this.mapId,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
],
view: new ol.View({
center: ol.proj.fromLonLat([6.661594, 50.433237]),
zoom: 3,
})
});
}
}
谁能告诉我如何使其正常工作?
Can anyone tell how to get this working correctly?
推荐答案
已更新到Angular 8.x和OpenLayers 6.x:
安装ol
并进行以下更改:
1.)在 html.index 中添加符合条件的CSS(确保CSS的版本与安装的ol
的版本匹配):
1.) Add the accordant CSS in the html.index (make sure that the version of the CSS matches the installed version of ol
) :
<link rel="stylesheet" href="https://openlayers.org/en/v6.1.1/css/ol.css" type="text/css">
另一种方法是在 angular.json 中的styles
对象中引用CSS:
Another way is to reference the CSS in the styles
object within the angular.json:
"styles": [
"./node_modules/ol/ol.css",
"src/styles.scss"
],
2.)在 app.component.ts 中创建地图:
2.) Create a map in app.component.ts:
import { AfterViewInit, Component } from '@angular/core';
import { defaults as defaultControls } from 'ol/control';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import ZoomToExtent from 'ol/control/ZoomToExtent';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
map: Map;
ngAfterViewInit() {
this.map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
})
],
view: new View({
center: [813079.7791264898, 5929220.284081122],
zoom: 7
}),
controls: defaultControls().extend([
new ZoomToExtent({
extent: [
813079.7791264898, 5929220.284081122,
848966.9639063801, 5936863.986909639
]
})
])
});
}
}
3.) app.component.css 中的某些样式:
3.) Some style in app.component.css:
.map {
width: 100%;
height: 100vh;
}
4.)最后是 app.component.html 中的标记:
4.) And finally the markup in app.component.html:
<div id="map" class="map"></div>
还可以随意查看我的 GitHub存储库.
如 Bhalchandra Bhosale 所述,最好在ngAfterViewInit
内设置地图目标:
As stated by Bhalchandra Bhosale it might be even better to set the target of the map within ngAfterViewInit
:
export class MapComponent implements OnInit, AfterViewInit {
...
ngAfterViewInit() {
this.map.setTarget('map');
}
}
ol
5.2版本的旧答案:
Old answer for version 5.2 of ol
:
ol
是适合OpenLayers的软件包.但是,您无需在 angular-cli.json 中添加任何内容.
随着最近的更新("ol": "^5.2.0"
),导入OpenLayers的类和功能的方式发生了一些变化.
With the recent update ("ol": "^5.2.0"
) the way of importing classes and functions of OpenLayers changed a bit.
map.component.ts :
import { Component, OnInit } from '@angular/core';
import OlMap from 'ol/Map';
import OlXYZ from 'ol/source/XYZ';
import OlTileLayer from 'ol/layer/Tile';
import OlView from 'ol/View';
import { fromLonLat } from 'ol/proj';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
map: OlMap;
source: OlXYZ;
layer: OlTileLayer;
view: OlView;
ngOnInit() {
this.source = new OlXYZ({
url: 'http://tile.osm.org/{z}/{x}/{y}.png'
});
this.layer = new OlTileLayer({
source: this.source
});
this.view = new OlView({
center: fromLonLat([6.661594, 50.433237]),
zoom: 3
});
this.map = new OlMap({
target: 'map',
layers: [this.layer],
view: this.view
});
}
}
map.component.html :
<div id="map" class="map"></div>
map.component.css :
.map {
width: 100%;
height: 100vh;
}
在 index.html 的header
-标记内添加OpenLayers的CSS:
Add the CSS of OpenLayers within the header
-tag of index.html:
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css" type="text/css">
<style>html, body { margin: 0; }</style>
甚至更老的答案:
您的组件可能如下所示:
Your component might look like the following:
import {Component, OnInit} from '@angular/core';
import OlMap from 'ol/map';
import OlXYZ from 'ol/source/xyz';
import OlTileLayer from 'ol/layer/tile';
import OlView from 'ol/view';
import OlProj from 'ol/proj';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
map: OlMap;
source: OlXYZ;
layer: OlTileLayer;
view: OlView;
constructor() {
}
ngOnInit() {
this.source = new OlXYZ({
url: 'http://tile.osm.org/{z}/{x}/{y}.png'
});
this.layer = new OlTileLayer({
source: this.source
});
this.view = new OlView({
center: OlProj.fromLonLat([6.661594, 50.433237]),
zoom: 3
});
this.map = new OlMap({
target: 'map',
layers: [this.layer],
view: this.view
});
}
}
CSS:
.map {
width: 100%;
height: 100vh;
}
HTML:
<div id="map" class="map"></div>
让我知道此解决方案是否适合您.
Let me know if this solution works for you.
这篇关于将OpenLayers 4与Angular 5一起使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!