カスタム Experience Builder Widget 内で ArcGIS JavaScript API スタイルの Widget を使用する

GavinRehkemper

<\/HEAD>

過去数ヶ月の間に、「Custom ArcGIS API for JavaScript widgets」（例えばCustom Recenter Widget<\/A>）をExperience Builderウィジェット内で使用する方法についていくつか質問をいただきました。これが現在の使用方法の説明です。より良いまたは異なる方法があれば、ぜひお知らせください！<\/P>

<\/P>

注：2020-07にArcGIS JS API 4.16およびExperience Builder Developer Edition v1.1向けに最終更新されました。<\/EM><\/P><\/P>

1. JavaScript APIウィジェットのビルド<\/H2>ArcGIS API for JavaScriptのドキュメントに従ってカスタムウィジェットを作成する<\/A>手順を実行し、その後Custom Recenter Widget<\/A>を作成してください。これらのガイドはwebpackを使ってファイルをパッケージングしておらず、TypeScriptコンパイラ（tsc<\/CODE>）のみを使って<CODE>*.tsx<\/CODE>ファイルを<CODE>*.js<\/CODE>ファイルに変換しています。<\/P><P><\/P><P><CODE>tsc<\/CODE>コマンドを最後に実行して<CODE>tsx<\/CODE>ファイルを<CODE>js<\/CODE>ファイルに変換した後、JSファイル（<CODE>Recenter.js<\/CODE>）をコピーして次のステップでカスタムExperience Builderウィジェットに組み込みます。<\/P><P><\/P><H2 id="toc-hId--727302689" id="toc-hId--727302689">2. カスタムExperience Builderウィジェットの作成<\/H2><P>新しいカスタムExperience Builderウィジェットを作成します。すぐに始める最も簡単な方法は、おそらく<CODE>simple<\/CODE>ウィジェットをコピーすることです。<\/P><P><\/P><P>JS APIウィジェットはMap Viewと連携するため、Experience Builderウィジェットは同じExperienceアプリ内のMap Viewウィジェットを参照するためのインフラが必要です。最も簡単な方法はExperienceを作成し、ウィジェットを追加してから、作業中のアプリの設定（<CODE>server\\src\\public\\apps\\Z\\resources\\config<\/CODE>）に移動し、ウィジェット設定内で<CODE>"useMapWidgetIds": ["widget_ZZ"]<\/CODE>を設定することです。<\/P><P><\/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><\/P><P>ウィジェットの <CODE>manifest.json<\/CODE> にて、以下のように <CODE>jimu-arcgis<\/CODE> 依存関係を含めてください:<\/P><PRE class="lia-code-sample line-numbers language-none"><CODE>"dependency": ["jimu-arcgis"],‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍<\/<\span></SPAN></SPAN>

<\/>\n

ステップ1で取得したJSファイル（Recenter.js）を、ウィジェットファイル内の widget.tsx と同じ階層（ src/runtime 内）にコピーします。<\/>\n

<code>widget.tsx</code> 内で以下のようにインポートします:<\/>\n

import Recenter = require("./Recenter");‍‍‍<SPAN class="line-numbers-rows"><SPAN><<EMOJI_3></SPAN></SPAN>

<code>JimuMapViewComponent</code> のコールバック内やMap Viewのインスタンスがある任意の場所でRecenterウィジェットを利用します:<\/>\n

<span class="token function">render</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>

次のステップ<\/H2>次の論理的なステップは、おそらくテキストをマップ上ではなくExperience Builderウィジェット内に配置するようにウィジェットを変更することです。それはあなたにお任せします。また、作成している他のウィジェットやウィジェットのアイデアもぜひ投稿してください！<\/P><\/BODY><\/HTML>

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