OpenLayers 3 и Ionic 2 не отображаются после загрузки

Я следовал решению этой темы (Ionic 2 Beta и Open Layers 3 не загружают карту 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
      });
  }
}

дом.тс

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">

ionic-framework angular display ionic2 openlayers-3
person Xav    schedule 28.07.2016    source источник
comment
Не могли бы вы дать нам более подробную информацию о вашем коде? Спасибо!   -  person Thierry Templier    schedule 28.07.2016
comment
Конечно, @ThierryTemplier! Сделанный.   -  person Xav    schedule 28.07.2016
comment
@ThierryTemplier Я добавил setTimeout(function(){window.dispatchEvent(new Event(resize));}, 100); в конце ngAfterViewInit(). Но я думаю, что это немного грязно... И это не работает на мобильных устройствах (IonicView)!   -  person Xav    schedule 28.07.2016

Ответы (2)


arrow_upward
0
arrow_downward

Я предполагаю, что это проблема обнаружения изменений. Возможно, вы могли бы использовать метод 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(); // <-----
  }
}
person Thierry Templier    schedule 28.07.2016
comment
Спасибо, но нет, не работает. Мне все еще нужно изменить размер вручную. Даже если попробовать в хоум.ц. - person Xav; 28.07.2016
comment
На самом деле, если я смешаю с setTimeout, это сработает...! setTimeout(function(){ window.dispatchEvent(new Event(resize)); this.cdr.detectChanges(); }, 200); Это реальное решение? @ТьерриТемплиер - person Xav; 28.07.2016
comment
Привет @Xav, не могли бы вы объяснить свое решение с помощью cdr.detectChanges()? Я использую его после создания карты, но он не работает setTimeout( ()=›{ window.dispatchEvent(new Event(resize)); this.cdr.detectChanges(); }, 2000,this); - person rrabio; 22.09.2016

arrow_upward
0
arrow_downward

возможно, это карта OL3, которую нужно обновить для отображения, попробуйте добавить:

map.updateSize();

после создания карты

person Hicham Zouarhi    schedule 29.07.2016
comment
Привет @Hicham! Нет, это ничего не меняет, извините. Когда я нажимаю кнопку «Увеличить», «Уменьшить» или «Северное направление», это также ничего не меняет. Так что я не уверен, что взаимодействие с картой что-то делает. - person Xav; 29.07.2016