Point Geometry¶

Mapray では、 Point および MultiPoint ジオメトリを読み込み、 PinEntity として表示することができます。

Point および MultiPoint ジオメトリの基本的な構造の例を以下に示します。

{
    "type": "Point",
    "coordinates": [ 100.0, 0.0 ]
},
{
    "type": "MultiPoint",
    "coordinates": [
        [ 100.0, 0.0 ],
        [ 101.0, 1.0 ]
    ]
}

コールバック関数¶

GeoJSONLoader のオプションとして、 PinEntity のメソッドに対応するコールバック関数を指定できます。

コールバック関数	動作
getPointBGColor	背景色を指定する関数
getPointFGColor	文字やアイコンの色を指定する関数
getPointSize	ポイントの大きさを指定する関数
getPointIconId	アイコンID を指定する関数

Note

アイコンID を指定した場合、 Point は MakiIconPin として表現されます。

Warning

GeoJSONLoader の注意点として、 Entry 単位で bg_color, fg_color, size にデフォルト値が設定されます。
onEntity コールバックはエンティティ単位の指定となるため、これらの値を指定しても優先度の関係上により 反映されない ことに注意してください。
Entry 等については、こちらを参照してください。

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

サンプルコード¶

GeoJSONLoader を使い、 Point ジオメトリの GeoJSON を読み込み、表示する例を示します。

このサンプルコードでは、 html と同じディレクトリに配置された GeoJSON ファイル（tokyo_evacuation_area_point.json）を表示します。このファイルは、Ｇ空間情報センターから取得した実データです。

GeoJSON の "洪水" プロパティを参照して背景色を変更します。東京都の避難所のうち、洪水時に対応している避難所を青色、対応していない避難所を赤色で表示します。

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

        uiviewer.viewer.attribution_controller.setCompact( true );
        uiviewer.viewer.attribution_controller.addAttribution(
            "<a href=\"https://www.geospatial.jp/ckan/dataset/hinanbasho/resource/3abdb68d-f91a-4d4d-9643-2d6ccc6e63fa\">\
                指定緊急避難場所データ_13東京都 by 一般社団法人社会基盤情報流通推進協議会: Creative Commons - Attribution</a>"
        );

        const loader = new mapray.GeoJSONLoader( uiviewer.viewer.scene, "./tokyo_evacuation_area_point.json", {
            getAltitudeMode: ( feature ) => mapray.AltitudeMode.CLAMP,
            getPointIconId: ( feature ) => "circle-11",
            getPointSize: ( feature ) => 10,
            getPointBGColor: ( feature ) => {
                if ( feature.properties ) {
                    const prop = feature.properties;
                    const supported = prop["洪水"];
                    // Determine the color depending on whether the shelter is for flood disaster or not.
                    return supported == "◎" ? [ 0.0, 1.0, 1.0 ] : [ 1.0, 0.0, 0.0 ];
                }
                return [ 0.0, 0.0, 0.0 ];
            }
        });
        await loader.load();

        uiviewer.setCameraPosition({
            longitude: 139.437581,
            latitude: 35.093447,
            height: 50000
        });

        uiviewer.setLookAtPosition({
            longitude: 139.486122,
            latitude: 35.651969,
            height: 40
        });
    }

    main();
</script>

Info

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

実行結果¶

Warning

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