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
}
}
);