GeoJSON Loader¶

GeoJSONLoader を利用して GeoJSON ファイルを読み込むことができます。

主なメソッド¶

メソッド	動作
load	読み込みを実行します
cancel	読み込みを取り消します

コールバック関数¶

初期化時にコールバック関数を設定することで、 Entity の生成などをコントロールできます。すべての Entity に共通する主なコールバック関数は以下の通りです。

コールバック関数	動作
onLoad	シーンの読み込みが終了したときに呼び出される関数
onEntity	読み込み処理の中で Entity が生成されるたびに呼び出される関数
getAltitudeMode	AltitudeMode を指定する関数
getAltitude	高度を指定する関数
getVisibility	可視性フラグを指定する関数

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

サンプルコード¶

GeoJSONLoader を使い、 GeoJSON を読み込み表示する例を示します。

このサンプルコードでは、 html と同じディレクトリに配置された GeoJSON ファイル（mt_fuji.json）を表示します。

<!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>
    async function main() {
        // 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);

        // Wait for the initialization process to complete.
        await uiviewer.viewer.init_promise;

        const loader = new mapray.GeoJSONLoader( uiviewer.viewer.scene, "./mt_fuji.json", {
            onLoad: ( loader, isSuccess ) => { console.log( "success load geojson" ) },
            getAltitude: ( feature ) => 3776.0,
            onEntity: ( loader, entity, feature ) => {
                if ( feature.properties ) {
                    console.log( feature.properties );
                }
                // if onEntity is specified, entities must be added manually.
                loader.scene.addEntity( entity );
            }
        });
        await loader.load();
    }

    main();
</script>

Info

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

Warning

サンプルコードをローカル PC で直接 html ファイルをブラウザで開くと、 CORS により GeoJSON がロードできません。 Python 等で簡易 HTTP サーバを立ち上げて、サーバ経由で html ファイルを開いてください。

GeoJSON¶

GeoJSON は、地理情報を表現するための JSON 形式のフォーマットで、 RFC7946 で定義されています。 Mapray では、 2D データとして GeoJSON をサポートしており、データを読み込んで表示することができます。

GeoJSON の基本的な構造の例を以下に示します。

mt_fuji.json
{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [ 138.727364, 35.360624 ]
        },
        "properties": {
            "prop0": "red",
            "prop1": 0.0,
            "prop2": { "this": "that" }
        }
    }]
}

GeoJSON と Entity の対応¶

GeoJSON のジオメトリは、表示時に対応するエンティティとして表現されます。以下の表に、ジオメトリとそれに対応するエンティティの関係を示します。

Geometry	Entity
Point, MultiPoint	PinEntity
LineString, MultiLineString	MarkerLineEntity
Polygon, MultiPolygon	PolygonEntity
GeometryCollection	-

Warning

GeometryCollection は 非対応 です。各 Feature には単一のジオメトリを含めるようにしてください。

GeoJSON の Altitude¶

Mapray では Coordinates の 3番目の要素を高度として解釈し表現します。そのため、下の GeoJSON の場合は高度 3780[m] が反映されます。

また、 Coordinates 要素と getAltitude コールバック関数で高度が指定された場合は、 getAltitude コールバック関数が優先されます。

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [ 138.727364, 35.360624, 3780 ]
        }
    }]
}