nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Commencer avec ArcGIS JavaScript - Ajouter un fichier CSV

Egge-Jan_Pollé

<\/HEAD>

<\/A>CSVLayer<\/H2>
<\/P>
Dans cet exercice, nous allons ajouter des objets ponctuels à partir d'un fichier CSV en tant que couche à notre carte web. Pour cela, nous utilisons un petit fichier contenant des informations sur les aéroports aux Pays-Bas (voir ci-dessous).<\/P>
<\/P>
Dans cet exemple, il est également montré comment un
CSVLayer<\/A><\/P>
est reprojeté vers un autre système de référence spatiale. Les coordonnées dans le fichier d'entrée sont en WGS84, tandis que
notre carte de base<\/A> (voir cet exercice<\/A>) est dans le système de projection néerlandais (RD_New<\/STRONG>). Mais attention : pour cette reprojection, vous n'avez rien à faire de plus, car cela est automatiquement géré en interne par le projection engine<\/A> côté client.<\/P>
<\/P>
Le fichier CSV utilisé (
NL_Vliegvelden.csv<\/A>) se trouve ici<\/A> et son contenu est affiché ci-dessous :<\/P>
<\/P>

Aéroport<\/TD>	IATA<\/TD>	Latitude Nord<\/TD>	Longitude Est<\/TD><\/TR>
Amsterdam Airport Schiphol<\/TD>	AMS<\/TD>	52.308333<\/TD>	4.760833<\/TD><\/TR>
Rotterdam The Hague Airport<\/TD>	RTM< \/TD >< TD style = "font-size :11 pt ;color:black ;font-weight :400 ;text-decoration:none ;border :0.5 pt solid white ;background:#ddebf7 none repeat scroll 0% 0% ;text-align:right ;">51.95 < \/ TD >< TD style = "font-size :11 pt ;color:black ;font-weight :400 ;text-decoration:none ;border-color:white currentcolor white white;border-style :solid none solid solid;border-width :0.5 pt medium 0.5 pt 0.5 pt;background:#ddebf7 none repeat scroll 0% 0% ;text-align:right ;">4.433333 < \/ TD >< \/ TR >< TR >< TD style = "font-size :11.0 pt;color:black;font-weight :400;text-decoration:none;border-top :.5 pt solid white;border-right :.5 pt solid white;border-bottom :.5 pt solid white;border-left:none;background:#BDD7EE ;">Groningen Airport Eelde < \/ TD >< TD style = "font-size :11.0 pt;color:black;font-weight :400;text-decoration:none;border:.5 pt solid white;background:#BDD7EE ;">GRQ < \/ TD >< TD style = "font-size :11 pt;color:black;font-weight :400;text-decoration:none;border :0.5 pt solid white;background:#bdd7ee none repeat scroll 0% 0% ;text-align:right ;">53.125 < \/ TD >< TD style = "font-size :11 pt;color:black;font-weight :400;text-decoration:none;border-color:white currentcolor white white;border-style :solid none solid solid;border-width :0.5 pt medium 0.5 pt 0.5 pt;background:#bdd7ee none repeat scroll 0% 0% ;text-align:right ;">6.583333 < \/ TD >< \/ TR >< TR >< TD style = "font-size :11.0 pt;color:black;font-weight :400;text-decoration:none;border-top :.5 pt solid white;border-right :.5 pt solid white;border-bottom :.5 pt solid white;border-left:none;background:#DDEBF7 ;">Eindhoven Airport < \/ TD >< TD style = "font-size :11.0 pt;color:black;font-weight :400;text-decoration:none;border:.5 pt solid white;background:#DDEBF7 ;">EIN < \/ TD >< TD style = "font-size :11 pt;color:black;font-weight :400;text-decoration:none;border :0.5 pt solid white;background:#ddebf7 none repeat scroll 0% 0% ;text-align:right ;">51.450278 < \/ TD >< TD style = "font-size :11 pt;color:black;font-weight :400;text-decoration:none;border-color:white currentcolor white white;border-style :solid none solid solid;border-width :0.5 pt medium 0.5 pt 0.5 pt;background:#ddebf7 none repeat scroll 0% 0% ;text-align:right ;">5.374444 < \/ TD >< \/ TR >< TR >< TD style = "font-size :11.0 pt;color:black;font-weight :400;text-decoration:none;border-top :.5 pt solid white;border-right :.5 pt solid white;border-bottom:none;border-left:none;background:#BDD7EE ;">Maastricht Aachen Airport < \/ TD >< TD style = "font-size :11.0 pt;color:black;font-weight :400;text-decoration:none;border-top :.5 pt solid white;border-right :.5 pt solid white;border-bottom:none;border-left:.5 pt solid white;background:#BDD7EE ;">MST < \/ TD >< TD style = "font-size :11 pt;color:black;font-weight :400;text-decoration:none;border-color:white whites currentcolor;border-style :solid solidsnone;border-width :.05 ptsmedium;background:#bdd7ee nonerepeat scroll % %;text-align:right ;">50,915833 < \/ td > < tdstyle= "fontsize：11 ptxblackxweight：400xdecoration：nonexborder-color：whitexcurrentcolorxcurrentcolorxwhitexborder-style：solidxnonexnonexsolidxborder-width：05 ptxmediumxmediumx05 ptxbackground：#bdd7eenonerepeatscroll00；text-align：right；">5776944

