IWEB Poznámky - Základní webová mapovací aplikace popsaná

RudyProsser

<\/HEAD>

Výuková pomůcka pro Úvod do webového vývoje pomocí ArcGIS API for JavaScript<\/A> (IWEB) kurz vedený instruktorem.<\/P>

<\/P>

Viz

IWEB Poznámky - Popis základní webové stránky<\/A> pro další informace.<\/P>

<\/P>

Obecné odkazy:<\/H3>ArcGIS API for JavaScript<\/A><\/LI>Dokumentace Dojo Toolkit<\/A><\/LI>Mozilla Developer Network (MDN) > Webové technologie pro vývojáře<\/A><\/LI>w3schools.com<\/A><\/LI><\/UL>

<\/P>

Základní webová mapová aplikace<\/H2>Odkaz: Začínáme s MapView - Vytvoření 2D mapy 
<\/A><\/P>

<\/P>

</pre>

 
Vlastnosti CSS na &l t ;html&r t ;, &l t ;body&r t ; a kontejnerovém prvku mapy (obvykle &l t ;div&r t ; identifikovaném atributem id) určují, kolik webové stránky je vyplněno mapou. Je nutné stylovat všechny tři. Definování stylů pouze pro jeden nebo dva prvky vyplní pouze polovinu stránky. 
 
<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>
&nbsp; <SPAN class="operator token"><<\/SPAN>head<SPAN class="operator token">><\/SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><<\/SPAN>meta charset<SPAN class="operator token">=<\/SPAN><SPAN class="string token">"utf-8"<\/SPAN><SPAN class="operator token">><\/SPAN>
&nbsp;&nbsp;&nbsp; <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>

&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><<\/SPAN>title<SPAN class="operator token">><\/SPAN>Začínáme <SPAN class="keyword token">s<\/SPAN> MapView <SPAN class="operator token">-<\/SPAN> Vytvořit 2D mapu <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>

&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><<\/SPAN><SPAN class="operator token">!<\/SPAN><SPAN class="operator token">--<\/SPAN> Načíst styly <SPAN class="operator token">--<\/SPAN><SPAN class="operator token">><\/SPAN>
&nbsp;&nbsp;&nbsp; <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 > < 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 "> & gt ; < / Span >

&nbsp;&nbsp;&nbsp; <Span Class = "Operator Token "> & lt ; ! -- Load JS API required stylesheet -- & gt ; < / Span >
&nbsp;&nbsp;&nbsp; <Span Class = "Operator Token "> & lt ; link rel = "stylesheet" href = " https://js.arcgis.com/4.2/esri/css/main.css " & gt ;

&nbsp;&nbsp;&nbsp; <Span Class = "Operator Token "> & lt ; ! -- Apply any page specific styles -- & gt ;
&nbsp;&nbsp;&nbsp; <Span Class = "Operator Token "> & lt ; ! -- Poznámka: tato nastavení CSS způsobují, že mapa vyplní okno prohlížeče -- & gt ;

&nbsp;&nbsp;&nbsp; <Span Class = "Operator Token "> & lt ; style & gt ;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; body,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #viewDiv {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; výška: 100%;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; šířka: 100%;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; okraj: 0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-family: "Tahoma", "Helvetica", bezpatkové;
&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;& nbsp; & lt ; / style & gt ;

&nbsp; & nbsp ; & lt ; ! -- Konfigurace Dojo pro asynchronní režim - musí být provedeno před načtením ArcGIS JS API -- & gt ;
&nbsp; & nbsp ; & lt ; script & gt ;
&nbsp; & nbsp ; var dojoConfig = {
&nbsp; & nbsp ; async : true
&nbsp; & nbsp ; }
&nbsp; & nbsp ; & lt ; / script & gt ;

&nbsp; & nbsp ; & lt ; ! -- Načíst / odkazovat na JS API -- & gt ;
&nbsp; & nbsp ; & lt ; script src = " https://js.arcgis.com/4.2/ " & gt ; & lt ; / script & gt ;

&nbsp; & nbsp ; & lt ; ! -- Načíst / odkazovat na specifické javascriptové soubory aplikace -- & gt ;

