  [

``html`
`sh`
npm install maplibre-gl-gsi-terrain
`typescript
import maplibregl from 'maplibre-gl';
import { useGsiTerrainSource } from 'maplibre-gl-gsi-terrain';
const gsiTerrainSource = useGsiTerrainSource(maplibregl.addProtocol);
const map = new maplibregl.Map({
container: 'map',
style: {
version: 8,
center: [139.6917, 35.6895],
zoom: 10,
pitch: 30,
maxPitch: 100,
sources: {
terrain: gsiTerrainSource,
seamlessphoto: {
type: 'raster',
tiles: [
'https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg',
],
maxzoom: 18,
tileSize: 256,
attribution:
'地理院タイル',
},
},
layers: [
{
id: 'seamlessphoto',
source: 'seamlessphoto',
type: 'raster',
},
],
terrain: {
source: 'terrain',
exaggeration: 1.2,
},
},
});
`
useGsiTerrainSource()は第2引数でオプションを受け取ります。
| オプション名 | 型 | デフォルト |
| --- | --- | --- |
| tileUrl | string | 地理院標高タイルに準ずるエンコーディングのタイルURL,{z}/{x}/{y}形式。https://cyberjapandata.gsi.go.jp/xyz/dem_png/{z}/{x}/{y}.png
デフォルトは |maxzoom
| | number | 最大ズームレベル、デフォルトは14 |minzoom
| | number | 最小ズームレベル、デフォルトは1 |attribution
| | string | デフォルトは地理院タイル |
`typescript
import maplibreGl from 'maplibre-gl';
import { useGsiTerrainSource } from 'maplibre-gl-gsi-terrain';
const gsiTerrainSource = useGsiTerrainSource(maplibreGl.addProtocol, {
tileUrl: 'https://tiles.gsj.jp/tiles/elev/mixed/{z}/{y}/{x}.png',
maxzoom: 17,
attribution: '産総研シームレス標高タイル'
});
`
getGsiDemProtocolAction()を利用することで、ProtocolActionを取得できます。通常のケースではuseGsiTerrainSource()の利用を推奨します。
`typescript
import maplibregl, { RasterDEMSourceSpecification } from 'maplibre-gl';
import { getGsiDemProtocolAction } from '../src/terrain.ts';
const protocolAction = getGsiDemProtocolAction('gsidem');
maplibregl.addProtocol('gsidem', protocolAction);
const gsiTerrainSource: RasterDEMSourceSpecification = {
type: 'raster-dem',
tiles: ['gsidem://https://tiles.gsj.jp/tiles/elev/mixed/{z}/{y}/{x}.png'],
tileSize: 256,
minzoom: 1,
maxzoom: 17,
encoding: 'terrarium',
attribution:
'地理院タイル',
};
`
このライブラリはmaplibregl.addProtocolに依存しています。addProtocolはv4で破壊的変更があり、このライブラリではv1.0.0以降、v4に準拠した仕様になっています。v3以前を利用する場合はv0.0.2を利用してください。
`sh``
npm install maplibre-gl-gsi-terrain@0.0.2