Suite

Affichage de la mesure du segment actuel dans le widget de mesure de l'API ArcGIS pour JavaScript ?

Affichage de la mesure du segment actuel dans le widget de mesure de l'API ArcGIS pour JavaScript ?


Dans cet exemple de widget de mesure ESRI : https://developers.arcgis.com/javascript/jssamples/widget_measurement.html lorsque vous dessinez une ligne, il affiche dynamiquement la longueur du segment. Et, lorsque vous mesurez la longueur des segments suivants, il l'ajoute à la longueur précédente.

Comment puis-je ajouter un autre résultat qui affiche dynamiquement la longueur actuelle du segment ?


Comme indiqué dans la référence de l'API, le widget de mesure ne rend pas les écouteurs d'événement disponibles pour le placement de nœuds individuels. cela étant dit, notre nouveau geometryEngine peut vous aider à faire des calculs comme celui-ci entièrement du côté client.

J'ai pu créer un échantillon simple dans lequel j'écoute à la fois le "clic" et le "déplacement de la souris" de la carte et crée de nouvelles polylignes représentant dynamiquement le dernier segment dessiné et calcule sa longueur.


Le crédit devrait aller à @John-Gravois mais j'avais besoin d'une solution légèrement plus réutilisable. Voici donc le code pour étendre l'outil de mesure d'esri et afficher à la fois la longueur du segment précédent et celui en cours de dessin.

Démo

La source

define([ "dojo/_base/declare", "dojo/_base/lang", "dojo/dom-construct", "dojo/number", "esri/dijit/Measurement", "esri/geometry/Polyline", " esri/geometry/geometryEngine" ], function ( declare, lang, domConstruct, Number, esriMeasurement, Polyline, GeometryEngine, Units ) { return declare([esriMeasurement], { // description : // étend l'outil de mesure d'esri pour ajouter le dernier segment et propriétés du segment actuel //stocker notre tableau de points lorsque l'utilisateur clique sur arrMeasurePoints : [], //définissez cette valeur sur false si vous ne souhaitez pas afficher la distance lorsque la souris se déplace. mouseMoveMeasure : true, //div pour afficher les résultats du dernier segment mesuré resultMouseSegmentDiv: null, //div pour afficher la longueur actuelle du segment lorsque la souris se déplace postCreate: function () { console.log('app.Measurement::postCreate', arguments); this.inherited(arguments) ; // accrochez-vous à l'événement click de la carte this.map.on('click', lang.hitch(this, this.calcDistance)); //accrochez-vous pour effacer les points sur le tracé fin this.own(this.on( "changement d'outil e", lang.hitch(this, function () { this.arrMeasurePoints = []; this.resultSegmentDiv.innerHTML = " "; if (this.resultMouseSegmentDiv) this.resultMouseSegmentDiv.innerHTML = " "; }))); this.own(this.on("mesure-fin", lang.hitch(this, function () { this.arrMeasurePoints = []; }))); if (this.mouseMoveMeasure) { this.own(this.map.on('mouse-move', lang.hitch(this, this.calcMouseDistance))); } //ajout d'un nouveau div pour contenir la longueur de notre segment de souris if (this.mouseMoveMeasure) this.resultMouseSegmentDiv = domConstruct.create('div', { 'class': 'esriMeasurementResultSegment', innerHTML: ' ' }, this.resultValueContainer. domNode); //ajout d'un nouveau div pour contenir la longueur de notre segment this.resultSegmentDiv = domConstruct.create('div', { 'class': 'esriMeasurementResultSegment', innerHTML: ' ' }, this.resultValueContainer.domNode); }, calcDistance: function (evt) { try { // nous allons seulement le faire pour la distance si (!this.activeTool || this.activeTool.toString().toLowerCase() !== 'distance') return false ; this.arrMeasurePoints.push(evt.mapPoint); // si nous en avons plus de deux, créez une ligne et mesurez-les if (this.arrMeasurePoints.length < 2) return false; var length = this._createAndMeasureLine(this.arrMeasurePoints[this.arrMeasurePoints.length - 2], this.arrMeasurePoints[this.arrMeasurePoints.length - 1]); this._displaySegmentResult(length); renvoie vrai ; } catch (e) { return false; } }, calcMouseDistance: function (evt) { // si nous avons un point avec lequel travailler, nous pouvons continuer à essayer { // nous ne le ferons que pour la distance si (! this.activeTool || this.activeTool.toString( ).toLowerCase() !== 'distance') return false; if (this.arrMeasurePoints.length < 1) renvoie faux ; var length = this._createAndMeasureLine(this.arrMeasurePoints[this.arrMeasurePoints.length - 1], evt.mapPoint); this._displayMouseSegmentResult(length); renvoie vrai ; } catch (e) { return false; } }, _displaySegmentResult : function (length) { //formater le nombre. length = this._formatNumberForDisplay(length); this.resultSegmentDiv.innerHTML = "Longueur du dernier segment : " + longueur + " " + this.getUnit(); }, _displayMouseSegmentResult : function (length) { //formater le nombre. length = this._formatNumberForDisplay(length); this.resultMouseSegmentDiv.innerHTML = "Longueur du segment : " + longueur + " " + this.getUnit(); }, _formatNumberForDisplay : function (num) { return Number.format(num, { pattern : this.numberPattern + "0" }); }, _createAndMeasureLine: function(point1, point2) { var line = new Polyline(this.map.spatialReference); //utiliser les deux derniers points line.addPath([point1, point2]); // maintenant utiliser le moteur de géométrie pour mesurer sa longueur // est-ce WGS-84 ou Web Mercator Auxiliary Sphere ? Si c'est le cas, utilisez geodesic //geodesicLength(geometry, unit) var unit = this.getUnit(); if (!unit) unit = 'kilomètres'; unit = unit.toLowerCase().replace(", '-'); var length; if (this.map.spatialReference.isWebMercator()) { length = GeometryEngine.geodesicLength(line, unit); } else { length = GeometryEngine .planarLength(ligne, unité); } longueur de retour; } }); });

Voir la vidéo: POWER BI - CRÉER UN SEGMENT AVEC DES MESURES Choix dynamique entre des mesures dans un segment #5