コンテンツにスキップ

Path Entity

パスエンティティは太さ付き連続線を表示するためのエンティティです。 連続線が通る頂点座標のほか、線の太さや表示色、不透明度などを指定できます。

マーカーラインエンティティとの違いとして、表示範囲の制御が可能です。

主なメソッド

メソッド 動作
addPoints 連続線が通る頂点座標と始点からの距離を追加します
setUpperLength 距離の上限値を指定します
setLowerLength 距離の下限値を指定します
setLineWidth 線の太さ [px] を指定します
setColor 線の表示色を指定します
setOpacity 線の不透明度（ 1.0 ~ 0.0 ）を指定します
setVisibility 可視性フラグを指定します
setPickable pick による選択対象とするかを指定します

Note

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

Warning

  • 距離の上限および下限のデフォルト値は 0.0 です。これにより デフォルトでは線が表示されません 。必ず PathEntity.setUpperLength で表示範囲を指定してください。
  • 表示色は、RGB 値を各 0.0 ~ 1.0 の範囲で指定し、たとえば赤色は entity.setColor([1.0, 0.0, 0.0]); のように設定します。

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

頂点座標について

PathEntity.addPoints メソッドでは、連続線の通る頂点座標（経度、緯度、高度）を [lon_0, lat_0, alt_0, lon_1, lat_1, alt_1, ...] の形式で追加します。 最初の頂点が直線の始点となり、次の座標が終点かつ次の直線の始点、以降同様にして連続して線が描画されます。

また、始点からの距離を示す配列（ length_array ）も必要です。 距離配列は必ず頂点の数と同じ長さで、値が昇順（または降順）である必要があります。 各距離の値は、実際の距離と一致する必要はなく任意に設定可能で、各頂点に対応します。

これにより、 PathEntity.setUpperLength と PathEntity.setLowerLength で線の表示範囲を制御できます。

表示範囲の制御

PathEntity.setLowerLength で線の開始位置を、 PathEntity.setUpperLength で終了位置を指定します。 たとえば、以下のコードでは、 start と mid の中間から、 mid と end の中間までの直線が表示されます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const start = { longitude: 139.7528, latitude: 35.6852, altitude: 350 };
const mid   = { longitude: 139.7434, latitude: 35.6248, altitude: 350 };
const end   = { longitude: 139.7454, latitude: 35.6586, altitude: 350 };
const points = [start.longitude, start.latitude, start.altitude,
                mid.longitude, mid.latitude, mid.altitude,
                end.longitude, end.latitude, end.altitude];
const length_array = [0.0, 0.5, 1.0];
pathEntity.addPoints( points, length_array );
pathEntity.setLowerLength( 0.25 )
pathEntity.setUpperLength( 0.75 )

サンプルコード

PathEntity を使い、地表に線を表示する例を示します。 length_array には開始地点から各頂点までの距離 [m] をセットしています。 PathEntity.setUpperLength( 3000 ) とすることで線の上限値を 3000 として、開始地点から 3000m までの線を表示しています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!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 pathEntity = new mapray.PathEntity( uiviewer.viewer.scene );
    pathEntity.altitude_mode = mapray.AltitudeMode.CLAMP;

    pathEntity.setColor( [ 1.0, 0.0, 0.0 ] );
    pathEntity.setLineWidth( 5.0 );
    pathEntity.addPoints( [
        139.76714237813070, 35.681246972862404, 15.0,
        139.76376063922717, 35.677833449440776, 15.0,
        139.76106049760077, 35.678414988841500, 15.0,
        139.75981913503378, 35.675073593532060, 15.0,
        139.75352903210440, 35.677624480820974, 15.0,
        139.74918910204863, 35.670520839071050, 15.0,
        139.74640628513407, 35.664495333789300, 15.0,
        139.74361382450707, 35.661495821406850, 15.0,
        139.74299376736124, 35.660192687142900, 15.0,
        139.74572104159300, 35.658998091235944, 15.0,
        139.74543152072437, 35.658588148060400, 15.0,
    ], [
        0.0, 487.75121946635, 740.34927426616,
        1128.88078584565, 1764.62205846519,
        2647.42911840732, 3363.84534832629,
        3782.50670700526, 3938.03396340835,
        4218.26860375579, 4270.88277543241,
    ] );
    pathEntity.setUpperLength( 3000 );

    uiviewer.viewer.scene.addEntity( pathEntity );

    uiviewer.setCameraPosition({
        longitude: 139.76486,
        latitude: 35.65434,
        height: 3200
    });

    uiviewer.setLookAtPosition({
        longitude: 139.755616,
        latitude: 35.669735,
        height: 3.0
    });
</script>

Info

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