4.2.2 Spatial StudioデータセットのGeoJSONとしての表示

Spatial Studioからパブリック・データセットSubmarine CablesをGeoJSONとしてロードし、MapLibreアプリケーションで表示するには、「スタンドアロンMapLibre JavaScriptマップでのSpatial Studioデータセットのベクター・タイルとしての表示」に示すHTMLコードに次の変更を加える必要があります:

• Spatial Studioトークンを追加する場合、transformRequest関数はタイルではなくソース・タイプのリクエストを検索する必要があります。
• geojsonタイプを使用するには、マップ・ソースおよびマップ・レイヤーの定義を変更する必要があります。

対応する変更後のコードのブロックを次に示します:

        transformRequest: (url, resourceType) => {
            if (resourceType === 'Source' && url.startsWith(spatialStudio.baseUrl)) {
                return {
                    url: url,
                    headers: {'Authorization': 'Bearer ' + spatialStudio.accessToken}
                }
            }
        }

        map.addSource('spatial-studio-geojson-data', {
            'type': 'geojson',
            'data': spatialStudio.baseUrl + '/jsonstream/c5e166cdf86a1605ff9fbaa9d04b7378'
        });

        map.addLayer(
            {
                'id': 'submarine-cables',
                'type': 'line',
                'source': 'spatial-studio-geojson-data',
                'layout': {
                    'line-cap': 'round',
                    'line-join': 'round'
                },
                'paint': {
                    'line-opacity': 0.6,
                    'line-color': 'rgb(53, 175, 109)',
                    'line-width': 3
                }
            }
        );