7.2 Spatial Studio Webコンポーネントの基本的な使用方法

Spatial Studio WebコンポーネントをHTMLページに埋め込んでWebアプリケーションで公開済プロジェクトをロードおよび表示する方法について学習します。

次に、JavaScriptコードで埋め込むためのSpatial Studio Webコンポーネントの基本的な使用方法を示します。<script>タグではHTMLファイル内のembeddable.jsが参照されることに注意してください。

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

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

表7-1 Spatial Studio Webコンポーネントの埋込みのためのサポートされている属性

属性名	説明
id	要素の識別とそのメソッドへのアクセスのための一意のID。
server-url	Spatial StudioサーバーのURL。
project-id	ロードする公開済プロジェクトのID。
token	Spatial Studioアプリケーションで生成されたoauthトークン。
project-header	プロジェクト・ヘッダーの表示を"on"または"off"にします。
layers-list	レイヤー・リストとすべてのスタイル設定パネルの表示を"on"または"off"にします。