Erste Schritte mit MapView - Erstellen einer 2D-Karte
<\/A><\/P><\/P>
<SPAN class="operator token"><<\/SPAN><SPAN class="operator token">!<\/SPAN>DOCTYPE html<SPAN class="operator token">><\/SPAN>\n<SPAN class="operator token"><<\/SPAN>html<SPAN class="operator token">><\/SPAN>\n <SPAN class="operator token"><<\/SPAN>head<SPAN class="operator token">><\/SPAN>\n <SPAN class="operator token"><<\/SPAN>meta charset<SPAN class="operator token">=<\/SPAN><SPAN class="string token">\"utf-8\"<\/SPAN><SPAN class="operator token">><\/SPAN>\n <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>\n\n <SPAN class="operator token"><<\/SPAN>title<SPAN class="operator token">><\/SPAN>Erste Schritte <SPAN class="keyword token">mit<\/SPAN> MapView <SPAN class="operator token">-<\/SPAN> Erstellen einer 2D-Karte <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>\n\n <span class=\"operator token\"><!--<\/<span> Load stylesheets <span class=\"operator token\">--><\/<span>\n <span class=\"operator token\"><link rel=\"stylesheet\" \nhref=\"</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 class=\"operator token\">><\/<span>\n\n <span class=\"operator token\"><!--<\/<span> Load JS API required stylesheet <span class=\"operator token\">--><\/<span>\n <span class=\"operator token\"><link rel=\"stylesheet\" href=\"</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 class=\"operator token\">><\/<span>\n\n <span class=\"operator token\"><!--<\/<span> Apply any page specific styles <span class=\"operator token\">--><\/<span>\n <span class=\"operator token\"><!-- Note:</span>diese CSS-Einstellungen bewirken, dass die Karte das Browserfenster ausfllt --></span>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
padding: 0;
border: 0;
margin: 0;
font-family: "Tahoma", "Helvetica", sans-serif;
}
</style>
<!-- Konfigurieren Sie Dojo fur den asynchronen Modus - muss vor dem Laden der ArcGIS JS API erfolgen -->
3<script>
var dojoConfig = {
async: true
};
</script>
<!-- Laden Sie die JS API Referenz -->
<script src=" Map<SPAN class="punctuation token">,</SPAN>
MapView
<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">//OBEN von REQUIRE</SPAN>
<SPAN class="comment token">// erstelle die Karte</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">// erstelle die 2D-Ansicht</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... (truncated due to length) ...einstellungen zu überschreiben. 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>Die zweite der beiden Ressourcen, die zum Erstellen von Web-Mapping-Anwendungen mit der JavaScript API erforderlich sind. Diese Zeile lädt die JavaScript API.<\/P><P><\/P><P><STRONG>Referenzen: <\/STRONG><\/P><UL><LI>Leitfaden > <A href="https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/get-api\/index.html" rel="nofollow noopener noreferrer" target="_blank">API erhalten<\/A><\/LI><\/UL><P><\/P><H3 id="toc-hId--778398602" id="toc-hId--778398602"><script> require( [...], function(...){...} );<\/script><\/H3><P>Die require-Anweisung lädt die in der Anwendung verwendeten JavaScript API-Module. Die require-Anweisung besteht aus drei Teilen:<\/P><UL><LI>Ein Array von Modulen, die in der Anwendung verwendet werden. Die Module werden als Strings referenziert, wobei jeder String den Pfad und Namen des Moduls angibt.<\/LI><LI>Eine anonyme Funktion, deren Parameter eine Liste von Aliasnamen sind, die der Liste der Module entsprechen. <\/LI><LI>Der Anwendungscode. Dies ist der JavaScript API-Code. <\/LI><\/UL><P>Während jedes Modul geladen wird, wird es ausgeführt und das resultierende Objekt erhält den Alias, der in der Parameterliste der anonymen Funktion angegeben ist. Die Reihenfolge ist wichtig. Die Module und Aliase müssen in derselben Reihenfolge sein, sonst verhält sich die Anwendung ungewöhnlich. Im folgenden Beispiel wird das Modul "esri\/Map" geladen, ausgeführt und erhält den Alias "Map", der im Codeblock der anonymen Funktion verwendet wird, um eine Instanz einer Karte zu erstellen. (<A href="https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/sandbox\/index.html?sample=get-started-mapview" rel="nofollow noopener noreferrer" target="_blank">Code im Sandbox öffnen<\/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">\*\n *\n * Anwendungscode\n *\n *\/<\/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>Tipp: Fügen Sie einen Kommentar hinzu, um die schließende geschweifte Klammer-rechte Klammer ( }); ) zu markieren. Es ist nicht ungewöhnlich, mehrere Paare von geschweiften Klammern-rechten Klammern am Ende des Codeblocks zu haben. Den Überblick darüber zu verlieren, welche welche sind, zu wenige oder zu viele zu haben, ist ein häufiger Programmierfehler, der leicht durch Hinzufügen eines Kommentars behoben werden kann. <\/P>
< \/P >< P >< STRONG >Referenzen:< \/STRONG >< \/P >< P >Dojo Toolkit > Tutorials > < A href = "http:\/dojotoolkit.org/documentation/tutorials/1.10/hello_dojo/index.html" rel = "nofollow noopener noreferrer" target = "_blank" >Hello Dojo!< \/A >< \/P >< P >Dojo Toolkit > Tutorials > < 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 ist ein Loader-Plug-in (gekennzeichnet durch das Ausrufezeichen). Sein Zweck ist es, die Ausführung der anonymen Funktion der require-Anweisung zu blockieren, bis das Document Object Model im Speicher aufgebaut ist.< \/P >< P >< \/P >< P >< STRONG >Referenzen: < \/STRONG >< \/P >< UL >< LI >Dojo Toolkit > Dokumentation > < 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 >