&nbsp; & nbsp ; & lt ; ! -- Načíst požadované moduly a vytvořit mapu -- & gt ;
&nbsp; & nbsp ; & lt ; script & gt ;
&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">//HORNI cast REQUIRE</SPAN>

       <SPAN class="comment token">// vytvořit mapu</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">// vytvořit 2D pohled</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">;</SPA N> <spanclass= "commenttoken" >// DOLNI cast REQUIRE </span >
    <spanclass= "operatortoken" ></span>script<spanclass= "operatortoken" >></span >

  <spanclass= "operatortoken" ></span>head<spanclass= "operatortoken" >></span >
  <spanclass= "operatortoken" ><bodyclass= "claro"></span >

    <spanclass= "operatortoken" ><divid= "viewDiv"></div></span >

  <spanclass= "operatortoken" ></body></span >
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<spanclass= "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 >< < EM OJ I _25 > > </ span >< span >< < EM OJ I _26 > > </ span >< span >< < EM OJ I _27 > > </ span >< span >< < EM OJ I _28 > > </ span >< span >< < EM OJ I _29 > > </ span >< span >< < EM OJ I _30 > > </ span >< span >< < EM OJ I _31 > > </ span >< span >< < EM OJ I _32 > > </ span >< span >< < EM OJ I _33 > > </ span >< span >< < EM OJ I _34 > > </ span >< span >< < EM OJ I _35 > > </ span >< span >< < EM OJ I _36 > > </ 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 > ></spa n><<E MO JI 61>><<E MO JI 62>><<E MO JI 63>><<E MO JI 64>><<E MO JI 65>><<E MO JI 66>><<E MO JI 67>><<E MO JI 68>><<E MO JI 69>><<E MO JI 70>><<E MO JI 71>><<E MO JI 72>><<E MO JI 73>><<E MO JI 74>><<E MO JI 75>><<E MO JI 76>><<E MO JI 77>><<E MO JI 78>><<E MO JI 79>><<E MO JI 80>><<E MO JI 81>><<E MO JI 82>></spa n></sp an ></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>P rvní ze dvou zdrojů potřebných k vytváření webových mapových aplikací pomocí JavaScript API. Soubor main.css obsahuje nezbytné styly pro komponenty API. Nepožádání o main.css způsobí, že vaše aplikace bude fungovat neobvykle.< /P>
<P>&nbsp;< /P>
<P>&nbsp;<STRONG>Reference:< /STRONG>&nbsp;</P>
<ul>
<li>Návod > &nbsp;<a href ="https://developers.arcgis.com/javascript/latest/guide/get-api/index.html" rel ="nofollow noopener noreferrer" target ="_blank">Získat API</a>&nbsp;</li>
</ul>
<p>&nbsp;</p>
<h3 id ="toc-hId--1711862311" id ="toc-hId--1711862311"
>Nepostradatelné styly pro vyplnění stránky</h3>
<preclass = "lia-code-sample line-numbers language-none"
><code><style>
 html, 
 body,
 #viewDiv {
    výška: 100%;
    šířka: 100%;
    odsazení: 0;
    okraj: 0;
    margin: 0;
 }
</style><EMOJI_83><sp anclass = "line-numbers-rows"
><sp an><EMOJI_84></sp an><sp an><EMOJI_85></sp an><sp an><EMOJI_86></sp an><sp an><EMOJI_87></sp an><sp an><EMOJI_88></sp an><sp an><EMOJI_89></sp an><sp an><EMOJI_90></sp an><sp an><EMOJI_91></sp an><sp an><EMOJI_92></sp an><sp an><EMOJI_93></sp an><sp an><EMOJI_94></sp an>

&l t ;script&r t ; var dojoConfig = { async : true } &l t ;/script&r t ; 

Přepíná AMD loader do asynchronního režimu. Dojo poskytuje funkci načítání modulů pro ArcGIS JavaScript API, konkrétně AMD loader. Ve výchozím nastavení je AMD loader synchronní kvůli zpětné kompatibilitě. Přepnete do asynchronního režimu nastavením příznaku async před načtením ArcGIS JavaScript API. Načtení API také načte Dojo. Výše uvedené prohlášení definuje globální proměnnou JavaScript, objekt dojoConfig. Parametry specifikované v objektu dojoConfig mají přepsat výchozí nastavení.

 

  

• Pojmy > Dojo >  
  Pojmy > Dojo >  
  Sada nástrojů Dojo > Tutoriály >  
  Sada nástrojů Dojo > Referenční příručka >  
  

 

<script src="https:\/\/js.arcgis.com\/4.3\/<\/A>"><\/script><\/H3>

Druhý ze dvou zdrojů potřebných k vytváření webových mapových aplikací pomocí JavaScript API. Tento řádek načítá JavaScript API.<\/P>

<\/P>

Reference: <\/STRONG><\/P>Průvodce >

Získat API<\/A><\/LI><\/UL>

<\/P>

