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]