はじめに

この記事は#30DayMapChallenge2022 7日目の記事です。
テーマはRasterです。
MapLibre GL JSを使ってラスタータイルを表示してみます。

タイルとは

タイル状の地図データのこと
ズームレベルを大きくするとタイルの数が増える

地図の配信配信方式には、XYZ方式とWMSがあり、XYZ方式がデファクトスタンダードになっている

あらかじめタイル状に分割したデータを配信する方式（XYZ方式）
地図表示のリクエストがある度にその範囲をサーバ側で切り抜いて配信する方式（WMS：Web Map Service）

タイルの形式には、ラスタータイルとベクトルタイルがある

出典：国土地理院ウェブサイト

ラスタタイルとは

地図の内容をピクセルごとの色情報（＝画像）として格納する
色や太さなどのスタイルを変更することができない

ベクトルタイルとは

地図の内容をテキストとして格納する
地物の種類に応じてスタイルを設定することができる

出典：国土地理院ウェブサイト

地図表示

ラスタータイルを表示してみます。
地理院タイルから、好きなタイルを選びます。
今回は、標準地図を選択しました。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>サンプル</title>
    <meta name="description" content="サンプルです">
    <link href="style.css" rel="stylesheet">
    <!-- MapLibre -->
    <script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
    <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
</head>
<body>
    <div id="map"></div>
    <script src="main.js"></script>
</body>
</html>

style.css

body {
    margin: 0;
    padding: 0;
}
#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

main.js

var map = new maplibregl.Map({
    container: 'map',
    style: {
        version: 8,
        sources: {
            rtile: {
                type: 'raster',
                tiles: [
                    'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
                ],
                tileSize: 256,
                attribution:
                    "地図の出典：<a href='https://www.gsi.go.jp/' target='_blank'>地理院タイル</a>",
            },
        },
        layers: [
            {
                id: 'raster-tiles',
                type: 'raster',
                source: 'rtile',
                minzoom: 0,
                maxzoom: 22,
            },
        ],
    },
    center: [139.68786, 35.68355], // 中心座標
    zoom: 13, // ズームレベル
});

地理院地図（ラスタータイル）を表示できました！

開発者ツールを開き、「ネットワーク」タブを見てみると
タイルが画像で配信されているのが分かります。

参考文献