[英]Using openlayer3 in typescript/angular2
我有一個使用openLayer3的Javascript代碼。 我需要在Typescript中的angular2項目中實現此代碼。
有人知道如何使用帶有angular2 / Typescript的openlayer嗎?
非常感謝,
約翰
1.選項A(使用Angular CLI)
在.angular-cli.json (位於項目根目錄)中添加Openlayers3:
...
"styles": [
"../node_modules/openlayers/dist/ol.css"
],
"scripts": [
"../node_modules/openlayers/dist/ol.js"
],
...
1.選項B(不使用Angular CLI)
在index.html中添加Openlayers3(“通常”方式):
<script src="node_modules/openlayers/dist/ol.js"></script> <link rel="stylesheet" href="node_modules/openlayers/dist/ol.css">
2.從您的打字稿文件中訪問ol:
import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";
// This is necessary to access ol3!
declare var ol: any;
@Component({
selector: 'my-app',
template: `
<h3> The map </h3>
<div #mapElement id="map" class="map"> </div>
`
// The "#" (template reference variable) matters to access the map element with the ViewChild decorator!
})
export class AppComponent implements AfterViewInit {
// This is necessary to access the html element to set the map target (after view init)!
@ViewChild("mapElement") mapElement: ElementRef;
public map: any;
constructor(){
var osm_layer: any = new ol.layer.Tile({
source: new ol.source.OSM()
});
// note that the target cannot be set here!
this.map = new ol.Map({
layers: [osm_layer],
view: new ol.View({
center: ol.proj.transform([0,0], 'EPSG:4326', 'EPSG:3857'),
zoom: 2
})
});
}
// After view init the map target can be set!
ngAfterViewInit() {
this.map.setTarget(this.mapElement.nativeElement.id);
}
}
至於你可能對DefinitelyTyped項目感興趣的打字 - 你可以找到openlayers / openlayers.d.ts - 你可能需要了解tsd
,文件夾對流等。
至於AngularJS 2,考慮到它還處於測試階段,經驗告訴你主要靠自己。 谷歌搜索可以指向你,即https://gist.github.com/borchsenius/5a1ec0b48b283ba65021 。
根據已有的例子,通常的方法是首先理解AngularJS 2方法。 您應該很快就會注意到不同集成方式的常識。 然后嘗試以適當的方式調整你想要的東西。 然后有很大的貢獻進一步分享知識:)
也知道像本文這樣的現有AngularJS 1.x解決方案可能有所幫助。
您可以使用angular2-openlayers,可以作為npm包使用,或者在這里: https : //github.com/quentin-ol/angular2-openlayers
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.