[Webflysuesk-commits] r50 - in webflysuesk/branches/openlayers-integration: . webflys/src/main/webapp/images webflys/src/main/webapp/pages
scm-commit@wald.intevation.org
scm-commit at wald.intevation.org
Wed Apr 8 12:59:23 CEST 2009
Author: iweinzierl
Date: 2009-04-08 12:59:21 +0200 (Wed, 08 Apr 2009)
New Revision: 50
Added:
webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/images/flag_blue.png
webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/pages/DrawMarker.js
webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/pages/InteractiveRangeSelection.js
webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/pages/Range.js
Modified:
webflysuesk/branches/openlayers-integration/ChangeLog.txt
webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/pages/karte.js
webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/pages/main.jsp
Log:
New feature: calculation range can be selected interactively by clicking on the map.
Modified: webflysuesk/branches/openlayers-integration/ChangeLog.txt
===================================================================
--- webflysuesk/branches/openlayers-integration/ChangeLog.txt 2009-04-06 15:40:12 UTC (rev 49)
+++ webflysuesk/branches/openlayers-integration/ChangeLog.txt 2009-04-08 10:59:21 UTC (rev 50)
@@ -1,3 +1,20 @@
+2009-04-08 Ingo Weinzierl <ingo.weinzierl at intevation.de>
+
+ * webflys/src/main/webapp/pages/main.jsp: JavaScript lib included.
+ From and To textfields have now an styleId attribute which is rendered to
+ an id tag in html.
+
+ * webflys/src/main/webapp/pages/karte.js: A function call to add the feature
+ to select the calculation range interactivly by mouseclick.
+
+ * webflys/src/main/webapp/pages/InteractiveRangeSelection.js: Tool to select
+ start and end of the calculation range by clicking in the map.
+
+ * webflys/src/main/webapp/pages/Range.js: Object to store value pairs.
+
+ * webflys/src/main/webapp/pages/DrawMarker.js: OpenLayers.Control element to
+ start the InteractiveRangeSelection tool.
+
2009-04-06 Ingo Weinzierl <ingo.weinzierl at intevation.de>
* webflys/src/main/webapp/pages/karte.js: Global and old RGDs will be
Added: webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/images/flag_blue.png
===================================================================
(Binary files differ)
Property changes on: webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/images/flag_blue.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/pages/DrawMarker.js
===================================================================
--- webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/pages/DrawMarker.js 2009-04-06 15:40:12 UTC (rev 49)
+++ webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/pages/DrawMarker.js 2009-04-08 10:59:21 UTC (rev 50)
@@ -0,0 +1,133 @@
+/**
+ * @requires OpenLayers/Control.js
+ */
+
+/**
+ * Class: DrawMarker
+ * The DrawMarker lets the user add Markers to the map.
+ *
+ * Inherits from:
+ * - <OpenLayers.Control>
+ */
+DrawMarker = OpenLayers.Class(OpenLayers.Control, {
+
+ /**
+ * Property: map
+ * {<OpenLayers.map>}
+ */
+ map: null,
+
+ /**
+ * Property: layer
+ * {<OpenLayers.Layers.Markers>}
+ */
+ layer: null,
+
+ /**
+ * Property: size
+ * {Double}
+ */
+ size: new OpenLayers.Size(20,20),
+
+ /**
+ * Property: offset
+ * {<OpenLayers.Pixel>}
+ */
+ offset: null,
+
+ /**
+ * Property: url
+ * {String}
+ */
+ url: '../images/flag_blue.png',
+
+ /**
+ * Property: icon
+ * {<OpenLayer.Icon>}
+ */
+ icon: null,
+
+ /**
+ * Constant: EVENT_TYPES
+ *
+ * Supported event types:
+ * markeradded - Triggered when a marker is added
+ */
+ EVENT_TYPES: ['markeradded'],
+
+ /**
+ * Property: markerAdded
+ * {Function} Called after each marker is added
+ */
+ markerAdded: function() {},
+
+
+ /**
+ * Constructor: DrawMarker
+ *
+ * Parameters:
+ * layer - {<OpenLayers.Layer.Markers>} The layer where the markers are
+ * added to.
+ * options - Options
+ */
+ initialize: function(layer, options) {
+ this.map = layer.map;
+ this.layer = layer;
+ this.offset = new OpenLayers.Pixel(-(this.size.w/2), -this.size.h);
+ this.icon = new OpenLayers.Icon(this.url, this.size, this.offset);
+ this.maxCount = options.maxCount;
+
+ // events
+ this.EVENT_TYPES = DrawMarker.prototype.EVENT_TYPES.concat(
+ OpenLayers.Control.prototype.EVENT_TYPES);
+
+ OpenLayers.Control.prototype.initialize.apply(this, [options]);
+ this.callbacks = OpenLayers.Util.extend({
+ done: this.addMarker,
+ });
+
+ // add an event listener when clicking on the map
+ this.layer.map.events.register('click', this, this.onClick);
+ },
+
+
+ /**
+ * Method: addMarker
+ * This method adds a new Marker, with the parameters configured when
+ * creating this class object, to the map. When the Marker was added the
+ * function markerAdded(marker) is called. If maxCount is reached, the first
+ * marker will be removed.
+ *
+ * Parameters:
+ * marker - {<OpenLayers.LonLat>}
+ */
+ addMarker: function(lonlat) {
+
+ if(this.layer.markers.length == this.maxCount) {
+ this.layer.removeMarker(this.layer.markers[0]);
+ }
+
+ var marker = new OpenLayers.Marker(lonlat, this.icon.clone());
+
+ // add a new Marker to the layer
+ this.layer.addMarker(marker);
+
+ // call markerAdded function now
+ this.markerAdded(marker);
+
+ },
+
+ /**
+ * Method onClick
+ *
+ * Parameters:
+ * e - Event
+ */
+ onClick: function(e) {
+ // TODO Check if this tool is activated
+ var lonlat = map.getLonLatFromPixel(e.xy);
+ this.addMarker(lonlat);
+ },
+
+ CLASS_NAME: "DrawMarker"
+});
Added: webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/pages/InteractiveRangeSelection.js
===================================================================
--- webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/pages/InteractiveRangeSelection.js 2009-04-06 15:40:12 UTC (rev 49)
+++ webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/pages/InteractiveRangeSelection.js 2009-04-08 10:59:21 UTC (rev 50)
@@ -0,0 +1,214 @@
+/** Tool */
+var tool = null;
+
+/** Layer to store markers */
+var markerLayer = null;
+
+/** buffer for boundingbox in meter*/
+var buffer = 50;
+
+/** object to store km information */
+var range;
+
+/**
+ * Method: initInteraktiveStreckenauswahl
+ * Method to initialize the InteraktiveStreckenauwahl
+ */
+function initInteraktiveStreckenauswahl() {
+
+ // create a new Range object to store information about km and marker
+ range = new Range(2);
+
+ markerLayer = new OpenLayers.Layer.Markers("Markers");
+ map.addLayer(markerLayer);
+
+ var options = {
+ title: "Interaktive Streckenauswahl",
+ handlerOptions: { freehand: false, multi: false },
+ maxCount: 2
+ //displayClass: 'olControlDrawMarker'
+ };
+
+ tool = new DrawMarker(markerLayer, options);
+ tool.markerAdded = changeMarkerPosition;
+
+ // add the new tool to the toolpanel
+ panel.addControls([tool]);
+}
+
+
+/**
+ * Method: changeMarkerPosition
+ */
+function changeMarkerPosition(marker) {
+ var feature = getNextFeatureFromLonLat(marker.lonlat);
+ if(feature == null) {
+ markerLayer.removeMarker(marker);
+ alert('Es konnte kein passender Kilometer gefunden werden.');
+ return;
+ }
+
+ var lonlat =
+ new OpenLayers.LonLat(feature.attributes.x, feature.attributes.y);
+
+ // change marker position, set it to the km feature
+ positionMarker(marker, lonlat);
+
+ // add marker and kilometer to the range object to store its information
+ range.addStation(marker, feature.attributes.km);
+
+ // change the range in the attribute panel
+ changeRange(range);
+}
+
+
+/**
+ * Method: positionMarker
+ */
+function positionMarker(marker, lonlat) {
+
+ markerLayer.removeMarker(marker);
+
+ marker.lonlat = lonlat;
+ markerLayer.addMarker(marker);
+}
+
+
+/**
+ * Method: getNextFeatureFromLonLat
+ * Fetch next Feature from LonLat.
+ *
+ * Parameters:
+ * lonlat - {<OpenLayers.LonLat>}
+ *
+ * Returns:
+ * {<OpenLayers.Feature>} Nearest feature of the point.
+ */
+function getNextFeatureFromLonLat(lonlat) {
+
+ // fetch features within a boundingbox specified by the clickpoint
+ var bounds = createBBoxFromPoint(lonlat);
+ var features = fetchFeaturesInBBox(bounds);
+
+ // take the nearest feature
+ var feat = null;
+ var dist = 999999;
+
+ for(var i = 0 ; i < features.length ; i++) {
+ var x = features[i].attributes.x - lonlat.lon;
+ var y = features[i].attributes.y - lonlat.lat;
+ if(x < 0)
+ x = x * -1;
+ if(y < 0)
+ y = y * -1;
+
+ var d = Math.sqrt( x << 2 + y << 2);
+
+ if(d < dist) {
+ dist = d;
+ feat = features[i];
+ }
+ }
+
+ // return the nearest feature
+ return feat;
+}
+
+
+/**
+ * Method: fetchFeaturesInBBox
+ * Fetch all features within a BoundingBox.
+ *
+ * Parameters:
+ * bbox - {<OpenLayers.Bounds>} BoundingBox
+ *
+ * Returns:
+ * {Array<OpenLayers.Feature>} Array of features.
+ */
+function fetchFeaturesInBBox(bbox) {
+ var features = new Array();
+
+ var filterHead =
+ '<?xml version="1.0" encoding="ISO-8859-1"?>' +
+ '<wfs:GetFeature xmlns:ogc="http://www.opengis.net/ogc" ' +
+ 'xmlns:gml="http://www.opengis.net/gml" ' +
+ 'xmlns:wfs="http://www.opengis.net/wfs" service="WFS" version="1.0.0"'+
+ ' maxFeatures="100" outputFormat="GML2"><wfs:Query ' +
+ 'typeName="kilometrierung">';
+ var filterFoot = '</wfs:Query></wfs:GetFeature>';
+ var filterBody;
+
+ var filter_1_0 = new OpenLayers.Format.Filter({ version: "1.0.0" });
+ var xmlFormat = new OpenLayers.Format.XML();
+ var filters = new Array();
+
+ var filter_bbox = new OpenLayers.Filter.Spatial({
+ type : OpenLayers.Filter.Spatial.BBOX,
+ value : bbox
+ });
+
+ filterBody = xmlFormat.write(filter_1_0.write(filter_bbox));
+
+ var finalfilter = filterHead+filterBody+filterFoot;
+ var req = new OpenLayers.Request.POST({
+ method : 'POST',
+ url : 'http://beige.rgb:8080/geoserver/wfs',
+ async : false,
+ data : finalfilter,
+ callback: function(response){
+ features = new OpenLayers.Format.GML().read(response.responseText);
+ }
+ });
+
+ return features;
+}
+
+
+/**
+ * Method: createBBoxFromPoint
+ *
+ * Parameters:
+ * lonlat - {<OpenLayers.LonLat>} LonLat from clickpoint
+ *
+ * Returns:
+ * {<OpenLayers.Bounds>} BoundingBox with the clickpoint as center.
+ */
+function createBBoxFromPoint(lonlat) {
+ var minx = lonlat.lon - buffer;
+ var miny = lonlat.lat - buffer;
+ var maxx = lonlat.lon + buffer;
+ var maxy = lonlat.lat + buffer;
+
+ return new OpenLayers.Bounds(minx, miny, maxx, maxy);
+}
+
+
+/**
+ * Method: changeRange
+ * Changes the content of the range fields 'from' and 'to' in the parameter
+ * panel.
+ *
+ * Parameters:
+ * range - {Range} Range object to store the two value pairs marker and
+ * information.
+ */
+function changeRange(range) {
+
+ var low = range.lowestKm();
+ var high = range.highestKm();
+
+ if(range.count == 2) {
+ $j('#from').val(low);
+ $j('#to').val(high);
+ }
+ else if(range.count == 1) {
+ var from = $j('#from').val();
+ var to = $j('#to').val();
+
+ if(low < from)
+ $j('#from').val(low);
+ else
+ $j('#to').val(low);
+ }
+}
+// vim:set ts=4 sw=4 si et sta sts=4 fenc=utf8:
Added: webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/pages/Range.js
===================================================================
--- webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/pages/Range.js 2009-04-06 15:40:12 UTC (rev 49)
+++ webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/pages/Range.js 2009-04-08 10:59:21 UTC (rev 50)
@@ -0,0 +1,116 @@
+/**
+ * Class: Range
+ * The Range class stores information about two stations of the map.
+ * Every station has its own feature, kilometer value and marker. The idea of
+ * this class is to hold the information about kilometer and markers synchron.
+ */
+function Range(size) {
+
+ /**
+ * Property: kms
+ * {Array<Double>} Array to store information about kilometer values.
+ */
+ this.kms = new Array();
+
+ /**
+ * Property: markers
+ * {Array<OpenLayers.Marker>} Array to store the markers.
+ */
+ this.markers = new Array();
+
+ /**
+ * Property: count
+ * {Number} Elements stored in this object.
+ */
+ this.count = 0;
+
+ /**
+ * Property: maxsize
+ * {Number} Max size of elements which this object may store.
+ */
+ this.maxsize = size;
+
+}
+
+
+/**
+ * Method: addStation
+ * This method adds a new station to the object. If the maximum element
+ * count is reached, and a new element is tried to add, the first element
+ * will be removed.
+ *
+ * Parameters:
+ * marker - {OpenLayers.Marker} Marker on the map
+ * km - {Double} Kilometer value of this marker
+ */
+Range.prototype.addStation = function(marker, km) {
+
+ // the max elements are reached, so we have to remove the first one
+ if(this.count == this.maxsize) {
+ this.markers.shift();
+ this.kms.shift();
+ this.count--;
+ }
+
+ this.markers.push(marker);
+ this.kms.push(km);
+
+ this.count++;
+}
+
+
+/**
+ * Method: getLowestKm
+ * This method returns the lowest kilometer in this object.
+ *
+ * Returns:
+ * -1 if there are no elements, else {Double} kilometer value.
+ */
+Range.prototype.lowestKm = function() {
+
+ var km = 0;
+
+ for(var i = 0; i < this.count ; i++) {
+ if(km == 0)
+ km = this.kms[i];
+
+ if(this.kms[i] < km)
+ km = this.kms[i];
+ }
+
+ return km;
+}
+
+
+/**
+ * Method: getHighestKm
+ * This method returns the highest kilometer in this object.
+ *
+ * Returns:
+ * -1 if there are no elements, else {Double} kilometer value.
+ */
+Range.prototype.highestKm = function() {
+
+ var km = 0;
+
+ for(var i = 0; i < this.count ; i++) {
+ if(this.kms[i] > km)
+ km = this.kms[i];
+ }
+
+ return km;
+}
+
+
+/**
+ * Method: clearStations
+ * This method removes all markers and its kilometer information.
+ */
+Range.prototype.clearStations = function() {
+ for(var i = 0; i < this.count ; i++) {
+ this.markers.shift();
+ this.kms.shift();
+ }
+
+ this.count = 0;
+}
Modified: webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/pages/karte.js
===================================================================
--- webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/pages/karte.js 2009-04-06 15:40:12 UTC (rev 49)
+++ webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/pages/karte.js 2009-04-08 10:59:21 UTC (rev 50)
@@ -10,6 +10,9 @@
/** assoziative array for result layer */
var usk_layer = null;
+/** Control panel */
+var panel = null;
+
/**
* Method: createMapForRiver
* Fetch the BoundingBox of a river in the ServletContext from Servlet and
@@ -35,6 +38,9 @@
// add RGD functionality to the map
addRGDFeature();
+
+ // add Start/End-Feature
+ initInteraktiveStreckenauswahl();
});
}
});
@@ -128,14 +134,13 @@
featureNS: 'http://www.openplays.org/topp',
extractAttributes: false,
commitReport: function(str) {
- OpenLayers.Console.log(str);
storage.removeFeatures(storage.features);
}
}
);
// creating the tool panel
- var panel = new OpenLayers.Control.Panel({
+ panel = new OpenLayers.Control.Panel({
displayClass: "olControlEditingToolbar"
});
Modified: webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/pages/main.jsp
===================================================================
--- webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/pages/main.jsp 2009-04-06 15:40:12 UTC (rev 49)
+++ webflysuesk/branches/openlayers-integration/webflys/src/main/webapp/pages/main.jsp 2009-04-08 10:59:21 UTC (rev 50)
@@ -39,7 +39,10 @@
<%-- including needed js libs --%>
<script src="OpenLayers/OpenLayers.js"></script>
<script src="JQuery/jquery-1.3.2.js"></script>
+ <script src="DrawMarker.js"></script>
<script src="karte.js"></script>
+ <script src="Range.js"></script>
+ <script src="InteractiveRangeSelection.js"></script>
<%-- this snippet is needed to avoid conflicts between OpenLayers and jQuery --%>
<script type="text/javascript">
@@ -146,9 +149,9 @@
<%-- TODO: <label for="id"> would be fine here but I cannot see
how to match the 'id' attributes with Struts --%>
<bean:message key="main.range.from" />
- <html:text property="from" size="5" />
+ <html:text property="from" size="5" styleId="from" />
<bean:message key="main.range.to" />
- <html:text property="to" size="5" />
+ <html:text property="to" size="5" styleId="to" />
</fieldset>
<fieldset id="menu">
<legend><bean:message key="main.diff.dlegend"/></legend>
More information about the Webflysuesk-commits
mailing list