Comme symbole pour nos aéroports, nous utilisons cette image:

Icône d'aéroport

Attention ! Pour accéder au fichier CSV ainsi qu'à l'image PNG, vous devez vous assurer que ces fichiers se trouvent sur le même domaine que le site web (ou qu'ils sont hébergés sur un serveur supportant CORS ou qu'un proxy est configuré...).

Le code source est ci-dessous.

Cliquez ici pour voir l'application en action.

&lt!DOCTYPE html>
&lthtml>
&lthead>
 &ltmeta charset= "utf-8">
 &ltmeta name= "viewport" content= "initial-scale=1,  maximum-scale=<\/SPAN>1, user-scalable=<\/SPAN>no"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN>
<<\/SPAN>title<\/SPAN>><\/SPAN><\/SPAN>Démarrer avec ArcGIS JavaScript - Ajouter un fichier CSV<\/<\/span>title<\/span>><\/span><\/span>
<<\/span>style<\/span>><\/span><\/span>
html, body, #viewDiv<\/span> {<\/span>
padding<\/span>:<\/span> 0;<\/span>
margin<\/span>:<\/span> 0;<\/span>
height<\/span>:<\/span> 100%;<\/span>
width<\/span>:<\/span> 100%;<\/span>
}<\/span>
<\/<\/span>style<\/span>><\/span><\/span><\/span>

<<\/span>link<\/span> rel<\/span>=<\/span>"<\/span>stylesheet"<\/span><\/span> href<\/span>=<\/span>"<\/span>https:\/\/js.arcgis.com\/4.11\/esri\/css\/main.css"<\/span><\/span>><\/span><\/span>
<<\/span>script<\/span> src<\/span>=<\/span>"<\/span>https:\/\/js.arcgis.com\/4.11\/"<\/span><\/span>><\/span><\/span><\/<\ / span >script< / span >< spanclass=\" punctuationtoken \" > &gt ; < / span >< / span > < / span >

  < spanclass=\" language-javascript scripttoken \" >< spanclass=\" tok en tag \" >< spanclass=\" tok en tag \" >< spanclass=\" punctuation toke n \" > &lt ; < / span >script< / span >< spanclass=\" punctuation toke n \" > &gt ; < / span >< / span >  
      < spanclass=\" tok en function \" > require < / span >< spanclass=\" punctuation toke n \" > ( < / span >< spanclass=\" punctuation toke n \" > [ < / span >
        < spanclass=\" string toke n \" > "esri/Map" < / span >< spanclass=\" punctuation toke n \" > , < / span >
        < spanclass=\" string toke n \" > "esri/geometry/Point" < / span >< spanclass=\" punctuation toke n \" > , < / span >
        < spanclass=\" string toke n \" > "esri/views/MapView" < / span >< spanclass=\" punctuation toke n \" > , < / span >
		< spanclass=\" string toke n \" > "esri/layers/CSVLayer" < / span >< spanclass=\" punctuation toke n \" > , < / span >
		< spanclass=\" string toke n \" > "esri/widgets/LayerList" < / span >
      < spanclass=\" punctuation toke n \" > ] < / span >< spanclass=\" punctuation toke n \" > , < / span > < sp anclass=\" keyword toke n \" > function < / sp an >< sp anclass=\[0m[1m[32m[39m[22m[39m[22m[39m[22m[39m[22m[39m[22m[39m[22m[39m[22m[39m[22m[39m[22m[39m[22m[39m[22m Mapadd(csvLayer)

var layerList = new LayerList({
        view: view,
});

      view.ui.add([layerList], "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
 &Lt; /  Body  &Gt; 
 &Lt; /  Html  &Gt; ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍</ Span >< Span >< EM O J I _ 32 > > < / Span >< Span >< EM O J I _ 33 > > < / Span >< Span >< EM O J I _ 34 > > < / Span >< Span >< EM O J I _ 35 > > < / Span >< Span >< EM O J I _ 36 > > < / Span >< Span >< EM O J I _ 37 > > < / Span >< Span >< EM O J I _ 38 > > < / Span >< Span >< EM O J I _ 39 > > < / Span >< Span >< EM O J I _ 40 > > < / Span >< Span >< EM O J I _ 41 > > < / Span >< Span >< EM O J I _ 42 > > < / Span >< Span >< EM O J I _ 43 > > < / Span >< Span >< EM O J I _ 44 > > < / Span >< Span >< EM O J I _ 45 > > < / Span >< Span >< EM O J I _ 46 > > < / Span >< Span >< EM O J I _ 47 > > < / Span >< Span >< EM O J I _ 48 > > < / Span >< Span >< EM O J I _ 49 > > < / Span >< Span >< EM O J I _ 50 > > < / Span >< Span >< EM O J I _ 51 > > < / Span >< Span >< EM O J I _ 52 > > < / Span >< Span >< EM O J I _ 53 > > < / Span >< Span >< EM O J I _ 54 > > < / Span >< Span >< EM O J I _ 55 > > < / Span >< Span >< EM O J I _ 56 > > < / Span >< Span >< EM O J I _ 57 > > < / Span >< Span >< EM O J I _ 58 > > < / Span >< Span >< EM O J I _ 59 > > < / Span >< Span >< EM O J I _ 60 > > < / span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span ></ span >

Trouver plus de publications taguées avec

Réponses

There are no comments yet

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.