Ionic v4 & OpenLayers v5.3
我正在尝试将 OL 地图作为组件生成，但唯一加载的是图标。似乎样式和 JS 配置没有正确加载，但我不知道为什么。我能够在主页面配置文件（home.page.ts）中注入函数生成地图，但地图质量低且模糊。
在尝试解决此问题时，我发现有些人建议将地图加载为组件，所以我来了。我上次使用 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>
主页.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>
由于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);
}
}
主页.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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句