Entityを扱う¶

APIを用いたデータ配置¶

デジタル地球上にデータを配置してみましょう。データの配置方法は、Mapray Cloudを利用する方法と、直接mapray JSのAPIを利用する方法があります。ここでは、後者のmapray JSのAPIを利用する方法をマスターします。

はじめにのセクションの動作の基本でご説明しましたが、 Mapray Cloudでは、様々なデータを管理し、それと連動してmapray JSでデータを表示できるのですが、 APIを利用すると、Mapray Cloudを使わずに地物（フィーチャー）をデジタル地球上に配置できます。このようなデータをMaprayではEntityと呼びます。ち

Entityの種類¶

Entityは以下の種類があります。

種類	内容	class
Text	テキスト	TextEntity
Pin	ピン (いわゆるマーカー)	PinEntity
Image	画像アイコン	ImageIconEntity
Line	線	MarkerLineEntity
Path	パス（連続線）	PathEntity
Polygon	ポリゴン	PolygonEntity
Model	３次元モデル	ModelEntity

PinEntityを使ってみる¶

ピンエンティティはピンを表示するためのエンティティです。複数のピンを1つのエンティティ内に持つことができ、個々のピンは Entry と呼ばれます。

ピンの種類のほか、サイズや表示色を指定することができます。これらの設定は、エンティティおよび、 Entry 単位で指定できます。

Entity については、ウェブサイトのEntities、 Entry については、こちらを参照してください。

ピンの種類¶

ピンの Entry は3種類あります。それぞれ、追加メソッドにより指定できます。

ピン	内容	追加メソッド
Pin	ピン	addPin
TextPin	文字を含んだピン	addTextPin
MakiIconPin	アイコンを含んだピン	addMakiIconPin

アイコンについて¶

アイコンは Mapbox の Maki icons を Mapray のサイトで配信しています。拡張子（.svg）を除いた名称で指定します。たとえば、家のアイコンであれば home と指定します。

pinEntity.addMakiIconPin( "home", new mapray.GeoPoint( 138.7, 35.3, 3780 ) );

主なメソッド¶

メソッド	動作
setBGColor	背景色を指定します
setFGColor	文字やアイコンの色を指定します
setVisibility	可視性フラグを指定します
setPickable	pick による選択対象とするかを指定します

Warning

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

3780mに３つのマーカーを並べる¶

PinEntity と StandardUIViewer を使い、地表にアイコン Pin オブジェクトを表示する例を示します。 3種類のピンを表示します。

前回のコードからハイライト部分を追加してください。

<!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>

    <script>
        // Set up your apikey, which can be created in Mapray Cloud.
        const apikey = "<YOUR_MAPRAY_API_KEY>";
    // The StandardUIView in the ui package includes mouse-based camera manipulation.
        const uiviewer = new maprayui.StandardUIViewer( "mapray-container", apikey);
        uiviewer.setCameraPosition({
                longitude: 138.942423,
                latitude: 35.236020,
                height: 10000
            });
            uiviewer.setLookAtPosition({
                longitude: 138.729802,
                latitude: 35.363965,
                height: 3000
            });

        const pinEntity = new mapray.PinEntity( uiviewer.viewer.scene );
        pinEntity.altitude_mode = mapray.AltitudeMode.ABSOLUTE;

        pinEntity.addPin( new mapray.GeoPoint( 138.71934, 35.36, 3780 ), { size: 15 } );
        pinEntity.addTextPin( "Pin", new mapray.GeoPoint( 138.71934, 35.39, 3780 ), { size: 15 } );
        pinEntity.addMakiIconPin( "car", new mapray.GeoPoint( 138.71934, 35.37, 3780 ) );

        uiviewer.viewer.scene.addEntity( pinEntity );

    </script>
</html>

Info

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

富士山の山肌に沿わせる¶

mapray.AltitudeModeを切り替えることで、高さを、絶対、相対、地面に沿わせる選択ができます。ここでは、地面に沿わせる設定に切り替えてみます。 AltitudeModeをClampモードに変更します。

<!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>

    <script>
        // Set up your apikey, which can be created in Mapray Cloud.
        const apikey = "<YOUR_MAPRAY_API_KEY>";
    // The StandardUIView in the ui package includes mouse-based camera manipulation.
        const uiviewer = new maprayui.StandardUIViewer( "mapray-container", apikey);
        uiviewer.setCameraPosition({
                longitude: 138.942423,
                latitude: 35.236020,
                height: 10000
            });
            uiviewer.setLookAtPosition({
                longitude: 138.729802,
                latitude: 35.363965,
                height: 3000
            });

        const pinEntity = new mapray.PinEntity( uiviewer.viewer.scene );
        pinEntity.altitude_mode = mapray.AltitudeMode.CLAMP;

        pinEntity.addPin( new mapray.GeoPoint( 138.71934, 35.36, 3780 ), { size: 15 } );
        pinEntity.addTextPin( "Pin", new mapray.GeoPoint( 138.71934, 35.39, 3780 ), { size: 15 } );
        pinEntity.addMakiIconPin( "car", new mapray.GeoPoint( 138.71934, 35.37, 3780 ) );

        uiviewer.viewer.scene.addEntity( pinEntity );

    </script>
</html>