Suite

Comment définir le nouveau 'GeoExt.panel.Map' avec OpenLayers-3.6.0 et Extjs-6.0 ?


j'utiliseOpenLayrs-3.6.0etExtjs-6.0. Je veux définir la classe GeoMap Panel comme ceci. En d'autres termes, je veux réécrireGeoExt.panel.MapdansgeoExt-2une bibliothèque. pour cela, je définis une classe comme suit :

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

La stratégie consiste à créer un panneau et à définir son html avec :. Je crée ensuite uncarte.olinstance et définir sa cible avec : "carte"(le "id" de div dans le panneau html).

Cette solution ne fonctionne pas, Comment fais-je?

ou alors

Quelqu'un connait une meilleure solution ?


Si vous souhaitez utiliser OpenLayers 3 avec Ext JS 6, vous devriez jeter un œil à https://github.com/KaiVolland/geoext3. Il sera fusionné dans https://github.com/geoext/geoext3 dans environ deux semaines.

Même si vous ne voulez pas utiliser GeoExt 3 lui-même, vous pouvez utiliser du code duGeoExt.panel.MapetGeoExt.panel.MapController.

La partie la plus intéressante pourrait être la méthode onResize dans le contrôleur :

onResize : function(){ // Récupère la vue correspondante du contrôleur (le mapPanel). var mapPanel = this.getView(); if(!mapPanel.mapRendered){ mapPanel.getMap().setTarget(mapPanel.getTargetEl().dom); mapPanel.mapRendered = true; } else { mapPanel.getMap().updateSize(); } }

dans l'Ext 4.2, j'utilise Container à l'intérieur du Panel : ajouté dans initComponent :

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

eest le panneau, etmoiest Conteneur. Il a préféré initialiser l'instant de la carteune foislorsque le conteneur estprêtetmettre à jour la taille de la cartelorsque le conteneur extérieur estla taille a changé