nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

ArcGIS API für JavaScript 4.11 - eine Übung

Egge-Jan_Pollé

<\/HEAD>

Hallo,<\/P>

<\/P>

Derzeit bereite ich mich auf die neue Technical Certification ArcGIS API for JavaScript 19-001<\/A> vor, indem ich mich durch die Dokumentation arbeite: ArcGIS API for JavaScript | ArcGIS for Developers (Latest)<\/A> (in diesem Fall: 4.11).<\/P>

<\/P>

Und ich teile hier mein erstes Ergebnis. Vielleicht keine Raketenwissenschaft, aber zumindest eine funktionierende Webkarte. Sie können sie hier in Aktion sehen:

ArcGIS API for JavaScript 4.11 Tutorial - Welcome to the Netherlands<\/A> (Quellcode unten geteilt - alles html, css und javascript in einer Datei)<\/P>

<\/P>

Ich habe es geschafft, einige Widgets hinzuzufügen: eine Home-Schaltfläche, eine Suchleiste und eine Basemap Gallery<\/LI>
Das Search-Widget hat einen benutzerdefinierten Locator, um die Suchergebnisse nur auf die Niederlande zu beschränken<\/LI>
Sowohl das Search-Widget als auch die Basemap Gallery sind einklappbar (mithilfe des Expand-Widgets)<\/LI>
Die benutzerdefinierten Basemaps sind in RD_New (EPSG: 28992) und werden von

Esri Nederland<\/A> gehostet<\/LI><\/UL>

<\/P>

Ich bin mit dieser ersten Karte nicht unzufrieden. Was denken Sie? Verbesserungsvorschläge sind immer willkommen.<\/P>

<\/P>

Egge-Jan<\/P>

<\/P>

<SPAN class="doctype token"><!DOCTYPE html><\/SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>html<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>head<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>meta<\/SPAN> <SPAN class="attr-name token">charset<SPAN class="punctuation token">=<\/<\span>utf-8<SPAN class=\"punctuation token\">\"<\/<\span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

class="keyword token">var darkGrayCanvas_RD_EsriNL = new Basemap({
portalItem: {id: "62a3befb579e4d9f9c5c51576c8a7c25"} //Donkergrijze Canvas RD hosted by Esri Nederland
});

var topo_RD_EsriNL = new Basemap({
portalItem: {id: "7aea6fa913a94176a1074edb40690318"} //Topo RD hosted by Esri Nederland
});

var open_Topo_RD_EsriNL = new Basemap({
portalItem: {id: "0698b71eb7cf47898086d072e574ac32"} //Open Topo RD hosted by Esri Nederland
});

Var luchtfoto_RD_EsriNL = New Basemap ( { 
portalItem: { id: "38e1a1c6ee2c421290622400d22ecf57" } //Luchtfoto RD hosted by Esri Nederland 
} 

Var localBasemaps = New LocalBasemapsSource ( { 
basemaps : [ lightGrayCanvas_RD_EsriNL, darkGrayCanvas_RD_EsriNL, topo_RD_EsriNL, open_Topo_RD_EsriNL, luchtfoto_RD_EsriNL] 
} ) ; 

Var map = New Map ( { basemap: topo_RD_EsriNL } ) ;

Var rdOrigin = New Point Var view = New MapView Var zoomBtns = new Zoom({ view: view });

view.ui.add(zoomBtns, „top-left“); // Zoom-Schaltflächen wieder unter dem Kartentitel hinzufügen

Var homeBtn = new Home({ view: view });

// Fügen Sie die Home-Schaltfläche in die obere linke Ecke der Ansicht ein
view.ui.add(homeBtn, „top-left“);

Var searchWidget = new Search({
container: document.createElement("div"),
sources: [{
locator: new Locator({ url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }),
singleLineFieldName: "SingleLine", // Dies ermöglicht die Suche nach der Kombination aus Postleitzahl und Hausnummer, z.B. 4181 AE 38
countryCode: „NL“, // Verwenden Sie den Standard-GeocodeServer, aber beschränken Sie die Ergebnisse auf die Niederlande nur<\/SPAN>\n\t\t Platzhalter:<\/SPAN> "Adresse oder Ort suchen"<\/SPAN>\n\t }<\/SPAN>]<\/SPAN>,<\/SPAN>\n\t\t Ansicht:<\/SPAN> view,<\/SPAN>\n\t\t includeDefaultSources:<\/SPAN> false<\/SPAN>\n }<\/SPAN>)<\/SPAN>;<\/SPAN>\n\n\t\tsearchWidgetExpand =<\/SPAN> new<\/SPAN> Expand<\/SPAN>(<\/SPAN>{<\/SPAN>\n\t\t expandIconClass:<\/SPAN> "esri-icon-search"<\/SPAN>,<\/SPAN> \/\/ siehe https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/esri-icon-font\/<\/SPAN>\n\t\t expandTooltip:<\/SPAN> "Suchen"<\/SPAN>,<\/SPAN> \/\/ optional, Standard ist "Expand" für englische Locale<\/SPAN>\n\t\t view:<\/SPAN> view,<\/SPAN>\n\t\t content:<\/SPAN> searchWidget.<\/SPAN>domNode,<\/SPAN>\n\t\t group:<\/SPAN> "top-right"<\/SPAN>\n\t\t}<\/SPAN>)<\/SPAN>;<\/SPAN>\n\n var<\/SPAN> basemapGallery =<\/SPAN> new<\/SPAN> BasemapGallery<\/Span>({\n\t\t container: document.createElement(

Finde mehr Beiträge mit dem Tag

Kommentare

mchristmas5mchristmas5

Your map is fine, but I would already start the habit of setting up your web-map as with different folders for the css, js, widgets, templates..etc. I would add other layers, perhaps allow the user to click on the map and view information on a pop-up, or include other frameworks or you can do it in dojo to include some sort of menu bar where you can have home, about this map information. I guess you can make this web map as complicated as you want...

Nehmen Sie an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registrieren Sie ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.