Javascript 在typescript/angular2中使用openlayer3

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

有人知道如何使用openlayer和angular2/Typescript吗

非常感谢

---

John

至于您可能对project感兴趣的打字-您可以在那里找到openlayers/openlayers.d.ts-您可能需要了解

tsd

、文件夹转换等

至于AngularJS 2，考虑到它仍处于测试阶段，经验告诉你，你主要依靠自己。谷歌仍然可以向你指出，即

通常的方法是首先根据已有的示例理解AngularJS 2方法。您应该很快就会注意到不同集成的许多常识。然后试着以适当的方式调整你想要的。还有一个重要的部分是进一步给予和分享知识：）

了解现有的AngularJS 1.x解决方案（如）可能会有所帮助。

1。选项A（使用Angular CLI）

在.angular cli.json中添加Openlayers3（位于项目根目录下）：

1。选项B（不使用Angular CLI）

在index.html中添加Openlayers3（通常的方式）：

2。从typescript文件访问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);
    }
}

从“@angular/core”导入{AfterViewInit，Component，ElementRef，ViewChild}；
//这是访问ol3所必需的！
声明变量ol：任何；
@组成部分({
选择器：“我的应用程序”，
模板：`
地图
`
//“#”（模板引用变量）对于使用ViewChild装饰器访问map元素很重要！
})
导出类AppComponent实现AfterViewInit{
//这是访问html元素以设置映射目标（在视图初始化之后）所必需的！
@ViewChild（“mapElement”）mapElement:ElementRef；
公共地图：任何；
构造函数（）{
var osm_layer:any=新ol.layer.Tile({
来源：new ol.source.OSM（）
});
//请注意，不能在此处设置目标！
this.map=新ol.map({
图层：[osm_图层]，
视图：新ol.view({
中心：ol.proj.transform（[0,0]，'EPSG:4326'，'EPSG:3857'），
缩放：2
})
});
}
//查看初始化后，可以设置地图目标！
ngAfterViewInit（）{
this.map.setTarget（this.maplement.nativeElement.id）；
}
}

您可以使用angular2 openlayers，作为npm软件包提供，或者在这里：

另一个注意事项是openlayers打字不完整。我对此做了一点贡献，但还远远没有完成。确保检查文档。不要依赖智能感知。如果发现需要使用的方法或属性不在定义文件中，请确保添加该方法或属性并提交拉取请求！很好的通知和很好的了解。事实上，对于非类型化的JS世界，这就是打字的发展方式。当使用其他不完整的类型时，我也在尝试这样做。这很好，但是引用URL从源加载kml数据并不是直接的。Angular将url作为导航url，而不是文件系统url。我得到的是

ReferenceError:ol未在OpenaLayers 5中定义。
ol
用法是否发生了变化？我考虑过这一点，但
src
中的最后一次提交大约是11个月前。所以我不确定这是一个好的选择
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);
    }
}