<%-- Created by IntelliJ IDEA. User: sbortman Date: Jun 25, 2010 Time: 8:21:58 PM To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" %> CSTARS Footprint Viewer <%-- --%> var map, vectors, formats, select; function updateFormats() { var in_options = { 'internalProjection': map.baseLayer.projection, 'externalProjection': new OpenLayers.Projection( OpenLayers.Util.getElement( "inproj" ).value ) }; var out_options = { 'internalProjection': map.baseLayer.projection, 'externalProjection': new OpenLayers.Projection( OpenLayers.Util.getElement( "outproj" ).value ) }; var gmlOptions = { featureType: "feature", featureNS: "http://example.com/feature" }; var gmlOptionsIn = OpenLayers.Util.extend( OpenLayers.Util.extend( {}, gmlOptions ), in_options ); var gmlOptionsOut = OpenLayers.Util.extend( OpenLayers.Util.extend( {}, gmlOptions ), out_options ); var kmlOptionsIn = OpenLayers.Util.extend( {extractStyles: true}, in_options ); formats = { 'in': { wkt: new OpenLayers.Format.WKT( in_options ), geojson: new OpenLayers.Format.GeoJSON( in_options ), georss: new OpenLayers.Format.GeoRSS( in_options ), gml2: new OpenLayers.Format.GML.v2( gmlOptionsIn ), gml3: new OpenLayers.Format.GML.v3( gmlOptionsIn ), kml: new OpenLayers.Format.KML( kmlOptionsIn ), atom: new OpenLayers.Format.Atom( in_options ) }, 'out': { wkt: new OpenLayers.Format.WKT( out_options ), geojson: new OpenLayers.Format.GeoJSON( out_options ), georss: new OpenLayers.Format.GeoRSS( out_options ), gml2: new OpenLayers.Format.GML.v2( gmlOptionsOut ), gml3: new OpenLayers.Format.GML.v3( gmlOptionsOut ), kml: new OpenLayers.Format.KML( out_options ), atom: new OpenLayers.Format.Atom( out_options ) } }; } function init() { map = new OpenLayers.Map( 'map' ); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} ); vectors = new OpenLayers.Layer.Vector( "Vector Layer" ); map.addLayers( [wms, vectors] ); map.addControl( new OpenLayers.Control.MousePosition() ); map.addControl( new OpenLayers.Control.EditingToolbar( vectors ) ); map.addControl( new OpenLayers.Control.LayerSwitcher( /*{'div':OpenLayers.Util.getElement('layerswitcher')}*/ ) ); var options = { hover: true, onSelect: serialize }; select = new OpenLayers.Control.SelectFeature( [vectors], options ); map.addControl( select ); select.activate(); updateFormats(); initializeFootprints(); //map.setCenter( new OpenLayers.LonLat( 0, 0 ), 1 ); } function initializeFootprints() { var url = '${createLink( action:"footprints" )}'; var responseObj = new OpenLayers.Ajax.Request( url, { method: 'get', // onSuccess: function( transport ) // { // alert( 'Successful Connection' ); // }, onComplete: function( transport ) { var jsonReader = new OpenLayers.Format.JSON(); var wktReader = new OpenLayers.Format.WKT(); var json = jsonReader.read( transport.responseText ); var footprints = new Array(); if ( json && json.constructor != Array ) { var bounds; for ( x in json ) { var features = json[x]; if ( features ) { if ( features.constructor != Array ) { features = [features]; } //alert( x + ': ' + features.length ); var footprintLayer = new OpenLayers.Layer.Vector( x ); for ( var i = 0; i < features.length; ++i ) { var wkt = wktReader.read( features[i] ); if ( !bounds ) { bounds = wkt.geometry.getBounds(); } else { bounds.extend( wkt.geometry.getBounds() ); } footprintLayer.addFeatures( [wkt] ); } //vectors.addFeatures( [wkt] ); map.addLayer( footprintLayer ); footprints.push( footprintLayer ); } } var options = { hover: true, onSelect: serialize }; footprints.push(vectors); select.deactivate(); select.initialize(footprints, options); select.activate(); map.zoomToExtent( bounds ); } } } ); } function serialize( feature ) { var type = document.getElementById( "formatType" ).value; // second argument for pretty printing (geojson only) var pretty = document.getElementById( "prettyPrint" ).checked; var str = formats['out'][type].write( feature, pretty ); // not a good idea in general, just for this demo str = str.replace( /,/g, ', ' ); document.getElementById( 'output' ).value = str; } function deserialize() { var element = document.getElementById( 'text' ); var type = document.getElementById( "formatType" ).value; var features = formats['in'][type].read( element.value ); var bounds; if ( features ) { if ( features.constructor != Array ) { features = [features]; } for ( var i = 0; i < features.length; ++i ) { if ( !bounds ) { bounds = features[i].geometry.getBounds(); } else { bounds.extend( features[i].geometry.getBounds() ); } } vectors.addFeatures( features ); map.zoomToExtent( bounds ); var plural = (features.length > 1) ? 's' : ''; element.value = features.length + ' feature' + plural + ' added'; } else { element.value = 'Bad input ' + type; } } // preload images (function() { var roots = ["draw_point", "draw_line", "draw_polygon", "pan"]; var onImages = []; var offImages = []; for ( var i = 0; i < roots.length; ++i ) { onImages[i] = new Image(); onImages[i].src = "../theme/default/img/" + roots[i] + "_on.png"; offImages[i] = new Image(); offImages[i].src = "../theme/default/img/" + roots[i] + "_on.png"; } })();
Home

Vector Formats Example

Shows the wide variety of vector formats that open layers supports.

Use the drop-down below to select the input/output format for vector features. New features can be added by using the drawing tools above or by pasting their text representation below.

 
Input Projection:
Output Projection:

Use the tools to the left to draw new polygons, lines, and points. After drawing some new features, hover over a feature to see the serialized version below.