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; } } }

Erste Schritte mit ArcGIS JavaScript - Widgets einklappen

Egge-Jan_Pollé

<\/HEAD>

<\/A>https:\/\/community.esri.com\/people\/EPolle_TensingInternational\/blog\/2019\/06\/02\/aan-de-slag-met-arcgis-javascript-inleiding<\/A><\/P>

<\/P>

Erweitern<\/H2><\/P>In früheren Übungen haben wir Widgets zu unserer Web-Mapping-Anwendung hinzugefügt, wie das Search widget<\/A>, um nach Adressen suchen zu können, und das BasemapGallery widget<\/A>, um die Hintergrundkarte ändern zu können.<\/P>

<\/P>

Standardmäßig ist ein Widget ausgeklappt, wenn es zur Ansicht hinzugefügt wird. Ein Nachteil davon ist natürlich, dass es dann viel Platz auf dem Bildschirm einnimmt. Als Lösung bietet die ArcGIS API for Javascript<\/STRONG> das

Expand<\/A>-Widget, mit dem du ein Widget unter einer Schaltfläche verbergen kannst, sodass der Benutzer es selbst ein- und ausklappen kann.<\/P>

<\/P>

Das Standardverfahren hierfür ist:<\/P>

Erstelle ein Widget<\/LI>
Erstelle anschließend ein Expand<\/STRONG>, um dieses Widget darin unterzubringen<\/LI>Füge das Expand<\/STRONG> der Ansicht hinzu<\/LI><\/UL><\/P>Im folgenden Beispiel haben wir das Expand<\/STRONG> für beide Widgets auch noch in eine und dieselbe Gruppe gesteckt (group: "top-right"<\/SPAN>), sodass die BasemapGallery automatisch schließt, wenn das Suchfeld geöffnet wird, und umgekehrt.<\/P><\/P>Diese Methode kannst du auch auf andere Widgets anwenden.<\/P><\/P>

Klicke hier, um das Ein- und Ausklappen von Widgets in Aktion zu sehen.<\/A><\/P>

<\/P>

<!DOCTYPE html><\/><<\/>html<\/>><\/><\/><<\/>head<\/>><\/><\/><<\/>meta<\/> charset<\/>=<\/>"<\/>utf-8"<\/><\/>><\/><\/><<\/>meta<\/> name<\/>=<\/>"<\/>viewport"<\/><\/> content<\/>=<\/>"<\/>initial-scale=<\/>1, maximum-scale=<\/>1, user-scalable=<\/>no"<\/><\/>><\/><\/><<\/>title<\/>><\/>Aan de slag met ArcGIS JavaScript - Widget einklappen

target='_top' href='https:\/\/www.pdok.nl\/introductie\/-\/article\/basisregistratie-topografie-achtergrondkaarten-brt-a-'>BRT Hintergrundkarte<\/a> von <a target='_top' href='https:\/\/www.pdok.nl\/'>PDOK<\/a>"<\/SPAN>,
activeLayer: {
id: "brtachtergrondkaart"
}
})
],
title: "BRT Hintergrundkarte (PDOK)",
id: "brtachtergrondkaart_pdok",
thumbnailUrl: "https:\/\/www.pdok.nl\/o\/iv-pdok-theme\/images\/pdok\/map.jpg"
});

\/\/ Basiskaarten Esr Nederland
var lightGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "9ff6521e85d24df1aa9cd4aebfef748b"}}); \/\/Hellgraues Canvas RD
var darkGrayCanvas_RD_EsriNL = new Basemap({portalItem: ,
content: basemapGallery.domNode,
group: "top-right"
});

var searchWidget = new Search({
container: document.createElement("div"),
view: view,
includeDefaultSources: false
});

searchWidget.sources = [{
locator: new Locator({ url: "https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer"}), // GeocodeServer von Esri Nederland
singleLineFieldName: "SingleLine", // Diese Option ermöglicht die Suche nach Postleitzahl/Hausnummer-Kombination, zum Beispiel: 4181 AE 38
placeholder: searchWidget.allPlaceholder // „Adresse oder Ort finden“ für die English locale, „Adres of plaats zoeken“ für die Nederlandse locale
}]

searchWidgetExpand = new Expand({
expandIconClass: "esri-icon-search",
expandTooltip: searchWidget.label,
view: view,
content: searchWidget.domNode,
expandedtrue ,
group"top-right"
} ) ;

view. UI . ADD ( [ searchWidgetExpand, basemapGalleryExpand] , "top-right" ) ;

} ) ;
26lt;/script26gt;
26lt;/head26gt;
26lt;body26gt;
26lt;div26gt;id3d22viewDiv223e;26lt;/div26gt;
26lt;/body26gt;
26lt;/html26gt;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<|vq_11194|>}

Finde mehr Beiträge mit dem Tag

Kommentare

There are no comments yet

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.