Comience con MapView - Cree un mapa 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>Comience <SPAN class="keyword token">con<\/SPAN> MapView <SPAN class="operator token">-<\/SPAN> Cree un mapa 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> Cargar hojas de estilo <SPAN class="operator token">--<\/SPAN><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>>
<!-- Cargar hoja de estilos requerida por JS API -->
<link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
<!-- Aplicar estilos específicos de la página -->
<!-- Nota: estas configuraciones CSS hacen que el mapa llene la ventana del navegador -->
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
padding: 0;
border: 0;
margin: 0;
text-family: "Tahoma","Helvetica",sans-serif;
}
</style>
<!-- Configurar Dojo para modo asíncrono - debe hacerse antes de cargar ArcGIS JS
API -->
<script>
var dojoConfig = {
async : true
}
</script>
<!-- Cargar/referenciar la JS API -->
<script src="https://js.arcgis.com/4.2/"></script>
<!-- Cargar/referenciar archivos javascript específicos de la aplicación -->
<!-- Cargar los módulos requeridos y construir el mapa -->
<script>
require([
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function(
Map<SPAN class="punctuation token">,</SPAN>
MapView
<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">//TOP of REQUIRE</SPAN>
<SPAN class="comment token">// crear el mapa</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">// crear la vista 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">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</span> <span class='comment'>// BOTTOM of REQUIRE</span>
<span class='operator'></</span>script<span class='operator'>></span>
<span class='operator'></</span>head<span class='operator'>></span>
<span class='operator'><</span>body <span class='keyword'>class</span>=<span class='string'>"claro"</span><span class='operator'>></span>
<span class='operator'><</span>div id=<span class='string'>"viewDiv"</span><span class='operator'>></span><span class='operator'></</span>div<span class='operator'>></span>
<span class='operator'></</span>body<span class='operator'>></span>
<span class='operator'></</span>html<span class='operator'>></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></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 > << EM OJ I _37 >> </ span >< span > << EM OJ I _38 >> </ span >< span > << EM OJ I _39 >> </ span >< span > << EM OJ I _40 >> </ span >< span > << EM OJ I _41 >> </ span >< span > << EM OJ I _42 >> </ span >< span > << EM OJ I _43 >> </ span >< span > << EM OJ I _44 >> </ span >< span > << EM OJ I _45 >> </ span >< span > << EM OJ I _46 >> </ span >< span > << EM OJ I _47 >> </ span >< span > << EM OJ I _48 >> </ span >< span > << EM OJ I _49 >> </ span >< span > << EM OJ I _50 >> </ span >< span > << EM OJ I _51 >> </ span >< span > << EM OJ I _52 >> </ span >< span > << EM OJ I _53 >> </ span >< span > << EM OJ I _54 >> </ span >< span > << EM OJ I _55 >> </ span >< span > << EM OJ I _56 >> </ span >< span > << EM OJ I _57 >> </ span >< span > << EM OJ I _58 >> </ span >< span > << EM OJ I _59 >> </ span >< span > << EM OJ I _60 >> </ span >< span > << EM OJ I _61 >> </ span >< span > << EM OJ I _62 >> </ span >< span > << EM OJ I _63 >> </ span >< span > << EM OJ I _64 >> </ span >< span > << EM OJ I _65 >> </ span >< span > << EM OJ I _66 >> </ span >< span > << EM OJ I _67 >> </ span >< span > << EM OJ I _68 >> </ span >< span > << EM OJ I _69 >> </ span >< span > << EM OJ I _70 >> </ span >< span > << EM OJ I _71 >> </ span >< span > << EM OJ I _72 >> </ span >< span > << EM OJ I _73 >> </ span >< sp an ><< E M O JI 74>> << / s p a n>> << s p a n>> << E M O JI 75>> << / s p a n>> << s p a n>> << E M O JI 76>> << / s p a n>> << s p a n>> << E M O JI 77>> << / s p a n>> << s p a n>> << E M O JI 78>> << / s p a n>> << s p a n>> << E M O JI 79>> << / s p a n>> << s p a n>> << E M O JI 80>> << / s p a n>> << s p a n>> << E M O JI 81>> << / s p a n>> << s p a n>> << E M O JI 82>> << / s p a n>>
<H3 id="toc-hId-840294650" id="toc-hId-840294650"><link rel="stylesheet" href="<A href="https://js.arcgis.com/4.3/esri/css/main.css" target="_blank" rel="nofollow noopener noreferrer">https://js.arcgis.com/4.3/esri/css/main.css</A>></H3>
<P>Primer de dos recursos necesarios para construir aplicaciones web de mapeo usando la JavaScript API. <Span style = "font-family: times new roman,times,serif; ">main.css</Span contiene el estilo necesario para los componentes de la API. No solicitar main.css hace que tu aplicación se comporte de maneras inusuales.</P>
<P></P>
<P>
<strong>Referencias:</strong>
</P>
<ul>
<li>
Guía > <a href = "https://developers.arcgis.com/javascript/latest/guide/get-api/index.html" rel = "nofollow noopener noreferrer" target = "_blank">
Obtener la API
</a>
</li>
</ul>
<p></p>
<h3 id = "toc-hId--1711862311" id = "toc-hId--1711862311">
estilo necesario para llenar la página
<h3/>
<style>
html,
body,
#viewDiv {
height:100%;
width:100%;
padding:0;
border:0;
margen:0;
}
<style/>
<p>
l as propiedades CSS en los elementos <html>, <body> y el contenedor del mapa (usualmente un <div> identificado por su atributo id) determinan cuánto de la página web es llenado por el mapa. Es necesario estilizar los tres. Definir estilos para uno solo o dos elementos solo llenará la mitad de la página.
<p/>
<h3 id = "toc-hId-30948024" id = "toc-hId-30948024">
switch <script> var dojoConfig = { async : true } </script>
h3/>
pone el cargador AMD en modo asincrónico. Dojo provee la funcionalidad de carga de módulos para la ArcGIS JavaScript API, específicamente el cargador AMD. Por defecto, el cargador AMD es síncrono para mantener compatibilidad hacia atrás. Cambias al modo asincrónico configurando la bandera async antes de que se cargue la ArcGIS JavaScript API. Cargar la API también carga Dojo. La declaración anterior define una variable global JavaScript, el objeto dojoConfig. Los parámetros especificados en el objeto dojoConfig están destinados a sobreescribir las configuraciones predeterminadas.
<p/>
<strong>Referencias:</strong>
<ul>
<li>C onceptos > Dojo > <a href = "https://developers.arcgis.com/javascript/3/jshelp/inside_dojoversion.html" rel = "nofollow noopener noreferrer" target = "_blank">
abra Dojo
<a/>
l i
<li>C onceptos > Dojo > <a href = "https://developers.arcgis.com/javascript/3/jshelp/inside_dojo_amd.html" rel = "nofollow noopener noreferrer" target = "_blank">
dojo y AMD
<a/>
l i
<li>T oolkit Dojo > Tutoriales > <a href = "http://dojotoolkit.org/documentation/tutorials/1.10/dojo_config/index.html" rel = "nofollow noopener noreferrer" target = "_blank">
sintaxis Dojo con dojoConfig
<a/>
l i
<li>T oolkit Dojo > Guía de referencia > <a href = "http://dojotoolkit.org/reference-guide/1.9/loader/amd.html#id2" rel = "nofollow noopener noreferrer" target = "_blank">
el cargador Dojo
<a/>
l i
<ul/> 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>El segundo de los dos recursos necesarios para construir aplicaciones de mapeo web usando la JavaScript API. Esta línea carga la JavaScript API.</P><P></P><P><STRONG>Referencias: </STRONG></P><UL><LI>Guía > <A href="https://developers.arcgis.com/javascript/latest/guide/get-api/index.html" rel="nofollow noopener noreferrer" target="_blank">Obtener la API</A></LI></UL><P></P><H3 id="toc-hId--778398602" id="toc-hId--778398602"><script> require( [...], function(...){...} );</script></H3><P>La declaración require carga los módulos de la JavaScript API usados en la aplicación. La declaración require consta de tres partes:</P><UL><LI>Un arreglo de módulos usados en la aplicación. Los módulos se referencian como cadenas, cada cadena proporcionando la ruta y el nombre del módulo.</LI><LI>Una función anónima cuyos parámetros son una lista de alias correspondientes a la lista de módulos. </LI><LI>El código de la aplicación. Este es el código de la JavaScript API. </LI></UL><P>A medida que cada módulo se carga, se ejecuta y el objeto resultante se asigna al alias especificado en la lista de parámetros de la función anónima. El orden es importante. Los módulos y alias deben estar en el mismo orden o la aplicación se comportará de maneras inusuales. En el ejemplo a continuación, el módulo "esri/Map" se carga, ejecuta y asigna al alias "Map" que se usa en el bloque de código de la función anónima para crear una instancia de un mapa. (<A href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=get-started-mapview" rel="nofollow noopener noreferrer" target="_blank">Abrir el código en 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">//INICIO de REQUIRE</SPAN>
<SPAN class="comment token">/*
*
* Código de la aplicación
*
*/</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// FIN de 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>Sugerencia: Agrega un comentario para marcar el cierre del paréntesis llave-derecha ( }); ). No es inusual tener varios pares paréntesis llave-derecha al final del bloque de código. Perder la pista de cuál es cuál, tener muy pocos o demasiados es un error común en la codificación, fácilmente remediado agregando un comentario.
Referencias:
Dojo Toolkit > Tutoriales >
