Daha çox

OpenLayers-3.6.0 və Extjs-6.0 ilə yeni 'GeoExt.panel.Map' necə müəyyənləşdirilir?


İstifadə edirəmOpenLayrs-3.6.0Extjs-6.0. GeoMap Panel sinfini belə müəyyənləşdirmək istəyirəm. Başqa sözlə, yenidən yazmaq istəyirəmGeoExt.panel.MapingeoExt-2kitabxana. bunun üçün bir sinfi aşağıdakı kimi təyin edirəm:

Ext.define ('MyApp2.view.geo.Map', {extension: 'Ext.panel.Panel', tələb edir: [], xtype: 'geoMap', layout: 'fit', map: null, initComponent: function ( ) {var me = this; var html = ''; mm = me.map; me.callParent (arqumentlər); Ext.apply (me, {html: html}); me.map = new ol.Map ({target : 'myId', təbəqələr: [new ol.layer.Tile ({title: "Global Imagery", source: new ol.source.TileWMS ({url: 'http: // localhost: 8080 / geoserver / world / wms?) service = WMS ', parametrlər: {LAYERS:' world: worldRaster ', VERSION:' 1.1.1 '}})}),], view: new ol.View ({projection:' EPSG: 4326 ', center: [ 35, 41], zoom: 4})});},});

Strategiya bir panel yaratmaq və html-i aşağıdakılarla qurmaqdır:. Sonra birol.mapnümunəsini təyin edin və hədəfini: "xəritə"(html panelindəki div" id ").

Bu həll nəticə vermir, Necə edim?

və ya

Kimsə daha yaxşı bir həll yolu bilir?


ExtL JS 6 ilə OpenLayers 3 istifadə etmək istəyirsinizsə, https://github.com/KaiVolland/geoext3 saytına baxmalısınız. Təxminən iki həftə ərzində https://github.com/geoext/geoext3 ilə birləşdiriləcək.

GeoExt 3-ün özünü istifadə etmək istəməsəniz də, bəzi kodlarını istifadə edə bilərsinizGeoExt.panel.MapGeoExt.panel.MapController.

Ən maraqlı hissə nəzarətçi içindəki onResize metodu ola bilər:

onResize: function () {// Denetleyicinin (mapPanel) uyğun görünüşünü əldə edin. var mapPanel = this.getView (); əgər (! mapPanel.mapRendered) {mapPanel.getMap (). setTarget (mapPanel.getTargetEl (). dom); mapPanel.mapRendered = true; } başqa {mapPanel.getMap (). updateSize (); }}

Ext 4.2-də Panelin içərisindəki Konteynerdən istifadə edirəm: initComponent-ə əlavə edilmişdir:

th.items = [Ext.create ('Ext.Component', {initComponent: function () {var me = this; th.mapContainerId = me.id;
me.on ("boxready", function () {th.initMap ();}); me.on ("yenidən boyutlandır", function () {if (th.mapInst) {th.mapInst.updateSize ();}}); me.callParent (mübahisələr); }})];

ciPaneldir vəmənKonteynerdir. Xəritəni əvvəlcədən işə salmağı üstün tutdubir dəfəKonteyner olduqdahazırdırxəritə ölçüsünü yeniləyinXarici Konteyner olduqdaölçüsü dəyişdirildi