#1 Sun 28 July 2013 14:51
- araking
- Participant actif
- Date d'inscription: 8 Jul 2013
- Messages: 83
[openlayers] mesure distance
Bonjour,
J'essaye d'ajouter une fonctionalité qui calcule une distance entre 2 pts quand j'ajoute mon code à la fonction init() rien en se passe alors dehors de init() il me renvoie une erreur map is undfined
Code:
measureControl = new OpenLayers.Control.Measure(
OpenLayers.Handler.Path,
{
immediate: true,
persist: true
}
);
var lastMeasure = 0.0;
function measurementToolActivated() {
lastMeasure = 0.0;
}
function handleFinalMeasurement(event) {
var units = event.units;
var measure = event.measure;
var out = "measure: " + measure.toFixed(3) + " " + units;
if (lastMeasure > 0) {
out += " last segment: " + (measure-lastMeasure).toFixed(3) + " " + units;
}
lastMeasure = 0.0;
$('#Message').html(out);
}
function handlePartialMeasurement(event) {
var units = event.units;
var measure = event.measure;
var out = "measure: " + measure.toFixed(3) + " " + units;
if (lastMeasure > 0) {
out += " last segment: " + (measure-lastMeasure).toFixed(3) + " " + units;
}
lastMeasure = measure;
$('#Message').html(out);
}
map.addControl(measureControl);
measureControl.events.on({
"measure": handleFinalMeasurement,
"measurepartial": handlePartialMeasurement,
"activate": measurementToolActivated
});Hors ligne
#2 Sun 28 July 2013 19:09
- araking
- Participant actif
- Date d'inscription: 8 Jul 2013
- Messages: 83
Re: [openlayers] mesure distance
pas de réponse 
?
Hors ligne
#3 Tue 30 July 2013 14:11
- gallab
- Participant occasionnel
- Lieu: Marseille
- Date d'inscription: 28 May 2010
- Messages: 19
Re: [openlayers] mesure distance
Bonjour,
D'après le code j'en déduit :
1) Qu'il vous faut un élément ayant pour id 'Message' dans le code HTML qui reçoit la valeur retourné par : $('#Message').html(out);
2) qu'il vous faut (probablement) rajouter un lien vers la bibliothèque jQuery pour prendre en compte le sélecteur $
sinon pr "map is undefined" => si vous placez le code suivant en dehors de la procédure d'init() de la carte,
l'objet map n'étant pas encore instancié il ne sera pas référencé et vous ne pourrait pas lui appliquer la méthode addControl.
Code:
map.addControl(measureControl);
de plus il me semble qu'il vous faudrait activer le controle, sinon ça marche pas :
measureControl.activate();
voilà mon code :
http://jsfiddle.net/NKPR4/
Gallien
Hors ligne
#4 Wed 31 July 2013 16:15
- araking
- Participant actif
- Date d'inscription: 8 Jul 2013
- Messages: 83
Re: [openlayers] mesure distance
Bonjour merci pour ces excellentes réponses j'ai testé votre code et il fonctionne bien mais je voudrais faire un chekbox qui me permet de naviguer ou claculer des distances ou des surfaces dans la partie init () j'ai écrit
Code:
var option = {
displayUnits: 'km',
handlerOptions: {
immediate:true,
persist: false
}
};
var circleOptions = {
displayUnits: 'km',
handlerOptions: {
sides: 35,
immediate:true,
persist: false
}
};
measureControls = {
line: new OpenLayers.Control.Measure(
OpenLayers.Handler.Path, option
),
polygon: new OpenLayers.Control.Measure(
OpenLayers.Handler.Polygon, option
),
circle: new OpenLayers.Control.Measure(
OpenLayers.Handler.RegularPolygon, circleOptions
)
};
var control;
for(var key in measureControls) {
control = measureControls[key];
control.onMeasure = handleMeasurements;
map.addControl(control);
}
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
document.getElementById('noneToggle').checked = true;en dehors
Code:
function handleMeasurements(geometry, length, area, units) {
var element = document.getElementById('output');
var out = "";
if(geometry.CLASS_NAME == "OpenLayers.Geometry.LineString") {
out += "length: " + length.toFixed(3) + " " + units;
} else {
out += "perimeter: " + length.toFixed(3) + " " + units + "<br />";
out += "area: " + area.toFixed(3) + " " + units + "<sup>2</" + "sup>";
}
element.innerHTML = out;
}
function toggleControl(element) {
for(key in measureControls) {
var control = measureControls[key];
if(element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}pour la partie html
Code:
<p id="shortdesc">
Demonstrates the measure control to measure distances and areas.
</p>
<div id="map" class="smallmap">
<p id="Message">test</p>
</div>
<div id="options">
<div id="output">
</div>
<ul id="controlToggle">
<li>
<input type="radio" name="type" value="none" id="noneToggle"
onclick="toggleControl(this);" checked="checked" />
<label for="noneToggle">navigate</label>
</li>
<li>
<input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
<label for="lineToggle">draw line</label>
</li>
<li>
<input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
<label for="polygonToggle">draw polygon</label>
</li>
<li>
<input type="radio" name="type" value="circle" id="circleToggle" onclick="toggleControl(this);" />
<label for="circleToggle">draw circle</label>
</li>
</ul>
</div>firebug ne retourne aucune erreur mais le problème qu'aucune mésure ne s'affiche
Dernière modification par araking (Wed 31 July 2013 16:17)
Hors ligne
