Ionic 2 Beta和Open Layers 3没有加载地图 [英] Ionic 2 Beta and Open Layers 3 not loading map
问题描述
我尝试使用新离子2创建一个测试项目以使用Open Layers 3但是它不起作用
I have try to create a test project for use Open Layers 3 with the new ionic 2 but it isn't work
这是我的布局：
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Mappa</ion-title>
</ion-navbar>
<ion-content padding class="map-page">
<div id="map" class="map"></div>
</ion-content>
这是我的控制器：
import {Page} from 'ionic-angular';
@Page({
templateUrl: 'build/pages/map/map-page.html'
})
export class MapPage {
constructor(){
this.test = ["uno", "due", "tre"];
// var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
// var map = new ga.Map({
// target: 'map',
// layers: [layer],
// view: new ol.View({
// resolution: 500,
// center: [670000, 160000]
// })
// });
// this.map = map;
console.log(this.map);
var projection = ol.proj.get('EPSG:3857');
var map = new ol.Map({
target: this.map,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([8.92471, 46.07257], 'EPSG:4326', 'EPSG:3857'),
zoom: 14
})
});
}
}
我也有在我的应用程序中导入了这个库：
I have also imported this library on my application:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<title>Ionic</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<script src="http://openlayers.org/en/v3.14.2/build/ol.js"></script>
<link ios-href="build/css/app.ios.css" rel="stylesheet">
<link md-href="build/css/app.md.css" rel="stylesheet">
<link wp-href="build/css/app.wp.css" rel="stylesheet">
</head>
<body>
<ion-app></ion-app>
<script src="cordova.js"></script>
<script src="build/js/app.bundle.js"></script>
</body>
</html>
在使用离子1的旧项目中，此代码正常运行。有什么建议吗？
In a old project with ionic 1 this code is working. Any suggestion?
THX。
推荐答案
灵感来自@Thierry Templier回答我发布关于此的完整解决方案：
Inspired from @Thierry Templier answer i post the full solution about this:
在index.html上导入标题
Import headers on index.html
<script src="http://openlayers.org/en/v3.14.2/build/ol.js"></script>
手动或通过CLI创建新的自定义组件这是我的理由：
Create a new custom component manually or via CLI this is my case:
import {Component, Input, ViewChild, Renderer, Query, QueryList, ElementRef} from 'angular2/core';
import {IONIC_DIRECTIVES} from 'ionic-angular';
declare var ol: any;
@Component({
selector: 'map-component',
templateUrl: 'build/components/map-component/map-component.html',
directives: [IONIC_DIRECTIVES] // makes all Ionic directives available to your component
})
export class MapComponent {
@ViewChild('map') map;
constructor(public renderer: Renderer) {
}
ngAfterViewInit() {
console.log(this.map);
var projection = ol.proj.get('EPSG:3857');
var map = new ol.Map({
target: "map",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([8.92471, 46.07257], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});
}
}
请记住将此声明用于OpenLayer库：
Remember to declare this for use OpenLayer library:
declare var ol: any;
然后为自定义组件创建模板或直接在@Component语句中实现并使用#something与@ViewChild一起使用：
Then create the template for your custom component or implement that directly in the @Component statement and use #something for use it with @ViewChild:
<div id="map" #map class="map"></div>
现在你可以在页面中使用自定义组件，记得在页面中导入它！
At the end now you can use your custom component in a page, remember to import it in your pages!
import {Page, NavController} from 'ionic-angular';
import {Query, QueryList, Component, ElementRef} from 'angular2/core';
import {MapComponent} from './../../components/map-component/map-component';
/*
Generated class for the MapPagePage page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Page({
templateUrl: 'build/pages/map-page/map-page.html',
directives: [MapComponent]
})
和页面模板文件：
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Map Page</ion-title>
</ion-navbar>
<ion-content padding class="map-page">
<map-component></map-component>
</ion-content>
就是这样。
这篇关于Ionic 2 Beta和Open Layers 3没有加载地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
