Question

Ionic v4和OpenLayers v5.3

我正在尝试将OL映射生成为组件，但是唯一加载的是图标。样式和JS配置似乎无法正确加载，但是我不知道为什么。我能够生成将功能注入主页配置文件（home.page.ts）内的地图，但是地图的质量低且模糊。

在尝试解决此问题时，我发现有人建议将地图作为Component加载，所以我在这里。上次使用Ionic时，他刚刚切换到了版本3，因此我有些生疏，可能会丢失一些东西。

open-layers.component.ts代码：

import { Component, OnInit, ElementRef, ViewChild, Renderer } from '@angular/core';
import { Map } from 'ol';
import { OSM } from 'ol/source.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';

@Component({
  selector: 'app-open-layers',
  templateUrl: './open-layers.component.html',
  styleUrls: ['./open-layers.component.scss'],
})

export class OpenLayersComponent implements OnInit {
    @ViewChild('mapRef') mapRef: ElementRef;

    constructor() {}

    ngOnInit() {

        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
            })
        });
    }
}

在open-layers.component.html内部：

<div #mapRef id="map" class="map"></div>

home.page.html：

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <app-open-layers></app-open-layers>
</ion-content>

Answer 1

感谢robinyo links，我得以将地图作为一个组件生成。我需要更改的是：

在代码的开头将地图变量定义为OL Map类，并将地图加载到ngOnInit（）中。这还会加载在上一示例中未加载的样式按钮。我仍然需要更新地图的大小才能显示给他。移动设备中的模糊屏幕似乎是设备问题，如果我尝试打开OL在线示例页面，它也会模糊。

openlayers.component.ts

import { Component, OnInit, 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 View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';

@Component({
  selector: 'app-openlayers',
  templateUrl: './openlayers.component.html',
  styleUrls: ['./openlayers.component.scss'],
})

export class OpenlayersComponent implements OnInit {

    map: Map;

    constructor() { }

    ngOnInit() {
        this.map = new Map({
          layers: [
            new TileLayer({ 
                source: new OSM()
            })],
          target: document.getElementById('map'),
          view: new View({
            center: [0, 0],
            zoom: 3
          })
        });

        setTimeout(() => {
          this.map.updateSize();
        }, 500);
    }
}

home.page.html

<ion-header>
    <ion-toolbar>
        <ion-title>
            Ionic Blank
        </ion-title>
    </ion-toolbar>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
    <style>html, body { margin: 0; }</style>
</ion-header>

<ion-content>
    <app-openlayers></app-openlayers>
</ion-content>

openlayers.component.html

<div id="map" class="map"></div>

在Ionic中将OpenLayers映射生成为组件

1 个答案: