LineString Geometry¶

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

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

{
    "type": "LineString",
    "coordinates": [
        [ 100.0, 0.0 ],
        [ 101.0, 1.0 ]
    ]
},
{
    "type": "MultiLineString",
    "coordinates": [
        [
            [ 100.0, 0.0 ],
            [ 101.0, 1.0 ]
        ],
        [
            [ 102.0, 2.0 ],
            [ 103.0, 3.0 ]
        ]
    ]
}

コールバック関数¶

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

コールバック関数	動作
getLineColor	線の表示色を指定する関数
getLineWidth	線の幅 [px] を指定する関数

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

サンプルコード¶

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

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

GeoJSON の width プロパティを参照して道路の表示色を変更します。新宿駅周辺のバリアフリー化された道路の道路幅に応じて、線の色をグラデーション表示します。

<!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/0401/resource/2c8311ed-d54d-44bf-8c2e-a74d02bbb65d\">\
                （東京都）新宿駅周辺（2018年3月版仕様適用）リンクデータ by 国土交通省　政策統括官: Creative Commons - Attribution</a>"
        );

        const loader = new mapray.GeoJSONLoader( uiviewer.viewer.scene, "./shinjuku_barrier_free_line.json", {
            getAltitudeMode: ( feature ) => mapray.AltitudeMode.CLAMP,
            getLineWidth: ( feature ) => 5,
            getLineColor: ( feature ) => {
                if ( feature.properties ) {
                    const prop = feature.properties;
                    if ( prop.width ) {
                        // Determine the color based on the road width.
                        const width = prop.width;
                        return width <= 1 ? [ 1.0, 0.0, 0.0, 1.0 ]:
                               width <= 2 ? [ 1.0, 0.3, 0.0, 1.0 ]:
                               width <= 3 ? [ 1.0, 0.6, 0.0, 1.0 ]:
                               [1.0, 1.0, 0.0, 1.0];
                    }
                }
                return [ 1.0, 1.0, 1.0, 1.0 ];
            }
        });
        await loader.load();

        uiviewer.setCameraPosition({
            longitude: 139.697482,
            latitude: 35.690316,
            height: 5320
        });

        uiviewer.setLookAtPosition({
            longitude: 139.698077,
            latitude: 35.691527,
            height: 40
        });
    }

    main();
</script>

Info

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

実行結果¶

Warning

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