Polygon Entity¶

ポリゴンエンティティは多角形を表示するためのエンティティです。

多角形の頂点座標のほか、表示色や不透明度、押し出し量を指定して立体的な形状を表現できます。また、ポリゴン内に穴を作成したり、複雑な形状を表示することも可能です。

主なメソッド¶

メソッド	動作
addOuterBoundary	外側境界を追加します
addInnerBoundary	内側境界を追加します
setExtrudedHeight	押し出し量 [m] を指定します
setColor	ポリゴンの表示色を指定します
setOpacity	ポリゴンの不透明度（ 1.0 ~ 0.0 ）を指定します
setVisibility	可視性フラグを指定します
setPickable	pick による選択対象とするかを指定します

Note

不透明度は 1.0 が完全不透明で、0.0 が完全透明です。

Warning

表示色は、RGB 値を各 0.0 ~ 1.0 の範囲で指定し、たとえば赤色は entity.setColor([1.0, 0.0, 0.0]); のように指定します。

その他メソッドや詳細はリファレンスマニュアルを参照してください。

頂点座標について¶

PolygonEntity.addOuterBoundary, PolygonEntity.addInnerBoundary メソッドでは、多角形の頂点座標（経度、緯度、高度）を [lon_0, lat_0, alt_0, lon_1, lat_1, alt_1, ...] の形式で追加します。最初の頂点から順に頂点を結び、最後の頂点と最初の頂点を結んだ多角形が描画されます。

サンプルコード¶

PolygonEntity を使い、地表にポリゴンを表示する例を示します。このサンプルコードでは、五稜郭をカバーするポリゴンを表示します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://resource.mapray.com/mapray-js/v0.9.6/mapray.min.js"></script>
        <script src="https://resource.mapray.com/ui/v0.9.6/maprayui.min.js"></script>
        <link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
        <style>
            html, body, div#mapray-container { margin: 0; padding: 0; height: 100%; }
        </style>
    </head>

    <body>
        <div id="mapray-container"></div>
    </body>
</html>

<script>
    // Set up your apikey, which can be created in Mapray Cloud.
    const apikey = "<YOUR_MAPRAY_API_KEY>";
    const uiviewer = new maprayui.StandardUIViewer( "mapray-container", apikey);

    const polygon = new mapray.PolygonEntity( uiviewer.viewer.scene );
    polygon.altitude_mode = mapray.AltitudeMode.CLAMP;

    // Goryokaku
    polygon.addOuterBoundary([
        140.75466, 41.79909, 10,    140.75466, 41.79742, 10,
        140.75356, 41.79600, 10,    140.75485, 41.79567, 10,
        140.75492, 41.79460, 10,    140.75622, 41.79501, 10,
        140.75716, 41.79429, 10,    140.75843, 41.79563, 10,
        140.76048, 41.79634, 10,    140.75908, 41.79760, 10,
        140.75887, 41.79923, 10,    140.75674, 41.79871, 10,
    ]);
    polygon.setColor( [ 0, 0, 1.0 ] );  // blue
    polygon.setOpacity( 0.7 );  // alpha

    uiviewer.viewer.scene.addEntity( polygon );

    uiviewer.setCameraPosition({
        longitude: 140.75589,
        latitude: 41.78948,
        height: 850
    });

    uiviewer.setLookAtPosition({
        longitude: 140.75686,
        latitude: 41.79704,
        height: 5.0
    });
</script>

Info

このサンプルコードは、<YOUR_MAPRAY_API_KEY>を、あなたのMapray CloudアカウントのAPI Keyに置き換えるまで、期待通りに動作しません。

内側境界¶

PolygonEntity.addInnerBoundary を指定することで、ポリゴンの内側に穴を作ることができます。複数の内側境界を指定することや、穴の中に外側境界をつくり多重構造にすることも可能です。

これを使い、先ほどのポリゴンに穴を作るための追加コードの例を示します。この追加コードでは、郭内（堀の内側）の部分に穴をあけ、堀にのみポリゴンを表示します。

    // Goryokaku
    polygon.addOuterBoundary([ /** omit **/ ]);
    polygon.addInnerBoundary([
        140.75494, 41.79876, 10,
        140.75497, 41.79734, 10,
        140.75402, 41.79612, 10,
        140.75586, 41.79571, 10,
        140.75712, 41.79466, 10,
        140.75820, 41.79584, 10,
        140.75990, 41.79641, 10,
        140.75877, 41.79753, 10,
        140.75859, 41.79893, 10,
        140.75675, 41.79849, 10,
    ]);
    polygon.addInnerBoundary([
        140.75503, 41.79563, 10,
        140.75511, 41.79485, 10,
        140.75609, 41.79513, 10,
        140.75566, 41.79548, 10,
    ]);
    // omit ...

Note

PolygonEntity.addInnerBoundary で指定する内側境界は、 PolygonEntity.addOuterBoundary で指定する外側境界の内側に配置されている必要があります。

押し出し機能¶

PolygonEntity.setExtrudedHeight を使用して、立体的な形状を表現することができます。押し出し量 [m] を指定することで、ポリゴンが上方向に押し出され、ボリュームがあるポリゴンが表示されます。

これを使い、先ほどのポリゴンで押し出し機能を使用する追加コードの例を示します。この追加コードでは、堀部分のポリゴンを上方向に \(50 m\) 押し出した立体形状を表示します。

    // When using the extruded height, select an altitude mode other than clamp.
    // polygon.altitude_mode = mapray.AltitudeMode.CLAMP;
    polygon.altitude_mode = mapray.AltitudeMode.ABSOLUTE;
    polygon.setExtrudedHeight( 50 );
    // omit ...

Note

押し出し機能を使用するには、 AltitudeMode を CLAMP 以外 に設定する必要があります。