Polygon Geometry¶

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

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

{
    "type": "Polygon",
    "coordinates": [
        [
            [ 100.0, 0.0 ],
            [ 101.0, 1.0 ],
            [ 102.0, 2.0 ],
            [ 100.0, 0.0 ]
        ]
    ]
},
{
    "type": "MultiPolygon",
    "coordinates": [
        [
            [ [ 100.0, 0.0 ], [ 101.0, 1.0 ], [ 102.0, 2.0 ], [ 100.0, 0.0 ] ]
        ],
        [
            [ [ 100.0, 0.0 ], [ 101.0, 0.0 ], [ 101.0, 1.0 ], [ 100.0, 1.0 ], [ 100.0, 0.0 ] ],
            [ [ 100.2, 0.2 ], [ 100.2, 0.8 ], [ 100.8, 0.8 ], [ 100.8, 0.2 ], [ 100.2, 0.2 ] ]
        ]
    ]
}

コールバック関数¶

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

コールバック関数	動作
getFillColor	塗りつぶし色を指定する関数
getExtrudedHeight	押し出し高さ [m] を指定する関数

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

サンプルコード¶

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

このサンプルコードでは、 html と同じディレクトリに配置された GeoJSON ファイル（tokyo_population.json）を表示します。このファイルは、国土交通省から取得した実データです。

GeoJSON の POP2010 プロパティを参照して塗りつぶし色を変更します。東京都の 1km メッシュ辺りの人口数に応じて、ポリゴンをグラデーション表示します。

<!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=\"http://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-mesh1000.html\">\
                国土数値情報　ダウンロードサービス 1kmメッシュ別将来推計人口（H29国政局推計）（shape形式からGeoJSON形式に変換）</a>"
        );

        const loader = new mapray.GeoJSONLoader( uiviewer.viewer.scene, "./tokyo_population.json", {
            getAltitudeMode: ( feature ) => mapray.AltitudeMode.CLAMP,
            getFillColor: ( feature ) => {
                if ( feature.properties ) {
                    const prop = feature.properties;
                    if ( prop.POP2010 ) {
                        // Determine the color depending on whether the population density is above a certain number.
                        const pop2010 = prop.POP2010;
                        return pop2010 > 20000 ? [ 1.0, 0.0, 0.0, 0.5 ]:
                               pop2010 > 15000 ? [ 1.0, 0.3, 0.0, 0.5 ]:
                               pop2010 > 10000 ? [ 1.0, 0.6, 0.0, 0.5 ]:
                               [ 1.0, 1.0, 0.0, 0.5 ];
                    }
                }
                return [ 1.0, 0.0, 1.0, 0.5 ];
            }
        });
        await loader.load();

        uiviewer.setCameraPosition({
            longitude: 139.487650,
            latitude: 35.703107,
            height: 91000
        });

        uiviewer.setLookAtPosition({
            longitude: 139.487650,
            latitude: 35.703107,
            height: 75
        });
    }

    main();
</script>

Info

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

実行結果¶

Warning

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