APEXアプリケーションへの公開済プロジェクトの埋込み

7.4 APEXアプリケーションへの公開済プロジェクトの埋込み

Spatial Studio WebコンポーネントをAPEXアプリケーションにロードし、マップ・ビジュアライゼーションをレンダリングできます。

自分のAPEXワークスペースにサインインします(ワークスペースへのサインインを参照)。
Spatial Studio Webコンポーネントを埋め込むターゲット・アプリケーション(アプリケーションの作成を参照)を作成します。

ターゲット・アプリケーションに静的コンテンツ・リージョンを追加し、次のコードで示すように、そのコンテンツを編集してそのWebコンポーネントを含めます。

<script src="https://<host_name>:4040/spatialstudio/api/v1/embeddable.js?ex=kobinding"></script>

<div style="width:100%; height: 50vh;">
    <spatial-studio-project 
        id="spatial-studio-project-1"
        server-url="https://<host_name>:4040/spatialstudio/"
        project-id="d241e77f3e46420a8509ce86ba44f00b"
        token="eyJ0eXAiOiJz..."
        project-header="off"
        layers-list="on">
    </spatial-studio-project>
</div>

// Setup css variables that conflict between APEX and Studio
<style>
    body {
        --sgtech-bg: var(--rbr-blue);
        --oj-heading-text-color: white;

        --ut-region-header-text-color: white;
        --ut-region-border-color: white;
        --ut-footer-text-color: white;

        max-width: 100%;

        --oj-core-spacing-3x: 0px;
        --ut-region-body-padding-y: 0px;
        --ut-region-body-padding-x: 0px;
    }

    div.sgtech-home-container {
        max-height: 100%;
    }
</style>

APEX環境ではすでにKnockoutJSメカニズムが実行されているため、必ず、問合せパラメータ?ex=kobindingを使用してそれ独自のKnockoutJS実行を除外してください。

次の図では、APEXアプリケーションにおける、前述のHTMLコードでラップされた静的コンテンツ・リージョンを示しています。

図7-1 静的コンテンツの構成

「図7-1 静的コンテンツの構成」の説明

オプションで、同じ静的コンテンツ・タイプ・リージョンについて、<spatial-studio-project>コードの横にあるスクリプト・ブロック内に対話型コードを追加できます。

<script>
    const studioProjectElement = document.getElementById('spatial-studio-project-1');

    studioProjectElement.addEventListener('features_selected', (event) => {			
        const selectionObjects = event.detail.value;
        console.log(JSON.stringify(selectionObjects));
    }
</script>

オプションで、動的アクションを、実行可能JavaScriptコードで対話型グリッド表に追加できます。
次のスクリプトでは、選択したレコードをIDがTABLEREGIONの対話型グリッドから取得しマップ内の対応するフィーチャをフィルタする例を示しています。
```
const spatialStudioProjectElement = document.getElementById('spatial-studio-project-1');

const grid = apex.region('TABLEREGION').widget().interactiveGrid('getViews', 'grid');
const model = grid.model;
const selectedRecords = grid.getSelectedRecords();

const COLUMN_NAME = 'REP_NAME';
const LAYER_ID = 'c61ad9c582a8e173a83765e1ccb261fe';

if (selectedRecords.length > 0){
    const selectedRepNames = selectedRecords.map(currentSelectedRecord => {
        return model.getValue(currentSelectedRecord, COLUMN_NAME)
    });

    const VALUES = selectedRepNames;

    spatialStudioProjectElement.filterFeatures(LAYER_ID, COLUMN_NAME, VALUES);
} else {
    spatialStudioProjectElement.clearFilters && spatialStudioProjectElement.clearFilters(LAYER_ID);
}
```
次の図では、APEXアプリケーションにおける、動的アクションにラップされた前述のスクリプトJavaScriptコードを示しています。

図7-2 動的アクションの構成

「図7-2 動的アクションの構成」の説明
次の図では、APEXアプリケーションにおける、Spatial Studio Webコンポーネントを使用して生成されたマップ・ビジュアライゼーションを示しています。

図7-3 APEXにおけるマップ・ビジュアライゼーション

「図7-3 APEXにおけるマップ・ビジュアライゼーション」の説明

親トピック: サードパーティWebアプリケーションへの公開済プロジェクトの埋込み