I'm using OpenLayrs-3.6.0
and Extjs-6.0
. I want to define GeoMap Panel class like this. In other words, I want to rewrite GeoExt.panel.Map
in geoExt-2
library.
for this I define a class as follow:
Ext.define('MyApp2.view.geo.Map', {
extend: 'Ext.panel.Panel',
requires: [
],
xtype: 'geoMap',
layout: 'fit',
map: null,
initComponent: function() {
var me = this;
var html = '<div id="myId" class="MyId" ></div>';
mm = me.map;
me.callParent(arguments);
Ext.apply(me, {html: html});
me.map = new ol.Map({
target: 'myId',
layers: [
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({
projection: 'EPSG:4326',
center: [35, 41],
zoom: 4
})
});
},
});
The strategy is that create a panel and set its html with: <div id="map" class="map"></div>
. I then create a ol.map
instance and set its target with: "map"(the "id" of div in html panel).
This solution does not work, How do I do?
or
Someone knows a better solution?
Best Answer
If you want to use OpenLayers 3 with Ext JS 6 you should have a look at https://github.com/KaiVolland/geoext3. It will be merged into https://github.com/geoext/geoext3 in about two weeks.
Even if you don't want to use GeoExt 3 itself, you could use some code of the
GeoExt.panel.Map
andGeoExt.panel.MapController
.The most interesting part might be the onResize method in the controller: