[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