Display vector tiles with mapray cloud¶

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" />
  <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>
    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() {
         super();
     }

     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 );
         return this.fetchTileData( url );
     }

     async fetchTileData( url ) {
        try {
            const response = await fetch(url, {
                method: 'GET',
                headers: {
                    'X-Api-Key': apikey
                }
            });

            if (!response.ok) {
                throw new Error(`response status: ${response.status}`);
            }

            return response.arrayBuffer();
        } catch (error) {
            console.error(error.message);
            throw error;
        }
     }

     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() {
         super();
         this.provider = new TileJsonProvider();
     }

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

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

 // Set up your access token, which can be created in Mapray Cloud.
 var apikey= "<YOUR_MAPRAY_API_KEY>";

 const uiviewer = new maprayui.StandardUIViewer( "mapray-container", apikey);

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

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


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

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




</script>

Info

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