Question

我有一个使用openLayer3的Javascript代码。我需要在一个angular2项目中的Typescript中实现这个代码。

有人知道如何使用带有angular2 / Typescript的openlayer吗？

非常感谢，

约翰

Answer 1

<强> 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);
    }
}

Answer 2

至于您可能对DefinitelyTyped项目感兴趣的打字 - 你可以找到openlayers / openlayers.d.ts - 你可能需要了解tsd，文件夹对话等。

至于AngularJS 2，考虑到它还处于测试阶段，经验告诉你主要靠自己。谷歌仍可以指向你https://gist.github.com/borchsenius/5a1ec0b48b283ba65021。

根据已有的例子，通常的方法是首先理解AngularJS 2的方法。您应该很快就会注意到不同集成方式的常识。然后尝试以适当的方式调整你想要的东西。然后有很大的部分可以进一步分享知识：）

同样了解像this article这样的现有AngularJS 1.x解决方案可能会有所帮助。

Answer 3

你可以使用angular2-openlayers，可以作为npm包使用，或者在这里：https://github.com/quentin-ol/angular2-openlayers

在typescript / angular2中使用openlayer3

3 个答案: