# HG changeset patch # User Tim Englich # Date 1275396924 0 # Node ID a0e6566cd11142604f50eb7287f4092c6ecf30f2 # Parent d91ffd0e82396d0270b6131f62f66fbe9f7403e9 Integrated Openlayers using ext and geoext into the GNV-WebClient gnv/trunk@1139 c6561f87-3c4e-4783-a992-168aeb5c3f6f diff -r d91ffd0e8239 -r a0e6566cd111 gnv/ChangeLog --- a/gnv/ChangeLog Thu May 27 16:51:52 2010 +0000 +++ b/gnv/ChangeLog Tue Jun 01 12:55:24 2010 +0000 @@ -1,3 +1,51 @@ +2010-06-01 Tim Englich + + Integrated the Openlayers-libraray according to the Intevation-Demonstrator + into the GUI. Now it is also possible to see all layers which are put into + the WMS by the user. + + * src/main/webapp/WEB-INF/jsp/wmslayout.jsp: + Removed the old JavaScript-references to the OpenLayers-Library and + put the references to the JavaScript-Files and CSS-files for + OpenLayers, ext and geoext into it. + + * src/main/webapp/WEB-INF/jsp/index.jsp: + Removed the html-elements which are required to render the MapClient and + put them into the file includes/display_map_inc.jsp. + + * src/main/webapp/WEB-INF/jsp/includes/display_map_inc.jsp: + Added own include-file for all html-elements which are required to render + the Mapclient. + + * src/main/webapp/scripts/viewport.jsp: + Added a JSP-file which creats an JavaScript-file which includes the + informations how to create the GUI of the WMS-Client.A JSP-file is required + because we have to insert dynamic usespecific Data into the file. + + * src/main/webapp/scripts/layers.jsp: + Added a JSP-file which creats an JavaScript-file which includes all + layers which should be displayed by OpenLayers. A JSP-file is required + because we have to insert dynamic usespecific Data into the file. + + * src/main/webapp/scripts/openlayers: + Folder for storing the JavaScript-Library Openlayers. + * src/main/webapp/scripts/openlayers/readme: + Readme-File which explains which steps must be done to provide the + required Version of the Openlayers-Library. + + * src/main/webapp/scripts/geoext/: + Folder for storing the JavaScript-Library geoext. + * src/main/webapp/scripts/geoext/readme: + Readme-File which explains which steps must be done to provide the + required Version of the GeoExt-Library. + + * src/main/webapp/scripts/ext/: + Folder for storing the JavaScript-Library Ext. + * src/main/webapp/scripts/ext/readme: + Readme-File which explains which steps must be done to provide the + required Version of the Ext-Library. + + 2010-05-27 Ingo Weinzierl Issue198 diff -r d91ffd0e8239 -r a0e6566cd111 gnv/src/main/webapp/WEB-INF/jsp/includes/display_map_inc.jsp --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/gnv/src/main/webapp/WEB-INF/jsp/includes/display_map_inc.jsp Tue Jun 01 12:55:24 2010 +0000 @@ -0,0 +1,2 @@ +
+
\ No newline at end of file diff -r d91ffd0e8239 -r a0e6566cd111 gnv/src/main/webapp/WEB-INF/jsp/index.jsp --- a/gnv/src/main/webapp/WEB-INF/jsp/index.jsp Thu May 27 16:51:52 2010 +0000 +++ b/gnv/src/main/webapp/WEB-INF/jsp/index.jsp Tue Jun 01 12:55:24 2010 +0000 @@ -14,15 +14,10 @@ Object chart = request.getAttribute("chart"); Object statistic = request.getAttribute("statistic"); Object histogram = request.getAttribute("histogram"); - Object wms = request.getAttribute("wms"); Object wms_published = request.getAttribute("wms_published"); - String serverPath = (String) request.getAttribute("mapserver"); - String mapfilePath = (String) request.getAttribute("mapfile"); - String layerName = (String) request.getAttribute("layer"); - String timeToLive = (String) request.getAttribute("ttl"); boolean furthertargets = true; - if (chart == null && statistic == null && histogram == null && wms == null) { + if (chart == null && statistic == null && histogram == null && wms_published == null) { boolean supportChart = sm.getOutputMode("chart") != null; if (supportChart) { chart = "true"; @@ -128,7 +123,7 @@ <%}%> <%-- render wms options --%> - <%if (wms != null) {%> + <%if (wms_published != null) {%> <%}%> @@ -161,25 +156,7 @@ <%-- render wms layer --%> <%if (wms_published != null) {%> -
-
- - - - - - - - - - - - - -
:<%=serverPath%>?SERVICE=WMS&REQUEST=GetCapabilities
:<%=layerName%>
:<%=timeToLive%>
-
-
-
+ <%}%> diff -r d91ffd0e8239 -r a0e6566cd111 gnv/src/main/webapp/WEB-INF/jsp/wmslayout.jsp --- a/gnv/src/main/webapp/WEB-INF/jsp/wmslayout.jsp Thu May 27 16:51:52 2010 +0000 +++ b/gnv/src/main/webapp/WEB-INF/jsp/wmslayout.jsp Tue Jun 01 12:55:24 2010 +0000 @@ -1,13 +1,15 @@ +<%@page import="de.intevation.gnv.action.sessionmodel.SessionModel"%> +<%@page import="de.intevation.gnv.action.sessionmodel.SessionModelFactory"%> <%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean" %> <% String serverPath = (String) request.getAttribute("mapserver"); String mapfilePath = (String) request.getAttribute("mapfile"); String layerName = (String) request.getAttribute("layer"); String timeToLive = (String) request.getAttribute("ttl"); + SessionModel sm = SessionModelFactory.getInstance().getSessionModel(request); %> - @@ -20,65 +22,28 @@ <meta http-equiv="pragma" content="no-cache"/> <meta http-equiv="cache-control" content="no-cache"/> <meta name="robots" content="noindex"/> + + <link rel="stylesheet" type="text/css" href="scripts/ext/ext-2.3.0/resources/css/ext-all.css"></link> + <link rel="stylesheet" type="text/css" href="scripts/geoext/geoext-0.6/resources/css/geoext-all.css"></link> + <link rel="stylesheet" type="text/css" href="scripts/openlayers/OpenLayers-2.9/theme/default/style.css"></link> <link href="styles/gnv.css" rel="stylesheet" type="text/css"/> - <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script> - <script type="text/javascript"> - var lon = 5; - var lat = 55; - var zoom = 5; - var map, layer; - - function init() { - <%if(request.getAttribute("wms_published") != null){ %> - map = new OpenLayers.Map('map'); - var server = '<%=serverPath%>'; - var back1 = new OpenLayers.Layer.WMS( - "Background1", - "http://gdisrv.bsh.de/arcgis/services/Background/Background/MapServer/WMSServer?", - { - layers: '0', - format: 'image/png', - transparent: false - }, - { - isBaseLayer: 'true', - singleTile: 'true' - } - ); - - layer = new OpenLayers.Layer.WMS( - "MyWMS", - server, - { - layers: '<%=layerName%>', - format: 'image/png', - transparent: 'true' - }, - { - singleTile: 'true' - } - ); - - map.addLayers([back1, layer]); - map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); - <%}%> - } - - function toggle(element) { - var ele = document.getElementById(element); - var vis = ele.style.visibility; - if (vis != "visible") { - ele.style.visibility = "visible"; - } - else { - ele.style.visibility = "hidden"; - } - } - - </script> + + <script type="text/javascript" src="scripts/ext/ext-2.3.0/adapter/ext/ext-base.js"></script> + <script type="text/javascript" src="scripts/ext/ext-2.3.0/ext-all.js"></script> + <script type="text/javascript" src="scripts/openlayers/OpenLayers-2.9/OpenLayers.js"></script> + <script type="text/javascript" src="scripts/geoext/geoext-0.6/script/GeoExt.js"></script> + <script type="text/javascript" src="<%=response.encodeURL("scripts/layers.jsp?uid="+System.currentTimeMillis())%>"></script> + <script type="text/javascript" src="<%=response.encodeURL("scripts/viewport.jsp?uid="+System.currentTimeMillis())%>"></script> + + <!-- save necessary variables here --> + <script type="text/javascript"> + var options, layer, extent, map, mapPanel, infoControls; + var controls,layers, mouseLoc, grid; + var infoActive = false; + </script> </head> - <body id="gnviewerbody" onLoad="init()"> + <body id="gnviewerbody"> <div id="overlay"></div> <div style="width:100%;left:0;top:0;width:100%;height:100%;position:absolute;visibility:hidden;"> <div id="overlayContent"> @@ -94,7 +59,7 @@ <div id="contentElement" class="contentElement"> <jsp:include page="index.jsp" /> </div> - <br> + <br/> <div id="footerElement"> <jsp:include page="footer.jsp" /> </div> diff -r d91ffd0e8239 -r a0e6566cd111 gnv/src/main/webapp/scripts/ext/readme --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/gnv/src/main/webapp/scripts/ext/readme Tue Jun 01 12:55:24 2010 +0000 @@ -0,0 +1,3 @@ +curl "http://www.extjs.com/deploy/ext-2.3.0.zip" > ext-2.3.0.zip +unzip ext-2.3.0.zip +rm ext-2.3.0.zip \ No newline at end of file diff -r d91ffd0e8239 -r a0e6566cd111 gnv/src/main/webapp/scripts/geoext/readme --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/gnv/src/main/webapp/scripts/geoext/readme Tue Jun 01 12:55:24 2010 +0000 @@ -0,0 +1,4 @@ +curl "http://trac.geoext.org/attachment/wiki/Download/GeoExt-release-0.6.zip?format=raw" > GeoExt-release-0.6.zip +unzip GeoExt-release-0.6.zip +mv GeoExt geoext-0.6 +rm GeoExt-release-0.6.zip \ No newline at end of file diff -r d91ffd0e8239 -r a0e6566cd111 gnv/src/main/webapp/scripts/layers.jsp --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/gnv/src/main/webapp/scripts/layers.jsp Tue Jun 01 12:55:24 2010 +0000 @@ -0,0 +1,60 @@ + +<%@page import="java.util.Iterator"%> +<%@page import="de.intevation.gnv.artifactdatabase.objects.map.Layer"%> +<%@page import="de.intevation.gnv.artifactdatabase.objects.map.MapService"%> +<%@page import="de.intevation.gnv.action.sessionmodel.SessionModelFactory"%> +<%@page import="de.intevation.gnv.action.sessionmodel.SessionModel"%>/** + * This function is called while initializing the application. You are allowed + * to change/add/remove layers. But be are of the comments inline this code! + */ +function initLayers() { + /** + * XXX This application needs a layer that is stored in a variable called + * 'layer'. So do not change the name of this variable. Just change the WMS + * layer itself. + */ + layer = new OpenLayers.Layer.WMS.Untiled( + "Background1", + "http://gdisrv.bsh.de/arcgis/services/Background/Background/MapServer/WMSServer?", + { + layers: '0', + format: 'image/png', + transparent: false + }, + { + isBaseLayer: true + } + + ); + /** + * XXX This application needs an ARRAY that stores some layers (or a single + * layer). Do not change the name of the following variable 'layers'. + */ + layers = []; + layers[0] = layer; + + <% + SessionModel sm = SessionModelFactory.getInstance().getSessionModel(request); + MapService localMapService = sm.getLocalMapService(); + Iterator<Layer> it = localMapService.getLayer().iterator(); + int i = 1; + while (it.hasNext()){ + Layer layer = it.next(); + %> + layer<%=i%> = new OpenLayers.Layer.WMS.Untiled( + "<%=layer.getID() %>", + "<%=localMapService.getURL() %>", + { + layers: '<%=layer.getName()%>', + format: 'image/png', + transparent: true + }, + { + isBaseLayer: false + } + + ); + layers[<%=i%>] = layer<%=i++%>; + <%}%> + +} diff -r d91ffd0e8239 -r a0e6566cd111 gnv/src/main/webapp/scripts/openlayers/readme --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/gnv/src/main/webapp/scripts/openlayers/readme Tue Jun 01 12:55:24 2010 +0000 @@ -0,0 +1,3 @@ +curl "http://www.openlayers.org/download/OpenLayers-2.9.zip" > OpenLayers.zip +unzip OpenLayers.zip +rm OpenLayers.zip \ No newline at end of file diff -r d91ffd0e8239 -r a0e6566cd111 gnv/src/main/webapp/scripts/viewport.jsp --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/gnv/src/main/webapp/scripts/viewport.jsp Tue Jun 01 12:55:24 2010 +0000 @@ -0,0 +1,233 @@ +OpenLayers.ProxyHost= "/cgi-bin/proxy.cgi?url="; +Ext.BLANK_IMAGE_URL = "scripts/openlayers/OpenLayers-2.9/theme/default/img/blank.gif"; + +/** + * XXX + * Change specific attributes for map, wfs-t, etc here. Do not change these + * settings inline the code! + */ +PROJECTION = "EPSG:4326"; +PROJECTIONS = [PROJECTION, 'EPSG:4326'] // Projection used in projection selector +MAX_EXTENT = new OpenLayers.Bounds(-17.44,29.41,40.04,77.66); +INITIAL_CENTER = new OpenLayers.LonLat(5, 55); + +Ext.onReady(function() { + + /* this function call initialized the layers that are defined by the user. + * The variable 'layer' and 'layers' are initialized in this function as + * well, that are used in the following code! So do not remove this function + * call. + */ + initLayers(); + + var options = { + maxExtent: MAX_EXTENT, + projection: PROJECTION, + zoom: 5, + controls: [], + units: 'm' + }; + + +/* ------------------------ Create map and add controls ---------------------*/ + // create map + map = new OpenLayers.Map(options); + map.displayProjection = new OpenLayers.Projection(PROJECTION); + + // add controls + + + var nav = new OpenLayers.Control.NavigationHistory(); + map.addControl(nav); + + panel = new OpenLayers.Control.Panel(); + controls = { + previous: nav.previous, + next : nav.next, + navigate: new OpenLayers.Control.MouseDefaults( + { + displayClass: 'olControlPan', + title:'Verschieben der Karte' + } + ), + zoombox: new OpenLayers.Control.ZoomBox( + { + displayClass: 'olControlZoomBox', + title: 'Zum Zoomen ziehen Sie eine Box auf, indem Sie klicken und ziehen' + } + ), + info : new OpenLayers.Control.WMSGetFeatureInfo({ + displayClass: "olControlFeatureInfo", + url: 'http://fluggs.wupperverband.de/wmsconnector/com.esri.wms.Esrimap/WV_WMS', + title: 'Identify features by clicking', + queryVisible: true, + eventListeners: { + getfeatureinfo: function(event) { + mapPanel.map.addPopup(new OpenLayers.Popup.FramedCloud( + "chicken", + mapPanel.map.getLonLatFromPixel(event.xy), + null, + event.text, + null, + true + )); + } + } + }) + }; + + for (var key in controls) { + panel.addControls([controls[key]]); + } + + map.addControl(panel); + map.addControl(new OpenLayers.Control.PanZoomBar({zoomWorldIcon: 'true'})); + map.addControl(new OpenLayers.Control.MouseDefaults()); + map.addControl(new OpenLayers.Control.ScaleLine()); + // Displaying the mouse postion + mousePosition = new OpenLayers.Control.MousePosition(); + map.addControl(mousePosition); + +/* --------------------------------------------------------------------------- */ + + // Scale Chooser + var scaleStore = new GeoExt.data.ScaleStore({map: map}); + var zoomSelector = new Ext.form.ComboBox({ + store: scaleStore, + emptyText: "Zoom Level", + tpl: '<tpl for="."><div class="x-combo-list-item">1 : {[parseInt(values.scale)]}</div></tpl>', + editable: false, + triggerAction: 'all', // needed so that the combo box doesn't filter by its current content + mode: 'local' // keep the combo box from forcing a lot of unneeded data refreshes + }); + + zoomSelector.on('select', + function(combo, record, index) { + map.zoomTo(record.data.level); + }, + this + ); + + map.events.register('zoomend', this, function() { + var scale = scaleStore.queryBy(function(record){ + return this.map.getZoom() == record.data.level; + }); + + if (scale.length > 0) { + scale = scale.items[0]; + zoomSelector.setValue("1 : " + parseInt(scale.data.scale)); + } else { + if (!zoomSelector.rendered) return; + zoomSelector.clearValue(); + } + }); + + + // create MapPanel + mapPanel = new GeoExt.MapPanel({ + border: true, + title: "Karte mit GeoNames Suche", + region: "center", + map: map, + layers: layers, + bbar: [zoomSelector] + }); + + // map.setCenter(INITIAL_CENTER); + +/* --------------------------- Layer Tree ----------------------------------- */ + + + // LayerTree + var tree = new Ext.tree.TreePanel({ + border: true, + enableDD: true, + region: "east", + title: "LayerTree", + width: 200, + split: true, + collapsible: false, + collapseMode: "mini", + autoScroll: true, + loader: new Ext.tree.TreeLoader({ + applyLoader: false, + }), + root: { + nodeType: "async", + children: [{ + nodeType: "gx_baselayercontainer", + expanded: true + }, { + nodeType: "gx_overlaylayercontainer", + expanded: true, + loader: { + filter: function(record) { + var layer = record.get("layer"); + return layer.displayInLayerSwitcher === true && + layer.isBaseLayer === false; + } + } + }] + }, + rootVisible: false, + lines: false + }); + +/*-------------------------------- Feature grid -------------------------------*/ + + // create legend panel + legendPanel = new GeoExt.LegendPanel({ + id: 'legendpanel', + dynamic: true, + border: true, + title: 'Legende', + collapsible: false, + split: false, + defaults: { + labelCls: 'legend', + style: 'padding: 5px' + }, + bodyStyle: 'padding:5px', + width: 250, + autoScroll: true, + region: 'east' + //layerStore: mapPanel.layers + }); + + +// use separate panels + // Create GUI + + var mylegend = new Ext.Panel( + { + region: "west", + title: '', + split: true, + width: 250, + minSize: 225, + maxSize: 400, + collapsible: false, + overflow: 'auto', + margins: '0 0 0 5', + layout: 'accordion', + layoutConfig: { + animate: true, + activeOnTop: false + }, + items: [ + tree, + legendPanel + ] + } + ); + + // The main panel + new Ext.Panel({ + renderTo: "mapcontainer", + layout: "border", + width: 700, + height: 420, + items: [mapPanel, mylegend] + }); + +});