Question

我按照本主题（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">

Answer 1

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

@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(); // <-----
  }
}

Answer 2

也许这是需要更新的OL3地图，请尝试添加：

map.updateSize();

创建地图后

OpenLayers 3＆amp;离子2，加载后不显示

2 个答案: