Commencer avec ArcGIS JavaScript - Afficher la position du curseur

Egge-Jan_Pollé

<\/HEAD>

<\/A>événement pointer-move<\/H2>

<\/P>

Dans un

exercice précédent <\/A>nous avons créé une application web avec une carte de base néerlandaise<\/A>. projetée dans le système de coordonnées néerlandais, le système RD.<\/P>

<\/P>

L'objectif<\/STRONG> de l'exercice ici est de suivre le mouvement de la souris et d'afficher les coordonnées de la position du curseur à l'écran.<\/P><\/P>Nous faisons cela en configurant un gestionnaire d'

événement pointer-move <\/A> sur la MapView<\/A> et en lisant les coordonnées X et Y que nous recevons.<\/P>

<\/P>

dojo\/dom<\/H2><\/P>Dans cette application, nous utilisons le module dojo\/dom<\/A> de la , function(Map, Point, MapView, dom) {

var map = new Map({
basemap: {
portalItem: {
id: "7aea6fa913a94176a1074edb40690318" // Carte de base d'Esri Nederland : Topo RD
}
}
});

var rdOrigin = new Point({
x: 155000,
y: 463000,
spatialReference: 28992
});

var view = new MapView({
spatialReference: 28992,
container: "viewDiv",
map: map,
center: rdOrigin,
zoom: 3
});

// Ajoutez la div avec les coordonnées à l'écran de la carte
view.ui.add("coordinates", "bottom-left");

// Remplissez initialement les coordonnées du centre de la carte, arrondies au millimètre près
// et formatées avec des séparateurs pour les décimales et les milliers
dom.byId("rdxcoord".innerHTML = "X = " + view.center.x.toLocaleString(undefined,< spanclass = " punctuationtoken " > {minimumFractionDigits:< spanclass = " numbertoken " >3< / span >< spanclass = " punctuationtoken " > ,maximumFractionDigits:< spanclass = " numbertoken " >3< / span >< spanclass = " punctuationtoken " >})< / span > +< spanclass = " stringtoken " > " m "< / span >< spanclass = " punctuationtoken " > ;< / span >
tabdom.< / span >< spantokenfunctionbyId >< spanclass = " stringtoken " > "rdycoord"< / span >< spanclass = " punctuationtoken " >( )< / span >< spanclass = " punctuationtoken " >.< / span >innerHTML < spanclass = " operatortoken " >=< / span >< spanclass = " stringtoken " > "Y = "< / span >< spanclass = " operatortoken " >+< / span > view.< / span >center.< / span >y.< / span >< spantokenfunctiontoLocaleString >< spanclass = " punctuationtoken " >(undefined,< spanclass = " punctuationtoken " > {minimumFractionDigits:< spanclass = " numbertoken " >3< / span >< spanclass = " punctuationtoken " > ,maximumFractionDigits:< spanclass = " numbertoken " >3< / span >< spanclass = " punctuationtoken " >})< / span >< spanclass = " operatortoken ">+< / span >< spantokenstringm >< spantokensemicolon >< br />

function showCoordinates(evt) {
var point = view.toMap({x: evt.x, y: evt.y});
// Affichez les coordonnées RD si cela est pertinent
// Le système RD néerlandais est uniquement valable pour le territoire néerlandais, donc si le curseur s'éloigne trop des Pays-Bas,
// alors les coordonnées RD sont « Non applicable ». Les valeurs limites suivantes s'appliquent aux coordonnées X et Y :
if (point.x < 10000 || point.x > 290000 || point.y < 300000 || point.y > 620000) {
dom.byId("rdxcoord").innerHTML = "X = Non applicable";
dom.byId("rdycoord").innerHTML = "Y = Non applicable";
} else {
dom.byId("rdxcoord").innerHTML = "X = " + point.x.toLocaleString(undefined, {minimumFractionDigits: 3, maximumFractionDigits: 3}) + " m";
dom.byId("rdycoord").innerHTML class="punctuation token">(<\/SPAN>"rdycoord"<\/SPAN>)<\/SPAN>.<\/SPAN>innerHTML =<\/SPAN> "Y = "<\/SPAN> +<\/SPAN> point.<\/SPAN>y.<\/SPAN>toLocaleString<\/SPAN>(<\/SPAN>undefined,<\/SPAN> {<\/SPAN>minimumFractionDigits:<\/SPAN> 3<\/SPAN>,<\/SPAN> maximumFractionDigits:<\/SPAN> 3<\/SPAN>}<\/SPAN>)<\/SPAN> +<\/SPAN> " m"<\/SPAN>;<\/SPAN>
}<\/SPAN>
}<\/SPAN>

view.<\/SPAN>when<\/SPAN>(<\/SPAN>function<\/SPAN>(<\/SPAN>)<\/SPAN>{<\/SPAN>
// Écouter - après le chargement de la carte - les mouvements de la souris pour capturer les coordonnées<\/SPAN>
view.<\/SPAN>on<\/SPAN>(<\/Span>"pointer-move"<\/span>, showCoordinates)<\/span>;<\/span>
}<\/span>)<\/span>;<\/span>

}<\/span>)<\/span>;<\/span>
<\/<\/span>script<\/span>><\/span><\/span><\/span>
<\/<\/span>head<\/span>><\/span><\/span>
<<\/span>body<\/span>><\/span><\/span>
<<\/span>div<\/span> id<\/span>=<\/span>"<\/