Comece com MapView - Crie um 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>Comece <SPAN class="keyword token">com<\/SPAN> MapView <SPAN class="operator token">-<\/SPAN> Crie um 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> Carregar folhas 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>"<\/SPANA href=\"https:\/\/>js.arcgis.com\/>4.2\/>dijit\/>themes\/>claro\/>claro.css\"><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></SPANA>"3E
<span style='color:#000000'><!-- Carregar folha de estilo requerida pela JS API --></span>
<link rel="stylesheet" href="<a href='https://js.arcgis.com/4.2/esri/css/main.css' target='_blank'>https://js.arcgis.com/4.2/esri/css/main.css</a>">
<!-- Aplicar estilos específicos da página -->
<!-- Nota: essas configurações CSS fazem o mapa preencher a janela do navegador -->
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
padding: 0;
border: 0;
margin: 0;
font-family: "Tahoma","Helvetica",sans-serif;
}
</style>
<!-- Configurar Dojo para modo assíncrono - deve ser feito antes de carregar a ArcGIS JS API -->
<script>
var dojoConfig = {
async: true
}
</script>
​3C!-- Carregar/referenciar a JS API --3E
3Cscript src=223Ca href=22https://js.arcgis.com/4.2/22 target=22_blank223Ehttps://js.arcgis.com/4.2/3C/a3E223E3C/script3E
3C!-- Carregar/referenciar arquivos javascript específicos da aplicação --3E
3C!-- Carregar os módulos necessários e construir o mapa --3E
3Cscript3E
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">//TOPO do REQUIRE</SPAN>
<SPAN class="comment token">// criar o 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>
basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"streets"</SPAN>
<SPAN class="punctuation token">})</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// criar a visualização 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>
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="comment token">// BASE do REQUIRE</SPAN>
<span class="operator token"></</span>script<span class="operator token">></span>
<span class="operator token"></</span>head<span class="operator token">></span>
<span class="operator token"><</span>body <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"claro"</span><span class="operator token">></span>
<span class="operator token"><</span>div id<span class="operator token">=</span><span class="string token">"viewDiv"</span><span class="operator token">></span><span class="operator token"></</span>div<span class="operator token">></span>
<span class="operator token"></</span>body<span class="operator token">></span>
<span class="operator token"></</span>html<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></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 _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 > ></spa n <span><E M O JI 7 3></s pan><sp an><E M O JI 7 4></s pan><sp an><E M O JI 7 5></s pan><sp an><E M O JI 7 6></s pan><sp an><E M O JI 7 7></s pan><sp an><E M O JI 7 8></s pan><sp an><E M O JI 7 9></s pan><sp an><E M O JI 8 0></s pan><sp an><E M O JI 8 1></s pan><sp an><E M O JI 8 2></s pan></spa n ></CODE ></PRE ></P ></P ></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>Primeiro de dois recursos necessários para construir aplicações de mapeamento web usando a JavaScript API. <Span style = "font-family: times new roman,times,serif;" > main.css</Span> contém o estilo necessário para os componentes da API. Não solicitar o <Span style = "font-family: times new roman,times,serif;" > main.css</Span> causa um comportamento incomum no seu app.</p>
<p> </p>
<p> <strong> Referências:</strong> </p>
<ul>
<li> Guia > <a href = "https://developers.arcgis.com/javascript/latest/guide/get-api/index.html" rel = "nofollow noopener noreferrer" target = "_blank" > Obter a API</a> </li>
</ul>
<p> </p>
<h3 id = "toc-hId--1711862311" id = "toc-hId--1711862311" > Estilo necessário para preencher a página</h3>
<pre class="lia-code-sample line-numbers language-none"><code>& lt ;style& gt ;
html ,
body ,
#viewDiv {
height : 100% ;
width : 100% ;
padding : 0 ;
border : 0 ;
margin : 0 ;
}
</style >
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>O segundo dos dois recursos necessários para construir aplicações de mapeamento web usando a JavaScript API. Esta linha carrega a JavaScript API.<\/P><P><\/P><P><STRONG>Referências: <\/STRONG><\/P><UL><LI>Guia > <A href="https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/get-api\/index.html" rel="nofollow noopener noreferrer" target="_blank">Obter a API<\/A><\/LI><\/UL><P><\/P><H3 id="toc-hId--778398602" id="toc-hId--778398602"><script> require( [...], function(...){...} );<\/script><\/H3><P>A declaração require carrega os módulos da JavaScript API usados na aplicação. A declaração require consiste em três partes:<\/P><UL><LI>Um array de módulos usados na aplicação. Os módulos são referenciados como strings, cada string fornecendo o caminho e o nome do módulo.<\/LI><LI>Uma função anônima cujos parâmetros são uma lista de aliases correspondentes à lista de módulos. <\/LI><LI>O código da aplicação. Este é o código da JavaScript API. <\/LI><\/UL><P>À medida que cada módulo é carregado, ele é executado e o objeto resultante é atribuído ao alias especificado na lista de parâmetros da função anônima. A ordem é importante. Os módulos e aliases devem estar na mesma ordem ou a aplicação se comportará de maneiras incomuns. No exemplo abaixo, o módulo "esri\/Map" é carregado, executado e atribuído ao alias "Map" que é usado no bloco de código da função anônima para criar uma instância de um mapa. (<A href="https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/sandbox\/index.html?sample=get-started-mapview" rel="nofollow noopener noreferrer" target="_blank">Abra o código no 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">\/_TOP of REQUIRE_<\/SPAN>
<SPAN class="comment token">\/*
*
* Código da aplicação
*
*\/<\/SPAN>
<SPAN class="punctuation token">}<\/SPAN><SPAN class="punctuation token">)<\/SPAN><SPAN class="punctuation token">;<\/SPAN> <SPAN class="comment token">\/_BOTTOM of 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>Dica: Adicione um comentário para marcar a chave-direita-parêntese-direita de fechamento ( }); ). Não é incomum ter vários pares chave-direita-parêntese-direita no final do bloco de código. Perder a noção de qual é qual, ter poucos ou muitos é um erro comum de codificação, facilmente corrigido adicionando um comentário.
Referências:
Dojo Toolkit > Tutoriais >
