打开新页面时不显示 Ionic 3 和 Open Layer 4答案

【问题标题】：Ionic 3 And Open Layer 4 not display when open new page打开新页面时不显示 Ionic 3 和 Open Layer 4
【发布时间】：2018-12-18 22:38:57
【问题描述】：

我尝试使用 openlayer 构建一个简单的应用程序。我在我的package.json 中使用 Ionic 3 和 Open layer 版本："openlayers": "^4.6.5",

我的page.ts：

import { Component, ViewChild, Renderer, ElementRef } from '@angular/core';
    import { IonicPage,Platform } from 'ionic-angular';

    import OlMap from 'ol/map';
    import OlXYZ from 'ol/source/xyz';
    import OlTileLayer from 'ol/layer/tile';
    import OlView from 'ol/view';
    import OlProj from 'ol/proj';

    @IonicPage()
    @Component({
      selector: 'page-open-map',
      templateUrl: 'open-map.html'
    })

    export class OpenMapPage {

      map: OlMap;
      source: OlXYZ;
      layer: OlTileLayer;
      view: OlView;

      constructor(platform: Platform, public renderer: Renderer) {
        platform.ready().then(() => {
          console.log("Platform is ready");
          this.loadMap();
        })
      }

      loadMap() {
        this.source = new OlXYZ({
          // Tiles from Mapbox (Light)
          url: 'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
        });

        this.layer = new OlTileLayer({
          source: this.source
        });

        this.view = new OlView({
          center: OlProj.fromLonLat([6.661594, 50.433237]),
          zoom: 3,
        });

        this.map = new OlMap({
          target: 'map',
          layers: [this.layer],
          view: this.view
        });

      }

    }

我的html文件：

 <ion-header>

      <ion-navbar>
        <ion-title>OpenMap</ion-title>
      </ion-navbar>

    </ion-header>

    <ion-content padding class="about">
      This is my super awesome about page.
     <div id="map" #map class="map" ></div>
    </ion-content>

当我构建这个应用程序时，主页是好的，但是当我打开一个新页面时，我的页面没有显示地图。我的代码有问题吗？

非常感谢！

【问题讨论】：

标签： angular typescript ionic-framework openlayers

【解决方案1】：

这不需要使用platform.ready()，当你尝试“打开一个新页面”时，你的应用应该已经准备好了。

你可以试试这个吗？

    constructor(public renderer: Renderer) {}

    ngAfterViewInit() { 
      this.loadMap()
    }

我也永远不会在构造函数中实例化任何内容，但会尝试将其移入 ngAfterViewInit() Lifecycle hooks，因为在将其实例化到构造函数中时，您的 target: 'map' 或者更好的说法是 <div id="map" #map class="map" ></div> 可能不会还存在。

ngAfterViewInit 在 DOM 完全加载后触发

这样做可能会解决您的问题

【讨论】：

【解决方案2】：

在您的 html 中，尝试将 div 放在 ion-content 之外

【讨论】：