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

Použití widgetu ve stylu ArcGIS JavaScript API v rámci vlastního widgetu Experience Builder

GavinRehkemper

<\/HEAD>

V posledních měsících jsme obdrželi několik dotazů ohledně toho, jak používat "Custom ArcGIS API for JavaScript widgets" (jako je Custom Recenter Widget<\/A>) uvnitř widgetu Experience Builder. Toto jsou aktuální instrukce, jak to udělat. Mohou existovat lepší nebo jiné způsoby - pokud o nějakém víte, dejte nám prosím vědět!<\/P>

<\/P>

Poznámka: Poslední aktualizace 2020-07 pro ArcGIS JS API 4.16 a Experience Builder Developer Edition v1.1.<\/EM><\/P><\/P>

1. Vytvořte JavaScript API Widget<\/H2>Postupujte podle pokynů v dokumentaci ArcGIS API for JavaScript, jak vytvořit vlastní widget<\/A> a poté vytvořte Custom Recenter Widget<\/A>. Tyto návody nepoužívají webpack k balení souborů - používají pouze TypeScript kompilátor (tsc<\/CODE>) k převodu <CODE>.tsx<\/CODE> souborů na <CODE>.js<\/CODE> soubory.<\/P><\/P>Poté, co jednou spustíte příkaz <CODE>tsc<\/CODE> k převodu <CODE>tsx<\/CODE> souborů na <CODE>js<\/CODE> soubory, zkopírujte JS soubor (<CODE>Recenter.js<\/CODE>) a pokračujte dál - tento soubor zkopírujeme do našeho vlastního widgetu Experience Builder v dalším kroku.<\/P><\/P><H2 id="toc-hId--727302689" id="toc-hId--727302689">2. Vytvořte vlastní widget Experience Builder<\/H2>Vytvořte nový vlastní widget Experience Builder. Nejjednodušší způsob, jak rychle začít, je pravděpodobně zkopírovat <CODE>simple<\/CODE> widget.<\/P><\/P>Jelikož JS API Widget komunikuje s Map View, váš widget Experience Builder bude potřebovat infrastrukturu pro odkazování na Map View widget ve stejné aplikaci Experience. Nejjednodušší způsob je vytvořit Experience, přidat váš widget a poté přejít do konfigurace vaší pracovní aplikace (<CODE>server\src\public\apps\Z\resources\config<\/CODE>) a nastavit <CODE>"useMapWidgetIds": ["widget_ZZ"],<\/CODE> v konfiguraci widgetu.<\/P><\/P><IMG __jive_id="496581" alt="example config" class="jive-emoji jive-image image-2 j-img-original" src="https:\/\/us.v-cdn.net\/6038851\/uploads\/legacyfs\/online\/496581_example-config-highlight.png" \/><\/P><\/P>Ve vašem souboru <CODE>manifest.json<\/CODE> widgetu zahrňte závislost <CODE>jimu-arcgis<\/CODE> přidáním:<\/P><PRE class="lia-code-sample line-numbers language-none"><CODE>"dependency": ["jimu-arcgis"],‍‍‍‍<\/<\/
<\/Zkopírujte JS soubor, který jste měli z kroku 1 (`Recenter.js<\/<CODE>) do souborů vašeho widgetu, na stejnou úroveň jako <CODE>widget.tsx<\/<CODE> (uvnitř <CODE>src/runtime<\/<CODE>).<\/<\/Uvnitř <CODE>widget.tsx<\/<CODE>, importujte tento soubor:<\/<\/<PRE class="lia-code-sample line-numbers language-none"><CODE>import Recenter = require(".\Recenter");‍‍‍‍`<\/<\/Následně použijte Recenter widget uvnitř callbacku JimuMapViewComponent<\/<CODE>, nebo kdekoliv máte instanci Map View:<\/<\/<PRE class="lia-code-sample line-numbers language-none"><CODE>render( ) { return ( <div className="widget-demo jimu-widget m-2"> {this.props.hasOwnProperty("useMapWidgetIds") && this.props.useMapWidgetIds && this.props.useMapWidgetIds.length === 1 && ( <JimuMapViewComponent useMapWidgetIds={this.props.useMapWidgetIds} onActiveViewChange={(jmv: JimuMapView) => { if (jmv) { jmv.view.when(function () { const recenter = new Recenter({ view: jmv.view, initialCenter: [-100.33, 43.69], }); jmv.view.ui.add(recenter, "top-right"); }); } }} /> )} Simple Widget </div> ); }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍</PRE><\/<\/Aby výše uvedený kód fungoval, budete muset importovat JimuMapViewComponent a JimuMapView na začátku vašeho widgetu takto:<\/<\/<PRE class="lia-code-sample line-numbers language-none"><CODE>import { JimuMapViewComponent, JimuMapView } from "jimu-arcgis";‍<\/<\/Pokud bude vše úspěšné, uvidíte informační okno v pravém horním rohu mapy, když přidáte svůj widget do Experience (a ručně jej nakonfigurujete tak, aby odkazoval na mapu):<\/<\/<\/P>
<\/P>

Další kroky<\/H2>Dalším logickým krokem by pravděpodobně bylo upravit widget tak, aby text byl uvnitř Experience Builder widgetu místo na mapě. Nechám to na vás, a také se prosím neváhejte podělit o další widgety a nápady na widgety, které vytváříte!<\/P><\/BODY><\/HTML>

Najděte více příspěvků označených jako

Komentáře

VaddineniSrinivasulu

Hello @GavinRehkemper

I am building a custom widget which wraps some react widget loading via script tag inside widget.tsx. the widget loads and runs properly in blank templates. However widget doesnt loads when i use different templates like webbapp builder classic, etc. i see errors in console saying Error: multiple define in init.js

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Nový zde? Zaregistrujte si bezplatný účet.

Rychlé odkazy

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