Display plateau 3dtiles¶

Display a 3dtiles of plateau shinjuku(LOD2)

display_plateau_3dtiles.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Display plateau 3dtiles</title>
  <meta property="og:description" content="Display a 3dtiles of plateau shinjuku(LOD2)" />
  <meta name="mapray-version" content="experimental-feature">
  <meta name="mapray-api-status" content="experimental">
<meta name="mapray-api-package" content="3dtiles">
    <script src="./3dtiles/mapray.min.js"></script>
  <script src="./3dtiles/maprayui.min.js"></script>
  <link rel="stylesheet" href="./3dtiles/mapray.css">
  <style>
    body {margin: 0; padding: 0;}
    html, body, div#mapray-container { height: 100%; }
    table {
        position: absolute;
        top: 10px;
        right: 0;
        width: 30%;
        table-layout: auto;
        border-collapse: collapse;
        border: 2px solid rgb(140 140 140);
        background-color: #f4f4f4;
    }
    th, td {
        padding: 10px;
        border: 1px solid #ccc;
        text-align: left;
    }
    .fixed-column {
        background-color: #f4f4f4;
        width: 30%;
        position: sticky;
        left: 0;
        z-index: 1;
    }
    .dynamic-column {
        width: 70%;
    }
    tbody tr {
        display: flex;
    }
    tbody td, tbody th {
        flex: 1;
        padding: 10px;
        text-align: left;
    }
  </style>
</head>

<body>
<div id="mapray-container">
    <table>
        <tbody>
            <tr>
                <td class="fixed-column">address</td>
                <td class="dynamic-column" id="address">null</td>
            </tr>
            <tr>
                <td class="fixed-column">usage</td>
                <td class="dynamic-column" id="usage">null</td>
            </tr>
            <tr>
                <td class="fixed-column">measuredHeight</td>
                <td class="dynamic-column" id="measuredHeight">null</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

<script>
  const cloudApi = new mapray.cloud.CloudApiV2({
        tokenType: mapray.cloud.CloudApi.TokenType.ACCESS_TOKEN,
        token: "<YOUR_MAPRAY_ACCESS_TOKEN>"
    });

    // The StandardUIView in the ui package includes mouse-based camera manipulation.
    const uiviewer = new maprayui.StandardUIViewer( "mapray-container", { 
        dem_provider: new mapray.StandardDemProvider( cloudApi.getDefaultDemAsResource() ),
        atmosphere: new mapray.Atmosphere()
    } );

  uiviewer.setCameraPosition( {
    longitude: 139.6984,
    latitude: 35.67404,
    height: 1000
  } );

  uiviewer.setLookAtPosition( {
    longitude: 139.69949,
    latitude: 35.6905,
    height: 100
  } );

  const provider = new mapray.Standard3DTileProvider(
    { url: "https://assets.cms.plateau.reearth.io/assets/df/08d8f8-ddab-4ce3-a54a-44b0d890d157/13104_shinjuku-ku_pref_2023_citygml_1_op_bldg_3dtiles_13104_shinjuku-ku_lod2/tileset.json" }
  );

  const dem_provider = new mapray.StandardDemProvider( {
    prefix: "https://opentiles.mapray.com/geoid-dem/egm96/",
    suffix: ".bin"
  } );

  uiviewer.viewer.b3d_collection.createMapray3DTileScene( provider, { dem_provider: dem_provider } );

  window.addEventListener( "click", ( event ) => {
    const ray = uiviewer.viewer.camera.getCanvasRay( [event.pageX, event.pageY] );
    const result = uiviewer.viewer.pickWithRay( ray );
    const content = result?.tile_content;
    if ( content ) {
        const attributes = content.getFeatureTable()["attributes"][result.feature_id[0]];

        document.getElementById("address").textContent = attributes["bldg:address"] ?? "null";
        document.getElementById("usage").textContent = attributes["bldg:usage"] ?? "null";
        document.getElementById("measuredHeight").textContent = attributes["bldg:measuredHeight"] ?? "null";
    }
  } );

</script>

Info

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