イオン2ベータ版とオープンレイヤ3は、私は新しいイオン2で使用するオープンレイヤ3のためのテストプロジェクトを作成しようとしているマップ

をロードしていないが、それはイオン2ベータ版とオープンレイヤ3は、私は新しいイオン2で使用するオープンレイヤ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>

そして、これは私のコントローラです：

<!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>

：私も自分のアプリケーションにこのライブラリをインポートしている

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

    } 

}

ionic 1の古いプロジェクトでは、このコードが動作しています。なにか提案を？

THX。

出典

2016-03-22 Mettek

私はこれについて、完全なソリューションを投稿してください。 html

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

新しいカスタムコンポーネントを手動で作成するか、CLを使用して作成します。私、これは私の場合である。そして、あなたのカスタムコンポーネント用のテンプレートを作成したり、@Component文で直接これを実装し、#somethingを使用

declare var ol: any;

：

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ライブラリを使用する際にこれを宣言することを忘れないでください@ViewChildと一緒に使用する場合：

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

最後にページのカスタムコンポーネントを使用することができます。ページにインポートすることを忘れないでください。

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>

それです。

出典

2016-03-30 06:51:42 Mettek

テンプレートから地図のDOM要素を参照する必要があります。あなたのコンポーネントに

<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" #map class="map"></div> 

</ion-content>

レバレッジ@Query：あなたはこのコードを試みることができる指標で

インポートヘッダ：

@Component({ 
    (...) 
}) 
class MapComponent { 
    constructor(@Query('map') elList: QueryList<ElementRef>) { 
    this.map = elList.first; 

    (...) 

    var projection = ol.proj.get('EPSG:3857'); 

    var map = new ol.Map({ 
     target: this.map.nativeElement, 
     (...) 
    }); 

    (...) 
    } 
}

@Thierry TEMPLIERの答えからインスピレーションを受け

出典

2016-03-22 10:57:00

こんにちは、あなたの答えはThx。私はそれについてlitlebitを働いた。実際、私はあなたの提案に触発されていますが、重要な部分はありません。私は完全な解決策で自分自身に答えます。 – Mettek

こんにちは単純な解決策は、settimeoutを使用してください！

setTimeout(() => { 

      var map = new ol.Map({ 
       layers: [ 
        new ol.layer.Tile({ 
         source: new ol.source.OSM() 
        }) 
       ], 
       target: 'openlayers', 
       controls: ol.control.defaults({ 
        attributionOptions: ({ 
         collapsible: false 
        }) 
       }), 
       view: new ol.View({ 
        center: [0, 0], 
        zoom: 2 
       }) 
      }); 

     }, 500);

出典

2016-09-29 09:28:20 Ludovic

イオン2ベータ版とオープンレイヤ3は、私は新しいイオン2で使用するオープンレイヤ3のためのテストプロジェクトを作成しようとしているマップ

答えて

関連する問題