maplibre-gl-gsi-terrain

使い方

npm install maplibre-gl-gsi-terrain

import maplibreGl, { Map } from 'maplibre-gl';
import { useGsiTerrainSource } from 'maplibre-gl-gsi-terrain';

const gsiTerrainSource = useGsiTerrainSource(maplibreGl.addProtocol);

new Map({
    container: 'app',
    style: {
        version: 8,
        sources: {
            terrain: gsiTerrainSource,
        },
        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 | デフォルトは地理院タイル |

産総研シームレス標高タイルを利用する例

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: '<a href="https://gbank.gsj.jp/seamless/elev/">産総研シームレス標高タイル</a>'
});

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

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

npm install [email protected]