离子框架 – Ionic 2 Beta和Open Layers 3没有加载地图

发布时间：2020-12-17 17:01:26 所属栏目：安全来源：网络整理

导读：我尝试使用新离子2创建一个使用Open Layers 3的测试项目,但它不起作用这是我的布局： ion-navbar *navbar button menuToggle ion-icon name="menu"/ion-icon /button ion-titleMappa/ion-title/ion-navbarion-content padding class="map-page" div id="map

我尝试使用新离子2创建一个使用Open Layers 3的测试项目,但它不起作用

这是我的布局：

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

    }

}

我还在我的应用程序中导入了这个库：

<!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的旧项目中,此代码正在运行.有什么建议吗？

谢谢.

解决方法

灵感来自@Thierry Templier的回答我发布了关于此的完整解决方案：

在index.html上导入标头

<script src="http://openlayers.org/en/v3.14.2/build/ol.js"></script>

手动或通过CLI创建新的自定义组件,这是我的情况：

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() 
              })
            ],zoom: 10
            })
          });





 }
}

请记住声明这个以使用OpenLayer库：

declare var ol: any;

然后为自定义组件创建模板或直接在@Component语句中实现该模板,并使用#something与@ViewChild一起使用：

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

最后,您可以在页面中使用自定义组件,请记住将其导入页面！

import {Page,NavController} from 'ionic-angular';
import {Query,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>

而已.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!