コンテンツにスキップ

2D Dataset

ここでは、 Mapray Cloud にアップロードした 2D Dataset を表示する例を示します。 2D Dataset とは、 GeoJSON や KML などの位置情報や形状、属性情報を持つベクターデータを表します。

Mapray Cloud へのアップロード

アップロードされた 2D dataset は、 Mapray Cloud 上で GeoJSON に変換されます。 詳細は Mapray Cloud ドキュメント を参照してください。

サンプルコード

GeoJSONLoader を使用して、 Mapray Cloud の 2D Dataset を読み込みます。 Mapray Cloud にアップロードされている GeoJSON は東京都の消火栓のデータです。

Mapray Cloud からデータを取得するには CloudApiV2 を利用します。 CloudApiV2 の getDatasetAsResource に利用したいデータセット ID を指定することで、 Mapray Cloud からリソースが取得できます。 このリソースを GeoJSONLoader のコンストラクタに指定して loader を作成し、 loader.load() を呼び出すことで、点群が表示されます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!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>";

        // The StandardUIViewer in the ui package includes mouse-based camera manipulation.
        const uiviewer = new maprayui.StandardUIViewer( "mapray-container", apikey);

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

        const maprayApi = new mapray.cloud.CloudApiV2({
            tokenType: mapray.cloud.CloudApi.TokenType.API_KEY,
            token: apikey
        });

        // Load the geojson with all features.
        const datasetId = "5123236039753728";
        const resource = maprayApi.getDatasetAsResource( datasetId );

        // Load the data using GeoJSONLoader.
        const loader = new mapray.GeoJSONLoader( uiviewer.viewer.scene, resource, {
            getAltitudeMode: ( feature ) => mapray.AltitudeMode.CLAMP
        });
        await loader.load();

        uiviewer.setCameraPosition({
            longitude: 139.74148,
            latitude: 35.67,
            height: 400
        });

        uiviewer.setLookAtPosition({
            longitude: 139.75188,
            latitude: 35.68573,
            height: 20
        });
    }

    main();
</script>

Info

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

Info

datasetIdは、あなたがアップロードしたデータセットのIDに置き換えて下さい。

GeoJSON や対応する Entity については Loaders - GeoJSON を参照してください。