[Commits] r2536 - in sandbox/cmoullet/ux/Profile: examples lib/GeoExt.ux
commits at geoext.org
commits at geoext.org
Sun Dec 26 15:49:56 CET 2010
Author: cmoullet
Date: 2010-12-26 15:49:56 +0100 (Sun, 26 Dec 2010)
New Revision: 2536
Modified:
sandbox/cmoullet/ux/Profile/examples/profile.html
sandbox/cmoullet/ux/Profile/lib/GeoExt.ux/ProfileAction.js
sandbox/cmoullet/ux/Profile/lib/GeoExt.ux/ProfileBox.js
Log:
Create a profile UX
Modified: sandbox/cmoullet/ux/Profile/examples/profile.html
===================================================================
--- sandbox/cmoullet/ux/Profile/examples/profile.html 2010-12-26 10:32:54 UTC (rev 2535)
+++ sandbox/cmoullet/ux/Profile/examples/profile.html 2010-12-26 14:49:56 UTC (rev 2536)
@@ -19,19 +19,11 @@
<script type="text/javascript" src="../lib/GeoExt.ux/ProfileControl.js"></script>
<script type="text/javascript" src="../lib/GeoExt.ux/ProfileAction.js"></script>
<script type="text/javascript" src="../lib/GeoExt.ux/ProfileBox.js"></script>
- <script type="text/javascript" src="../lib/Raphael/raphael-min.js"></script>
- <script type="text/javascript" src="../lib/Raphael/g.raphael-min.js"></script>
- <script type="text/javascript" src="../lib/Raphael/g.line.js"></script>
<!--[if IE]>
<script language="javascript" type="text/javascript" src="../lib/jquery/excanvas.min.js"></script><![endif]-->
- <!-- BEGIN: load jquery -->
<script language="javascript" type="text/javascript" src="../lib/jquery/jquery-1.4.2.min.js"></script>
-
- <!-- END: load jquery -->
-
- <!-- BEGIN: load jqplot -->
<script language="javascript" type="text/javascript" src="../lib/jquery/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="../lib/jquery/plugins/jqplot.cursor.js"></script>
@@ -40,7 +32,7 @@
<body>
<h1>Toolbar with Profile action</h1>
-<p style="margin-bottom:15px;">This example shows how to use the GeoExt.ux.Profile action in a toolbar</p>
+<p style="margin-bottom:15px;">This example shows how to use the GeoExt.ux.Profile action in a toolbar. Click on the profile button and then digitize a polyline. Finish the polyline with a double-click. A profile should then appear</p>
<p style="margin-bottom:15px;">See <a href="profile.js">profile.js</a> for the source code.</p>
Modified: sandbox/cmoullet/ux/Profile/lib/GeoExt.ux/ProfileAction.js
===================================================================
--- sandbox/cmoullet/ux/Profile/lib/GeoExt.ux/ProfileAction.js 2010-12-26 10:32:54 UTC (rev 2535)
+++ sandbox/cmoullet/ux/Profile/lib/GeoExt.ux/ProfileAction.js 2010-12-26 14:49:56 UTC (rev 2536)
@@ -38,6 +38,8 @@
*/
profileData: null,
+ profileEpsg: null,
+
_profileWindow: null,
_drawControl: null,
@@ -60,6 +62,8 @@
this.map = config.map;
+ this.vector = config.vector;
+
this.samples = config.samples || 200;
config.map.addControl(this._drawControl);
@@ -85,8 +89,9 @@
createProfile: function(event) {
if (this.profileService == 'api.geo.admin.ch') {
+ this.profileEpsg = "EPSG:21781";
var formatter = new OpenLayers.Format.GeoJSON({internalProjection: this.map.getProjectionObject(),
- externalProjection: new OpenLayers.Projection("EPSG:21781")});
+ externalProjection: new OpenLayers.Projection(this.profileEpsg)});
var geometryGeoJSON = formatter.write(event.feature.geometry);
if (!this.profileModels) {
this.profileModels = 'DTM25';
@@ -128,7 +133,12 @@
items: new GeoExt.ux.ProfileBox({
map: this.map,
profileData: this.profileData,
- feature: this._drawControl.digitizedFeature
+ feature: this._drawControl.digitizedFeature,
+ models: this.profileModels.split(','),
+ vector: this.vector,
+ profileEpsg: this.profileEpsg,
+ width: 785,
+ height: 570
})
});
this._profileWindow.on('close', function() {
Modified: sandbox/cmoullet/ux/Profile/lib/GeoExt.ux/ProfileBox.js
===================================================================
--- sandbox/cmoullet/ux/Profile/lib/GeoExt.ux/ProfileBox.js 2010-12-26 10:32:54 UTC (rev 2535)
+++ sandbox/cmoullet/ux/Profile/lib/GeoExt.ux/ProfileBox.js 2010-12-26 14:49:56 UTC (rev 2536)
@@ -14,12 +14,18 @@
*/
map: null,
+ vector: null,
+
feature: null,
+ marker: null,
+
profileData: null,
- profileChart: null,
+ profileEpsg: null,
+ models: null,
+
jqueryDiv: null,
/** private: method[initComponent]
@@ -37,17 +43,12 @@
afterRender : function() {
this.addClass('geoext-ux-profilebox');
- //this.innerEl = this.el.createChild({
- // cls : 'geoext-ux-profilebox-inner'
- //});
+ this.jqueryDiv = new Ext.Element(document.createElement('div'));
+ this.jqueryDiv.setWidth(this.width);
+ this.jqueryDiv.setHeight(this.height);
- this.jqueryDiv = new Ext.Element(document.createElement('div'));
- this.jqueryDiv.setWidth(this.ownerCt.getWidth() - 15);
- this.jqueryDiv.setHeight(this.ownerCt.getHeight() - 30);
this.el.appendChild(this.jqueryDiv);
- //this.profileCanvas = Raphael(this.innerEl.dom, this.ownerCt.getWidth() - 14, this.ownerCt.getHeight() - 18);
-
this.on('resize', this.handleResize, this);
this.drawProfile();
@@ -57,85 +58,131 @@
// private
handleResize : function(me, newWidth, newHeight) {
- //this.profileCanvas.setSize(newWidth - 14, newHeight - 18);
+ //TODO
},
+ destroy: function() {
+ this.deleteMarker();
+ GeoExt.ux.ProfileBox.superclass.destroy.apply(this, arguments);
+ },
+
+ drawMarker: function(easting, northing, epsg) {
+ var point = new OpenLayers.Geometry.Point(easting, northing);
+ var pointProj = new OpenLayers.Projection.transform(
+ point,
+ new OpenLayers.Projection(this.profileEpsg),
+ this.map.getProjectionObject()
+ );
+
+ this.deleteMarker();
+ this.marker = new OpenLayers.Feature.Vector(pointProj);
+ this.vector.addFeatures([this.marker]);
+ },
+
+ deleteMarker: function() {
+ if (this.marker) {
+ this.marker.destroy();
+ }
+ },
+
drawProfile: function() {
- //this.profileChart = this.profileCanvas.g.linechart(40, 30, this.getWidth() - 55, this.getHeight() - 70, this.profileData[0], this.profileData[3], {axis: "0 0 1 1", shade: true, axisystep: 5, axisxstep: 10});
$.jqplot.config.enablePlugins = true;
- var jQueryData = [this.profileData[3].length];
var maxX = 0;
var maxY = 0;
- for (var i = 0; i < this.profileData[3].length; i++) {
- jQueryData[i] = [this.profileData[0][i], this.profileData[3][i]];
- if (maxX < this.profileData[0][i]) {
- maxX = this.profileData[0][i];
+ var jQueryArray = [];
+ var seriesArray = [];
+ for (var i = 0; i < this.profileData.length - 3; i++) {
+ var jQueryData = [this.profileData[0].length];
+ for (var j = 0; j < this.profileData[0].length; j++) {
+ jQueryData[j] = [this.profileData[0][j], this.profileData[i + 3][j]];
+ if (maxX < this.profileData[0][j]) {
+ maxX = this.profileData[0][j];
+ }
+ if (maxY < this.profileData[i + 3][j]) {
+ maxY = this.profileData[i + 3][j];
+ }
}
- if (maxY < this.profileData[3][i]) {
- maxY = this.profileData[3][i];
- }
+ this.realmaxX = maxX;
+ this.realmaxY = maxY;
+ jQueryArray.push(jQueryData);
+ seriesArray.push({label: this.models[i]});
}
+
if (maxX < 10) {
- maxX = Math.round(maxX + 1);
+ maxX = Math.round(maxX + 0.5);
} else if (maxX < 100) {
- maxX = Math.round((maxX + 10) / 10) * 10;
+ maxX = Math.round((maxX + 5 ) / 10) * 10;
} else if (maxX < 1000) {
- maxX = Math.round((maxX + 100) / 100) * 100;
+ maxX = Math.round((maxX + 50) / 100) * 100;
} else if (maxX < 10000) {
- maxX = Math.round((maxX + 1000) / 1000) * 1000;
+ maxX = Math.round((maxX + 500) / 1000) * 1000;
} else if (maxX < 100000) {
- maxX = Math.round((maxX + 10000) / 10000) * 10000;
+ maxX = Math.round((maxX + 5000) / 10000) * 10000;
}
if (maxY < 10) {
- maxY = Math.round(maxY + 1);
+ maxY = Math.round(maxY + 0.5);
} else if (maxY < 100) {
- maxY = Math.round((maxY + 10) / 10) * 10;
+ maxY = Math.round((maxY + 5) / 10) * 10;
} else if (maxY < 1000) {
- maxY = Math.round((maxY + 100) / 100) * 100;
+ maxY = Math.round((maxY + 50) / 100) * 100;
} else if (maxY < 10000) {
- maxY = Math.round((maxY + 1000) / 1000) * 1000;
+ maxY = Math.round((maxY + 500) / 1000) * 1000;
} else if (maxY < 100000) {
- maxY = Math.round((maxY + 10000) / 10000) * 10000;
+ maxY = Math.round((maxY + 5000) / 10000) * 10000;
}
- var plot1 = $.jqplot(this.jqueryDiv.id, [jQueryData], {
+
+ var plot1 = $.jqplot(this.jqueryDiv.id, jQueryArray, {
seriesDefaults:{neighborThreshold:0, showMarker: false},
- series:[
- {
- label:'Profile DTM25 '
- }
- ],
+ series: seriesArray,
cursor:{
showVerticalLine:true,
showHorizontalLine: true,
showTooltip: true,
followMouse: true,
showTooltipDataPosition:true,
- zoom:true,
intersectionThreshold:6,
tooltipFormatString: '%s <br>Distance: %s<br> Elevation :%s [m]'
},
legend:{
- location:'nw',
- xoffset: 310,
- yoffset: 100
+ show: true,
+ location:'ne',
+ xoffset: 50,
+ yoffset: 15
},
axes:{
xaxis: {
min:0,
- max:Math.round(maxX / 100) * 100,
+ max:maxX,
numberTicks: 11
},
yaxis: {
min:0,
- max: Math.round(maxY / 100) * 100,
+ max: maxY,
numberTicks: 11
}
},
axesDefaults:{tickOptions:{formatString:"%i"}, autoscale:false, useSeriesColor:true}
+ });
+ plot1.profileBox = this;
+ $("#" + this.jqueryDiv.id).bind("jqplotClick", function(ev, gridpos, datapos, neighbor, plot) {
+ if (plot.profileBox.realmaxX > datapos.xaxis) {
+ // Get the position
+ for (var i = 0; i < plot.profileBox.profileData[0].length; i++) {
+ if (datapos.xaxis < plot.profileBox.profileData[0][i]) {
+ var easting = plot.profileBox.profileData[1][i];
+ var northing = plot.profileBox.profileData[2][i];
+ plot.profileBox.drawMarker(easting, northing);
+ break;
+ } else {
+ plot.profileBox.deleteMarker();
+ }
+ }
+
+ }
});
}
});
More information about the Commits
mailing list