Sencha ArchitectのOpenLayers4

Question

senchaアーキテクトでopenlayers4マップを追加して使用するにはどうすればよいですか？私はコンテナにopenlayersのマップを追加したいのですが、私は煎茶の建築家でこれをどうやって行うのかわからないので、どんな提案も素晴らしいでしょう！事前に

おかげで、 Joud

Answer 1

を私は先週ArchitectでOpenLayers4を使用し、実際に私は正確にやりました次の点を除いて@pagepを行ったのと同じです： - divを使わないで&のコンポーネントにマップを直接表示しました（I gaコンポーネントid = map）。 - 私はモダンなパッケージを使用していますが、 "レンダリング"イベントはないので、 "塗装済み"イベントを使用しました。

Answer 2

スタートOLガイドhttps://openlayers.org/en/latest/doc/quickstart.html

と私たちはガイドに従って、3件の観光名所する必要があります。

1. をOpenLayersを
2. マップコンテナ
を含めます
3. 簡易地図を作成するためのJavaScript

を含める：プラスボタンの

• をクリックし、選択したリソース、JSリソースを追加

• はは、リモート設定、独自のID、URLを設定し、JSリソースを選択しますtrue

• あなたは、両方のリソースをリモートでロードされ、あなたがSA内でそれらを見る必要があります表示されるはずCSSリソース

のために同じ手順を実行します。 JSファイルをダウンロードすることもできます。それらをあなたのプロジェクトフォルダ内のresourcesフォルダに入れて、URLはresources/myOLm.jsのようになりますが、CSSは同じです。

地図コンテナ：

は、パネルまたはコンテナを追加し、HTMLの設定を選択し、IDとそこでカスタムのdivを追加します。

あなたは、この表示されるはずです。今、私たちはマップのためのJSを実行する必要が

：マップを作成するための

Ext.define('MyApp.view.MyPanel', { 
    extend: 'Ext.panel.Panel', 
    alias: 'widget.mypanel', 

    requires: [ 
     'MyApp.view.MyPanelViewModel' 
    ], 

    viewModel: { 
     type: 'mypanel' 
    }, 
    height: 559, 
    html: ' <div id="map" stlye="width:100%; height:400px"></div>', 
    width: 728, 
    title: 'My Panel' 

}); 

JSを。私たちは、私たちの独自のJSを書くことができる私たちの機能を発火させるいくつかのイベントを使用する必要があります。

レンダーイベントを選択しました。パネルをクリックし、設定ウィンドウで基本的なイベントバインディングを見つけ、レンダリングを選択して追加します。そして、サンプルJSコードを関数に入れます。

あなたのコードは次のようになります。

Ext.define('MyApp.view.MyPanel', { 
    extend: 'Ext.panel.Panel', 
    alias: 'widget.mypanel', 

    requires: [ 
     'MyApp.view.MyPanelViewModel' 
    ], 

    viewModel: { 
     type: 'mypanel' 
    }, 
    height: 559, 
    html: ' <div id="map" stlye="width:100%; height:400px"></div>', 
    width: 728, 
    title: 'My Panel', 
    defaultListenerScope: true, 

    listeners: { 
     render: 'onPanelRender' 
    }, 

    onPanelRender: function(component, eOpts) { 
     var map = new ol.Map({ 
       target: 'map', 
       layers: [ 
        new ol.layer.Tile({ 
        source: new ol.source.OSM() 
        }) 
       ], 
       view: new ol.View({ 
        center: ol.proj.fromLonLat([37.41, 8.82]), 
        zoom: 4 
       }) 
       }); 
    } 

}); 

---

保存し、プロジェクトプレビュー：