我有一个主应用程序组件,我在其中创建OpenLayers地图对象。地图对象是中心对象,因为大多数组件都需要对它的引用。另一个组件,我在用户可以查看它之前设置地图选项,最后是地图目标
因此除了Edge / Explorer之外,它几乎适用于所有导航器。
我做了plunker
1-创建具有空目标的地图
app.component.ts
ngOnInit() { // The main app component creates the OpenLayers map object. The map object // is central, as most components need a reference to it. this.map = this.createMap(); } createMap() { var map = new ol.Map({ controls: ([ new ol.control.Zoom({zoomInTipLabel: "Agrandir", zoomOutTipLabel: "Réduire"}), new ol.control.FullScreen({tipLabel: "Plein Écran"}), new ol.control.Rotate({tipLabel: "Annuler la rotation"}), new ol.control.Attribution(), new ol.control.ScaleLine(), ]), renderer: 'canvas', view: new ol.View({ center: this.config.map.center, zoom: this.config.map.zoom, rotation: this.config.map.rotation }) }) this.mapInitialised = true; return map; }
2-设置地图目标
map.component.ts
@Input() map:any; constructor (private elementRef:ElementRef) {} ngOnInit() { // set map target this.map.setTarget(this.elementRef.nativeElement); this.map.updateSize(); }