続・O-map風ウェブ地図作成 20240705

tjmsy

2024年7月9日 03:10

続きです。

ここまでの成果デモ。
「Run Pen」をクリック(タップ)して、あちこち移動して縮小したり拡大してみたりしてください。ズームレベルを保ったまま表示範囲を広げたい場合は「0.5x」、「0.25x」をクリック。

今回やったこと

機能追加
- 現在地に移動する機能を追加
- スケール表示を追加
- 地図のエクスポート機能を追加
地物を追加・変更
- 線路を地理院ベクトルタイルからOpenStreetMapに変更
- ズームレベル4-7の海岸線の表示を追加
- 砂地を追加
- 岩石地を追加
- 道幅を変更
- 桟橋を追加
- 滑走路を追加

機能追加

現在地に移動する機能を追加

以下の行を追加しました。
参考: https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/GeolocateControlOptions/

  map.addControl(new maplibregl.GeolocateControl({
    trackUserLocation: false,
    showUserLocation: false
  }), 'top-right');

自分の周囲の範囲の地図に移動してくれればよくて、現在地を示すポイントの表示は邪魔なのでオフにしました。

スケール表示を追加

以下の行を追加しました。
参考: https://maplibre.org/maplibre-gl-js/docs/API/classes/ScaleControl/

  map.addControl(new maplibregl.ScaleControl({
    maxWidth: 80,
    unit: 'metric'
  }));

オプションはスケールの幅の指定と、単位をメートル(他の選択肢はフィート、海里)に設定しました。

地図のエクスポート機能を追加

プラグインのWebサイト (https://maplibre-gl-export.water-gis.com/)のUsageに書いてある行をそのまま既存のソースに追加したら簡単にプラグインを追加できました。

			<link href="https://cdn.jsdelivr.net/npm/@watergis/maplibre-gl-export@3.8.1/dist/maplibre-gl-export.css" rel="stylesheet" />
			<script src="https://cdn.jsdelivr.net/npm/@watergis/maplibre-gl-export@3.8.1/dist/maplibre-gl-export.umd.js"></script>

				map.addControl(new MaplibreExportControl.MaplibreExportControl({
					PageSize: MaplibreExportControl.Size.A4,
					PageOrientation: MaplibreExportControl.PageOrientation.Landscape,
					Format: MaplibreExportControl.Format.PNG,
					DPI: MaplibreExportControl.DPI[300],
					Crosshair: true,
					PrintableArea: true,
					Local: 'ja'
				}), 'top-right');

出力された画像に位置情報が埋め込まれていることを期待していたのですが、それは無いようでした。また、追加したスケールも画像に含まれないようです。

地物を追加・変更

線路を地理院ベクトルタイルからOpenStreetMapに変更

地下(トンネル)部分の除外、リフトの除外のための条件指定をシンプルにできるので変更しました。

地下(トンネル)部分の除外
- 地理院ベクトルタイルの場合
  - ズームレベル8〜13のとき、「railState」属性「100」がトンネル、「300」が地下。
  - ズームレベル14〜16のとき、「railState」属性「2」がトンネル、「3」が地下。
- OpenStreetMap(OpenMapTiles)の場合
  - トンネルも地下鉄の地下部分も同じく「brunnel」キーが「tunnel」。
リフトの除外
- 地理院ベクトルタイルの場合
  - ズームレベル11〜13のとき、「rtCode1」属性の上5桁が40206が索道。
  - ズームレベル14〜16のとき、「rtCode」属性の上5桁が40206が索道。
- OpenStreetMap(OpenMapTiles)の場合
  - 鉄道の「railway」キーと索道の「aerialway」キーでそもそも別。

こんな感じになりました。

        {
          "id": "509-線路-黒部分-osm",
          "type": "line",
          "source": "openmaptiles",
          "source-layer": "transportation",
          "filter": [
            "all",
            ["==", "class", "rail"],
            ["!=", "brunnel", "tunnel"]
          ],
          "layout": {
            "line-join": "miter",
            "line-cap": "butt"
          },
          "paint": {
            "line-color": "#000000",
            "line-width": 1.4
          }
        },
        {
          "id": "509-線路-白部分-osm",
          "type": "line",
          "source": "openmaptiles",
          "source-layer": "transportation",
          "filter": [
            "all",
            ["==", "class", "rail"],
            ["!=", "brunnel", "tunnel"]
          ],
          "layout": {
            "line-join": "miter",
            "line-cap": "butt"
          },
          "paint": {
            "line-color": "#ffffff",
            "line-width": 1.0,
            "line-dasharray": [4, 6]
          }
        },

ズームレベル4-7の海岸線の表示を追加

ズームレベルによって海岸線のftCodeが異なっていて、ズームレベル4-7のとき海岸線が表示されなくなっていたのを改善しました。

before

after

砂地を追加

こんな感じで追加しました。

  const sandyGroundSVG =
    `
    <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6">
      <rect width="100%" height="100%" fill="#ffdd9a"/>
      <circle cx="4" cy="4" r="0.7" fill="#000000" />
      <circle cx="1" cy="1" r="0.7" fill="#000000"/>
    </svg>
   `;

  const sandyGroundImage = new Image();
  sandyGroundImage.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(sandyGroundSVG);
  sandyGroundImage.onload = () => {
    map.addImage('sandyGroundPattern', sandyGroundImage);
  };

        {
          "id": "213-砂地-osm",
          "type": "fill",
          "minzoom": 12,
          "source": "openmaptiles",
          "source-layer": "landcover",
          "filter": ["in", "class", "sand"],
          "paint": {
            "fill-pattern": "sandyGroundPattern"
          }
        },

岩石地を追加