[Users] reproject features in a featurestore

Steven M. Ottens steven at minst.net
Tue Jun 16 14:37:54 CEST 2009


Hi all,

In anticipation of the release I decided to try to build a test  
application with GeoExt. So far I managed to get OpenStreetmap- 
MapPanel in a Viewport and a Feature Grid in the 'east' region. I use  
the stock JSON-example which uses 4326-coordinates and OSM uses  
900913. So I need to reproject the features, otherwise they end up  
near Africa.

 From what I understood of FeatureStore.js it doesn't have specific  
support for projection, but I can imagine that OpenLayers reproject  
functions are still accessible, but I can't seem to find them. I've  
configured the vecLayer as being in epsg:4326, but it doesn't do auto- 
reprojection, am I missing something here?

I've modified the Mappanel-Viewport example and the mappanel- 
viewport.js looks like this:

var mapPanel;

Ext.onReady(function() {

     var options, layer;
     var extent = new OpenLayers.Bounds(-5, 35, 15, 55);
     var src = new OpenLayers.Projection('EPSG:4326');
     var dest = new OpenLayers.Projection('EPSG:900913');

         options = {
             projection: new OpenLayers.Projection("EPSG:900913"),
             units: "m",
             numZoomLevels: 19,
             maxResolution: 156543.0339,
             maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
                                              20037508, 20037508.34)
         };

         layer = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
	var vecLayer = new OpenLayers.Layer.Vector("vector",{projection:src});
		
         extent.transform(
             new OpenLayers.Projection("EPSG:4326"), options.projection
         );

     var map = new OpenLayers.Map(options);
	 store = new GeoExt.data.FeatureStore({
         layer: vecLayer,
         fields: [
             {name: 'name', type: 'string'},
             {name: 'elevation', type: 'float'}
         ],
         proxy: new GeoExt.data.ProtocolProxy({
             protocol: new OpenLayers.Protocol.HTTP({
                 url: "summits.json",
                 format: new OpenLayers.Format.GeoJSON()
             })
         }),
         autoLoad: true
     });
  // create grid panel configured with feature store
     gridPanel = new Ext.grid.GridPanel({
         title: "Feature Grid",
         region: "east",
         store: store,
         width: 320,
         columns: [{
             header: "Name",
             width: 200,
             dataIndex: "name"
         }, {
             header: "Elevation",
             width: 100,
             dataIndex: "elevation"
         }]
     });
     new Ext.Viewport({
         layout: "border",
         items: [{
             region: "north",
             contentEl: "title",
             height: 94
         }, {
             region: "center",
             id: "mappanel",
             title: "Map",
             xtype: "gx_mappanel",
             map: map,
             layers: [layer, vecLayer],
             extent: extent,
             split: true
         }, {
             region: "east",
			items: gridPanel,
			width: 320,
             split: true
         }]
     });

     mapPanel = Ext.getCmp("mappanel");
});

And I've added <script src="http://www.openstreetmap.org/openlayers/ 
OpenStreetMap.js"></script> to load OSM.

Any help would be much appreciated,

Steven





More information about the Users mailing list