Display vector tiles with mapray cloud¶

0.10.0

Display vector tiles with mapray cloud

display_vector_tiles_with_mapray_cloud.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Display vector tiles with mapray cloud</title>
  <meta property="og:description" content="Display vector tiles with mapray cloud" />
  <meta name="mapray-version" content="0.10.0">
  <script src="./v0.10.1/mapray.min.js"></script>
  <script src="./v0.10.1/maprayui.min.js"></script>
  <link rel="stylesheet" href="./v0.10.1/mapray.css">
  <style>
    body {margin: 0; padding: 0;}
    html, body, div#mapray-container { height: 100%; }
  </style>
</head>

<body>
    <div id="mapray-container"></div>
</body>
</html>

<script>

 var style_json = {
     "layers": [
         {
             "id": "layer 1",
             "source": "Airports",
             "source-layer": "airport",
             "layout": {
                 "icon-image": ["image","airport"],
                 "icon-size": 1.5,
                 "icon-anchor": "top",
                 "icon-offset": [0, -23],
                 "text-field":[
                     "concat",
                     ["get", "C28_005"]
                 ]
             },
             "paint": {
                 "icon-color": ["rgb", 96, 194, 255],
                 "icon-halo-color":  ["rgb", 0, 0, 0],
                 "icon-halo-width": 1,
                 "text-color": ["rgb", 242, 242, 242],
                 "text-halo-color": ["rgb", 0, 0, 0],
                 "text-halo-width": 1.5
             },
             "type": "symbol"
         }
     ],
     "sources": {
         "Airports": {
             "minzoom": 0,
             "maxzoom": 2,
             "tiles": [
                 "https://api.mapray.com/vectile/6247673678004224/mvt/{z}/{x}/{y}"
             ],
             "type": "vector"
         }
     },
     "sprite": "https://opentiles.mapray.com/sprite/maki/sprite"
 }

 class TileJsonProvider extends mapray.vectile.TileProvider {
     constructor( resource ) {
         super();
         this.resource = resource;
     }

     requestMeta() {
         const controller = new AbortController();
         return {
             promise: this.getMetaData(),
             canceller: () => { controller.abort(); },
         };
     }

     requestTile( area ) {
         const controller = new AbortController();
         return {
             promise: this.getTileBinary( area ),
             canceller: () => { controller.abort(); },
         };
     }

     init( source ) {
         if ( source && source['tiles'] ) {
             this.prefix = source['tiles'][0];
             this.minLevel = ( source?.minzoom ) ?? 0;
             this.maxLevel = ( source?.maxzoom ) ?? 22;
         }
     }

     getMetaData() {
         return Promise.resolve( {
             min_level: Number( this.minLevel ),
             max_level: Number( this.maxLevel ),
         } );
     }

     async getTileBinary( area ) {
         const url = this.makeTileDataURL( area );
         const response = ( await this.resource.resolveResource( url ).load( { type: mapray.Resource.Type.BINARY } ) );
         if ( response.ok ) {
             return response.arrayBuffer();
         } else {
             throw new Error( response.statusText );
         }
     }

     makeTileDataURL( area ) {
         return this.prefix.replace( '{z}', `${area.z}` ).replace( '{x}', `${area.x}` ).replace( '{y}', `${area.y}.mvt` );
     }
 }

 class TileJsonProviderFactory extends mapray.vectile.ProviderFactory {
     constructor( resource ) {
         super();
         this.provider = new TileJsonProvider( resource );
     }

     createTileProvider( _sourceId, jsonSource ) {
         if ( this.provider ) {
             this.provider.init( jsonSource );
         }
         return this.provider;
     }

     createSpriteProvider( location ) {
         return location ? new mapray.vectile.StandardSpriteProvider( location ) : null;
     }
 }

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

    const uiviewer = new maprayui.StandardUIViewer( "mapray-container", { 
        dem_provider: new mapray.StandardDemProvider( cloudApi.getDefaultDemAsResource() )
    } );

 uiviewer.setCameraPosition( {
     longitude: 140.458835,
     latitude: 34.084404,
     height: 852099
 } );

 uiviewer.setLookAtPosition( {
     longitude: 139.972255,
     latitude: 36.375981,
     height: 50
 } );

 const res = cloudApi.getVectileDatasetAsResource( "6247673678004224" );

 var style = mapray.vectile.StyleManager.create( uiviewer.viewer, style_json, new TileJsonProviderFactory( res ) );

 style.promise
      .then( ( manager ) => {
          uiviewer.viewer.setVectileManager( manager );
      } )
      .catch( () => uiviewer.viewer.setVectileManager( null ) );

</script>

Info

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