Commencer avec MapView - Créer une carte 2D
<\/A><\/P><\/P>
<SPAN class="operator token"><<\/SPAN><SPAN class="operator token">!<\/SPAN>DOCTYPE html<SPAN class="operator token">><\/SPAN>
<SPAN class="operator token"><<\/SPAN>html<SPAN class="operator token">><\/SPAN>
<SPAN class="operator token"><<\/SPAN>head<SPAN class="operator token">><\/SPAN>
<SPAN class="operator token"><<\/SPAN>meta charset<SPAN class="operator token">=<\/SPAN><SPAN class="string token">"utf-8"<\/SPAN><SPAN class="operator token">><\/SPAN>
<SPAN class="operator token"><<\/SPAN>meta name<SPAN class="operator token">=<\/SPAN><SPAN class="string token">"viewport"<\/SPAN> content<SPAN class="operator token">=<\/SPAN><SPAN class="string token">"initial-scale=1,maximum-scale=1,user-scalable=no"<\/SPAN><SPAN class="operator token">><\/SPAN>
<SPAN class="operator token"><<\/SPAN>title<SPAN class="operator token">><\/SPAN>Démarrer <SPAN class="keyword token">avec<\/SPAN> MapView <SPAN class="operator token">-<\/SPAN> Créer une carte 2D <SPAN class="operator token">-<\/SPAN> <SPAN class="number token">4.2<\/SPAN><SPAN class="operator token"><<\/SPAN><SPAN class="operator token">\/<\/SPAN>title<SPAN class="operator token">><\/SPAN>
<SPAN class="operator token"><<\/SPAN><SPAN class="operator token">!<\/SPAN><SPAN class="operator token">--<\/SPAN> Charger les feuilles de style <SPAN class="operator token">--<\/span>>
<span class="operator token"><<\span>link rel<span class=\"operator token\"><=</span><span class=\"string token\">\"stylesheet\"</span>
href<span class=\"operator token\"><=</span><span class=\"string token\"><span>\"</span><a class=\"jive-link-external-small\" href=\"https:\/\/community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.2%2Fdijit%2Fthemes%2Fclaro%2Fclaro.css\" target=\"_blank\">https:\/\/js.arcgis.com/4.2/dijit/themes/claro/claro.css</a><span>\"</span></span><span class=\"operator token\">></span>
<span class=\"operator token\"><<\span>!<\span>-- Charger la feuille de style requise par l'API JS <span class=\"operator token\">--</span>>
<span class=\"operator token\"><<\span>link rel<span class=\"operator token\"><=</span><span class=\"string token\">\"stylesheet\"</span> href<span class=\"operator token\"><=</span><span class=\"string token\"><span>\"</span><a class=\"jive-link-external-small\" href=\"https:\/\/community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.2%2Fesri%2Fcss%2Fmain.css\" target=\"_blank\">https:\/\/js.arcgis.com/4.2/esri/css/main.css</a><span>\"</span></span><span class=\"operator token\">></span>
<span class=\"operator token\"><<\span>!<\span>-- Appliquer les styles spécifiques à la page <span class=\"operator token\">--</span>>
<span class=\"operator token\"><<\span>!<\span>-- Note<span class=\"punctuation token\">:</span> ces réglages CSS font que la carte remplit la fenêtre du navigateur <span class=\"operator token\">--</span>>
<span class=\"operator token\"><<\span>style<span class=\"operator token\">></span>
html<span class=\"punctuation token\">\,</span>
body<span class=\"punctuation token\">\,</span>
#viewDiv <span class=\"punctuation token\">\{</span>
height<span class=\"punctuation token\">\:</span> <span class=\"number token\">100</span>%<span class=\"punctuation token\">\;</span>
width<span class=\"punctuation token\">\:</span> <span class=\"number token\">100</span>%<span class=\"punctuation token\">\;</span>
padding<span class=\"punctuation token\">\:</span> <span class=\"number token\">0</span><span class=\"punctuation token\">\;</span>
border<span class=\"punctuation token\">\:</span> <span class=\"number token\">0</span><span class=\"punctuation token\">\;</span>
margin<span class=\"punctuation token\">\:</span> <span class=\"number token\">0</span><span class=\\punctuation_token\\">\;</ span >
& nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; text-family: "Tahoma", "Helvetica", sans-serif;
& nbsp ; & nbsp ; & nbsp ; }
& nbsp ; & nbsp ; & lt;/style>
& nbsp ; & nbsp ; & lt;!-- Configurer Dojo pour le mode asynchrone - doit être fait avant de charger l'API ArcGIS JS
API -->
& nbsp ; & nbsp ; & lt;script>
& nbsp ; & nbsp ; var dojoConfig = {
& nbsp ; & nbsp ; async : true
& nbsp ; & nbsp ; }
& nbsp ; & lt;/script>
& nbsp ; & nbsp ; & lt;!-- Charger / référencer l'API JS -->
& nbsp ; & nbsp ; & lt;script src = "https://js.arcgis.com/4.2/ "> & lt;/script>
& nbsp ; & nbsp ; & lt;!-- Charger / référencer les fichiers javascript spécifiques à l'application -->
& nbsp ; & nbsp ; & lt;!-- Charger les modules requis et construire la carte -->
& nbsp ; & nbsp ; & lt;script>
& nbsp ; & nbsp ; require([
& nbsp ; & nbsp ; "esri/Map",
& nbsp ; & nbsp ; "esri/views/MapView",
& nbsp ; & nbsp ; "dojo/domReady!"
& nbsp ; ] , function(
Map<SPAN class="punctuation token">,</SPAN>
MapView
<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">//HAUT de REQUIRE</SPAN>
<SPAN class="comment token">// créer la carte</SPAN>
<SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"streets"</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// créer la vue 2D</SPAN>
<SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4</SPAN><SPAN class="punctuation token">,</SPAN>
center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">15</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">65</SPAN><SPAN class="punctuation token">]</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPA N>
<SP AN class="punctuation toke n ">}</SP AN><SP AN clas s ="p un c t u a t i o n to k e n ">)</SP AN><SP AN clas s ="p u n c t u a t i o n to k e n ">;</SP AN> <SP AN clas s ="c o m m e n t to k e n ">// BAS de REQUIRE</SP AN>
<SP AN clas s ="o p e r a t o r to k e n "><</SP AN><SP AN clas s ="o p e r a t o r to k e n ">/</SP AN>script<SP AN clas s ="o p e r a t o r to k e n ">></SP AN>
<SP AN clas s ="o p e r a t o r to k e n "><</SP AN><SP AN clas s ="o p e r a t o r to k e n ">/</SP AN>head<SP AN clas s ="o p e r a t o r to k e n ">></SP AN>
<SP AN clas s ="o p e r a t o r to k e n "><</SP AN>body <SP AN clas s ="k e y w o r d to k e n ">class</SP AN><SP AN clas s ="o p e r a t o r to k e n ">=</SP AN><SP AN clas s ="s t r i n g to k e n ">"claro"</SP AN><SP AN clas s ="o p e r a t o r to k e n ">></SP AN>
<SP AN clas s ="o p e r a t o r to k e n "><</SP AN>div id<SP AN clas s ="o p e r a t o r to k e n ">=</SP AN><SP AN clas s ="s t r i n g to k e n ">"viewDiv"</SP AN><SP AN clas s ="o p e r a t o r to k e n ">></SP AN><SP AN clas s ="o p e r a t o r to k e n "></</ SPAN >div< SPAN cl ass = id="toc-hId-1773758359" id="toc-hId-1773758359"><script src="<A href="https://js.arcgis.com/4.3/" target="_blank" rel="nofollow noopener noreferrer">https://js.arcgis.com/4.3/</A>"></script></H3><P>La deuxième des deux ressources nécessaires pour construire des applications de cartographie web utilisant l'API JavaScript. Cette ligne charge l'API JavaScript.</P><P></P><P><STRONG>Références : </STRONG></P><UL><LI>Guide > <A href="https://developers.arcgis.com/javascript/latest/guide/get-api/index.html" rel="nofollow noopener noreferrer" target="_blank">Obtenir l'API</A></LI></UL><P></P><H3 id="toc-hId--778398602" id="toc-hId--778398602"><script> require( [...], function(...){...} );</script></H3><P>L'instruction require charge les modules de l'API JavaScript utilisés dans l'application. L'instruction require se compose de trois parties :</P><UL><LI>Un tableau de modules utilisés dans l'application. Les modules sont référencés sous forme de chaînes, chaque chaîne fournissant le chemin et le nom du module.</LI><LI>Une fonction anonyme dont les paramètres sont une liste d'alias correspondant à la liste des modules. </LI><LI>Le code de l'application. C'est le code de l'API JavaScript. </LI></UL><P>À mesure que chaque module est chargé, il est exécuté et l'objet résultant se voit attribuer l'alias spécifié dans la liste des paramètres de la fonction anonyme. L'ordre est important. Les modules et les alias doivent être dans le même ordre sinon l'application se comportera de manière inhabituelle. Dans l'exemple ci-dessous, le module "esri/Map" est chargé, exécuté et assigné à l'alias "Map" qui est utilisé dans le bloc de code de la fonction anonyme pour créer une instance d'une carte. (<A href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=get-started-mapview" rel="nofollow noopener noreferrer" target="_blank">Ouvrir le code dans Sandbox</A>)</P><P></P><BLOCKQUOTE class="jive_macro_quote jive-quote jive_text_macro"><PRE class="lia-code-sample line-numbers language-none"><CODE><SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
<SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"dojo/domReady!"</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>
Map<SPAN class="punctuation token">,</SPAN>
MapView
<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">//DÉBUT du REQUIRE</SPAN>
<SPAN class="comment token">/*
*
* Code de l'application
*
*/</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// FIN du REQUIRE</SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN><SPAN class="line-numbers-rows"><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></SPAN><SPAN></Span/><Span></Span/><Span></Span/></Span>Conseil : Ajoutez un commentaire pour marquer la fermeture de l'accolade-parenthèse droite ( }); ). Il n'est pas rare d'avoir plusieurs paires accolade-parenthèse à la fin du bloc de code. Perdre la trace de laquelle est laquelle, en avoir trop peu ou trop est une erreur courante en codage, facilement corrigée en ajoutant un commentaire.
Références :
Dojo Toolkit > Tutoriels >
