Dragging is a tiny bit more complex, but the logic is essentially the same. This is totally untested, but maybe it'll get you going in the right direction. I added some inline comments. Give it a whirl.<div><br></div><div>
<div><br></div><div>var firstClickMercator;</div><div>OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { </div><div><span class="Apple-tab-span" style="white-space:pre"> </span>defaultHandlerOptions: {</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>'single': true,</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>'double': false,</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>'pixelTolerance': 0,</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>'stopSingle': false,</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>'stopDouble': false</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>},</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>handleRightClicks:true,</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>initialize: function(options) {</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>this.handlerOptions = OpenLayers.Util.extend(</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>{}, this.defaultHandlerOptions</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>);</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>OpenLayers.Control.prototype.initialize.apply(</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>this, arguments</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>); </div><div><span class="Apple-tab-span" style="white-space:pre"> </span>this.handler = new OpenLayers.Handler.Click(</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>this, {</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>'click': this.singleClick</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>}, this.handlerOptions</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>);</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>}, </div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>singleClick: function(e) {</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>//You want to convert the xy coordinate in the e variable to a LonLat</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var clickLonLat=map.getLonLatFromPixel(e.xy)</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>//Projections confuse the hell out of me. But what I've learned is you probably want to transform to a Mercator projection</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>var clickLonLatMercator=clickLonLat.transform(map.getProjectionObject(),new OpenLayers.Projection("EPSG:4326"));</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>if (!firstClick){</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>//If this is the first store it into a global variable:</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>firstClickMercator=clickLonLatMercator</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>}else{</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>//if the global variable firstClick already exists, calculate the distance in KM</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>var distanceInKM=OpenLayers.Util.distVincenty(firstClickMercator,clickLonLatMercator)</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>//you'll have to output it where you want, this should display the value in the google chrome console:</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>console.log(distanceInKM)</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>//reset the global variable to null.</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>firstClick=null;</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>}</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>},</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div>
<br></div><div>});</div><div><br></div><div><br></div><div>//Define the global map:</div><div>var map = new OpenLayers.Map("map")</div><div><br></div><div>//Add the click control to the map</div><div>var click = new OpenLayers.Control.Click();</div>
<div>map.addControl(click);</div><div>click.activate();</div></div><div><br></div><div><div><br><br><div class="gmail_quote">On Fri, Apr 20, 2012 at 10:41 AM, alexe100 <span dir="ltr"><<a href="mailto:imoveisnacionais@gmail.com">imoveisnacionais@gmail.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">Hi all , i am new here and in GEO* purposes...<br>
I am doing a web based application where i need to show some markers, that<br>
it aldready working.<br>
Now I need to give the oortunity to the user of drag a line on the map and<br>
while dragging see the distance in kms in a label box (html external obj)<br>
I saw already the openlayer example for distance but it has various options<br>
(and that make me confusing because i am a beginner). I did not found a<br>
(very) simple example doing this.<br>
Please, could you tell me how to do this. A littl example would be very<br>
appreciated.<br>
<br>
Thanks a lot<br>
<br>
Alex<br>
<font color="#888888"><br>
--<br>
View this message in context: <a href="http://osgeo-org.1560.n6.nabble.com/Drag-Line-Distance-in-KMs-tp4902194p4902194.html" target="_blank">http://osgeo-org.1560.n6.nabble.com/Drag-Line-Distance-in-KMs-tp4902194p4902194.html</a><br>
Sent from the OpenLayers Users mailing list archive at Nabble.com.<br>
_______________________________________________<br>
Users mailing list<br>
<a href="mailto:Users@lists.osgeo.org">Users@lists.osgeo.org</a><br>
<a href="http://lists.osgeo.org/mailman/listinfo/openlayers-users" target="_blank">http://lists.osgeo.org/mailman/listinfo/openlayers-users</a><br>
</font></blockquote></div><br></div></div>