Mehr

Wie definieren Sie neue 'GeoExt.panel.Map' mit OpenLayers-3.6.0 und Extjs-6.0?

Wie definieren Sie neue 'GeoExt.panel.Map' mit OpenLayers-3.6.0 und Extjs-6.0?


Ich benutzeOpenLayrs-3.6.0undExtjs-6.0. Ich möchte die GeoMap Panel-Klasse wie folgt definieren. Mit anderen Worten, ich möchte umschreibenGeoExt.panel.MapIngeoExt-2Bibliothek. dazu definiere ich eine Klasse wie folgt:

Ext.define('MyApp2.view.geo.Map', { extend: 'Ext.panel.Panel', erfordert: [ ], xtype: 'geoMap', layout: 'fit', map: null, initComponent: function( ) { var me = this; var html = ''; mm = me.map; me.callParent(argumente); Ext.apply(me, {html: html}); me.map = new ol.Map({ target : 'myId', Ebenen: [ new ol.layer.Tile({ title: "Global Imagery", source: new ol.source.TileWMS({ url: 'http://localhost:8080/geoserver/world/wms? service=WMS', params: {LAYERS: 'world:worldRaster', VERSION: '1.1.1'} }) }), ], view: new ol.View({ Projektion: 'EPSG:4326', center: [ 35, 41], Zoom: 4 }) }); }, });

Die Strategie besteht darin, ein Panel zu erstellen und seinen HTML-Code festzulegen mit:. Ich erstelle dann aol.map-Instanz und setzen Sie ihr Ziel mit: "Karte"(die "id" von div im HTML-Panel).

Diese Lösung funktioniert nicht, Wie mache ich?

oder

Kennt jemand eine bessere Lösung?


Wer OpenLayers 3 mit Ext JS 6 nutzen möchte, sollte einen Blick auf https://github.com/KaiVolland/geoext3 werfen. Es wird in etwa zwei Wochen in https://github.com/geoext/geoext3 zusammengeführt.

Auch wenn Sie GeoExt 3 selbst nicht verwenden möchten, können Sie etwas Code desGeoExt.panel.MapundGeoExt.panel.MapController.

Der interessanteste Teil könnte die onResize-Methode im Controller sein:

onResize: function(){ // Holen Sie sich die entsprechende Ansicht des Controllers (das mapPanel). var mapPanel = this.getView(); if(!mapPanel.mapRendered){ mapPanel.getMap().setTarget(mapPanel.getTargetEl().dom); mapPanel.mapRendered = true; aufrechtzuerhalten. Sonst { mapPanel.getMap().updateSize(); } }

in Ext 4.2 verwende ich Container innerhalb von Panel: in initComponent hinzugefügt:

th.items = [ Ext.create('Ext.Component', { initComponent: function () { var me = this; th.mapContainerId = me.id;
me.on("boxready", function() { th.initMap(); }); me.on("resize", function() { if (th.mapInst) { th.mapInst.updateSize(); } }); me.callParent(Argumente); } }) ];

NSist Panel, undmichist Container. Es zog es vor, die Karteninstanz zu initialisierenEinmalwenn Container istbereitundKartengröße aktualisierenwenn der AußenbehälterGröße geändert