<script> require( [...], function(...){...} );<\/script><\/H3>Příkaz require načítá moduly JavaScript API používané v aplikaci. Příkaz require se skládá ze tří částí:<\/P>Pole modulů používaných v aplikaci. Moduly jsou odkazovány jako řetězce, každý řetězec poskytuje cestu a název modulu.<\/LI>Anonymní funkce, jejíž parametry jsou seznam aliasů odpovídajících seznamu modulů.  <\/LI>Kód aplikace. Toto je kód JavaScript API. <\/LI><\/UL>Jakmile je každý modul načten, je vykonán a výsledný objekt je přiřazen aliasu uvedenému v seznamu parametrů anonymní funkce. Pořadí je důležité. Moduly a aliasy musí být ve stejném pořadí, jinak se aplikace bude chovat neobvykle. V níže uvedeném příkladu je modul "esri\/Map" načten, vykonán a přiřazen alias "Map", který je použit v bloku kódu anonymní funkce k vytvoření instance mapy. (Otevřít kód v Sandboxu<\/A>)<\/P>

<\/P>

<SPAN class="operator token"><<\/SPAN>script<SPAN class="operator token">><\/SPAN>
&nbsp; <SPAN class="token function">require<\/SPAN><SPAN class="punctuation token">(<\/SPAN><SPAN class="punctuation token">[<\/SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri\/Map"<\/SPAN><SPAN class="punctuation token">,<\/SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri\/views\/MapView"<\/SPAN><SPAN class="punctuation token">,<\/SPAN>

&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojo\/domReady!"<\/SPAN>
&nbsp; <SPAN class="punctuation token">]<\/SPAN><SPAN class="punctuation token">,<\/SPAN> <SPAN class="keyword token">function<\/SPAN><SPAN class="punctuation token">(<\/SPAN>
&nbsp;&nbsp;&nbsp; Map<SPAN class="punctuation token">,<\/SPAN>
&nbsp;&nbsp;&nbsp; MapView
&nbsp; <SPAN class="punctuation token">)<\/SPAN> <SPAN class="punctuation token">{<\/SPAN> <SPAN class="comment token">\//HORNI CAST REQUIRE<\/SPAN>

&nbsp;&nbsp;&nbsp; <SPAN class="comment token">\/*
&nbsp;&nbsp;&nbsp;&nbsp; *
&nbsp;&nbsp;&nbsp;&nbsp; * Kód aplikace
&nbsp;&nbsp;&nbsp;&nbsp; *
&nbsp;&nbsp;&nbsp;&nbsp; *\/<\/SPAN>

&nbsp; <SPAN class="punctuation token">}<\/SPAN><SPAN class="punctuation token">)<\/SPAN><SPAN class="punctuation token">;<\/SPAN> <SPAN class="comment token">\// DOLNI CAST REQUIRE<\/SPAN>
<SPAN class="operator token"><<\/SPAN><SPAN class="operator token">\/<\/span>script<Span Class=\"operator Token\">><\/>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<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>

Tip: Přidejte komentář pro označení zavírací složené závorky-pravé závorky ( }); ). Není neobvyklé mít na konci bloku kódu několik párů složených závorek-pravých závorek. Ztratit přehled o tom, která je která, mít jich málo nebo příliš mnoho, je běžná chyba v kódování, kterou lze snadno napravit přidáním komentáře. <\/P>

<\/P>

Reference:<\/STRONG>

Dojo Toolkit > Tutoriály >

Hello Dojo!< /A >< /P >< P > Dojo Toolkit &gt ; Tutoriály &gt ; < A href = "http : \/ dojotoolkit.org/documentation/tutorials/1.10/modern_dojo/index.html " rel = "nofollow noopener noreferrer" target = " _blank "> Modern Dojo < /A >< /P >< P >< /P >< H3 id = "toc-hId-964411733" id = "toc-hId-964411733" > "dojo/domReady!" < /H3 >< P > domReady je plugin pro loader (označený vykřičníkem). Jeho účelem je zablokovat vykonání anonymní funkce příkazu require až do doby, než je dokumentový objektový model sestaven v paměti.< /P >< P >< /P >< P >< STRONG > Reference: < /STRONG >< /P >< UL >< LI > Dojo Toolkit &gt ; Dokumentace &gt ; < A href = "https : \/ dojotoolkit.org/reference-guide/1.10/dojo/domReady.html" rel = "nofollow noopener noreferrer" target = " _blank "> dojo/domReady! < /A >< /LI >< /UL >< /BODY >< /HTML >