OpenLayers 3 & Ionic 2，加载后不显示答案

【问题标题】：OpenLayers 3 & Ionic 2, not displayed after loadingOpenLayers 3 & Ionic 2，加载后不显示
【发布时间】：2016-07-28 13:00:31
【问题描述】：

我遵循了这个主题的解决方案 (Ionic 2 Beta and Open Layers 3 not loading map 3) 以便将 OL3 集成到 Ionic 2 应用程序中，但是我遇到了一个问题。当我发球时，地图会加载，但它在视觉上是空的。我必须调整浏览器的大小以使其显示。所以我想这是一个刷新问题...... 我是 Ionic 和 Angular 的新手，所以我在这里:)。你有什么线索吗？谢谢！

map.component.ts

import {Component, ViewChild, Renderer} from '@angular/core';
declare var ol: any;
@Component({
  selector: 'olmap',
  template: '<div id="map" #map class="full-map" data-tap-disabled="true"></div>'
})
export class OLMap {
  @ViewChild('map') map;
  constructor(public renderer: Renderer) {
  }
  ngAfterViewInit() {
     var layer = new ol.layer.Tile({
        source: new ol.source.OSM()
      });
      var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
      var view = new ol.View({
        center: london,
        zoom: 6
      });
      var map = new ol.Map({
        target: 'map',
        layers: [layer],
        view: view
      });
  }
}

home.ts

import {Page}   from 'ionic-angular';
import {OLMap} from './component/map.component';

@Page({
  templateUrl: 'build/pages/home/home.html',
  directives: [OLMap]
})

export class HomePage {
    constructor() {

    }
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Test
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
    <olmap></olmap>
</ion-content>

在我的 index.html 上

<script src="http://openlayers.org/en/v3.17.1/build/ol.js" type="text/javascript"></script>
<link type="text/css" href="https://openlayersbook.github.io/openlayers_book_samples/assets/ol3/css/ol.css" rel="stylesheet">
<link type="text/css" href="https://openlayersbook.github.io/openlayers_book_samples/assets/css/samples.css" rel="stylesheet">

【问题讨论】：

您能否向我们提供有关您的代码的更多详细信息？谢谢！
当然@ThierryTemplier ！完成。
@ThierryTemplier 我添加了 setTimeout(function(){window.dispatchEvent(new Event("resize"));}, 100);在 ngAfterViewInit() 结束时。但我想它有点脏......而且它在移动设备上不起作用（IonicView）！

标签： angular ionic-framework openlayers-3 ionic2 display

【解决方案1】：

我猜这是变更检测的问题。也许您可以利用ChangeDetectorRef 类的detectChanges 方法。

@Component({
  selector: 'olmap',
  template: '<div id="map" #map class="full-map" data-tap-disabled="true"></div>'
})
export class OLMap {
  @ViewChild('map') map;
  constructor(public renderer: Renderer, private cdr: ChangeDetectorRef) { // <-----
  }
  ngAfterViewInit() {
     var layer = new ol.layer.Tile({
        source: new ol.source.OSM()
     });
     var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
     var view = new ol.View({
       center: london,
       zoom: 6
     });
     var map = new ol.Map({
       target: 'map',
       layers: [layer],
       view: view
     });
     this.cdr.detectChanges(); // <-----
  }
}

【讨论】：

谢谢，但不，它不起作用。我仍然需要手动调整大小。即使在 home.ts 中尝试。
实际上，如果我与 setTimeout 混合，它可以工作......！ setTimeout(function(){ window.dispatchEvent(new Event("resize")); this.cdr.detectChanges(); }, 200);这是一个真正的解决方案吗？ @ThierryTemplier
嗨@Xav，你能用cdr.detectChanges()解释你的解决方案吗？我在地图创建后使用它，但它似乎不起作用 setTimeout( ()=>{ window.dispatchEvent(new Event("resize")); this.cdr.detectChanges(); }, 2000,this );

【解决方案2】：

可能是OL3地图需要更新才能显示，试试添加：

map.updateSize();

创建地图后

【讨论】：

嗨@Hicham！不，它没有任何改变，抱歉。当我点击放大、缩小或北向按钮时，它也没有任何改变。所以我不确定与地图交互会做些什么。