コンテンツにスキップ

MarkerLine Entity

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

パスエンティティとの違いとして、頂点座標を後から編集することができます。

主なメソッド

メソッド 動作
addPoints 連続線が通る頂点座標を追加します
setLineWidth 線の太さ [px] を指定します
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]); のように設定します。

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

頂点座標について

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

1
2
3
4
const start = { longitude: 139.7528, latitude: 35.6852, altitude: 350 };
const end   = { longitude: 139.7454, latitude: 35.6586, altitude: 350 };
lineEntity.addPoints( [start.longitude, start.latitude, start.altitude,
                        end.longitude, end.latitude, end.altitude] );

サンプルコード

MarkerLineEntity を使い、地表に線を表示する例を示します。 このサンプルコードでは、東京駅から東京タワーまでの経路を表示します。

 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
<!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 lineEntity = new mapray.MarkerLineEntity( uiviewer.viewer.scene );
    lineEntity.altitude_mode = mapray.AltitudeMode.CLAMP;

    lineEntity.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
    ] );
    lineEntity.setColor( [ 1.0, 0.6, 0.0 ] );
    lineEntity.setOpacity( 1.0 );
    lineEntity.setLineWidth( 5.0 );

    uiviewer.viewer.scene.addEntity( lineEntity );

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

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

Info

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

頂点座標の編集

頂点座標を編集するには、 MarkerLineEntity.replacePointAt() メソッドで指定の頂点を変更し、 MarkerLineEntity.removePointAt() や MarkerLineEntity.removeAllPoints() メソッドで指定の頂点を削除します。

1
2
3
lineEntity.replacePointAt( 1, [ 139.76, 35.68, 15.0 ] );
lineEntity.removePointAt( 2 );
lineEntity.removeAllPoints();