使用 Ionic 的低质量 OL 地图

Question

我正在尝试使用 Ionic 加载 OL 地图。当我用 'ionic serve' 加载它时，地图在浏览器中加载正常。问题是当我在移动设备中加载地图时，地图质量变得非常低。当地图容器改变大小并且地图不再加载时，我曾经在网络应用程序中发生过这种情况。在网络应用程序中，我通过应用一个函数来修复它，该函数在容器更改其大小后重新加载地图，如下所示：

$('#containerMap').on('change', function () {
  setTimeout(function(){ map.updateSize(); }, 500);
});

我尝试在 home.ts 页面中应用相同的功能，但没有成功。经过一些研究，我看到有人说加载地图的正确方法是使用离子组件，但我无法从示例中复制。

Ionic v4 和 OpenLayers v5.3

The Ionic Components 相关答案：

我遵循的其他示例：

https://stackblitz.com/edit/ionic-nz2cgw?file=pages%2Fhome%2Fhome.ts

我正在尝试做什么（主页-page.ts）：

import { Component, Renderer, ViewChild } from '@angular/core';
import { NavController, Platform } from '@ionic/angular';
import { Map } from 'ol';
import { OSM, Vector as VectorSource } from 'ol/source.js';
import Point from 'ol/geom/Point.js';
import Feature from 'ol/Feature';
import { transform } from 'ol/proj.js';
import { Icon, Style } from 'ol/style.js';
import { Vector as VectorLayer } from 'ol/layer.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {
    @ViewChild('map') map;
    constructor(platform: Platform, public renderer: Renderer) {
        platform.ready().then(() => {
          console.log("Platform is ready");
          setTimeout(() => {
             this.loadMap();
           }, 1000);
        })  
    }

    // I tried to load the map with this function first, but it was not loaded.
    //ionViewDidLoad() {
    //  this.loadMap();
    //}

    loadMap() {
      console.log('Hello');

      var map = new Map({
        layers: [
            new TileLayer({ 
                source: new OSM()
            })],
        target: document.getElementById('map'),
        view: new View({
          center: [0, 0],
          zoom: 3
        })
      });
      map.updateSize(); //Tried to apply the same function used in web
    }
}

应用程序和网络的差异：

Answer 1

好像是设备问题。如果我尝试在移动设备、模拟器或物理设备中打开类似 this 的 OL 在线示例，也会出现同样的问题。

使用 Ionic 的低质量 OL 地图

OL map with low quality using Ionic

mobile

openlayers

ionic-framework

angular