maplibre-gl-gsi-terrain

インストール

CDN経由

<script type="module">
    import { useGsiTerrainSource } from 'https://www.unpkg.com/[email protected]/dist/terrain.js';
</script>

npm module として利用する

npm install maplibre-gl-gsi-terrain

使い方

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:
                    '<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>',
            },
        },
        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 | デフォルトは地理院タイル |

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

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

ProtocolActionを直接利用する

getGsiDemProtocolAction()を利用することで、ProtocolActionを取得できます。通常のケースではuseGsiTerrainSource()の利用を推奨します。

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:
    '<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>',
};

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

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

npm install [email protected]