!GitHub Release
!GitHub Actions Workflow Status

maplibre-gl-gsi-terrain


インストール

$3

``html

`

$3

`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 | デフォルトは地理院タイル |

$3

`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: '産総研シームレス標高タイル'
});
`

$3

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:
'地理院タイル',
};
`

MapLibre GL JS v3以前を利用する場合

このライブラリはmaplibregl.addProtocolに依存しています。addProtocolはv4で破壊的変更があり、このライブラリではv1.0.0以降、v4に準拠した仕様になっています。v3以前を利用する場合はv0.0.2を利用してください。

`sh
npm install maplibre-gl-gsi-terrain@0.0.2
``