記事一覧
続・O-map風ウェブ地図作成 20240705
続きです。
ここまでの成果デモ。
「Run Pen」をクリック(タップ)して、あちこち移動して縮小したり拡大してみたりしてください。ズームレベルを保ったまま表示範囲を広げたい場合は「0.5x」、「0.25x」をクリック。
今回やったこと
機能追加
現在地に移動する機能を追加
スケール表示を追加
地図のエクスポート機能を追加
地物を追加・変更
線路を地理院ベクトルタイルからOpenS
O-map風ウェブ地図にOpenStreetMapと筆ポリゴンを重ねあわせる
↓の続きです。
できあがったものを先に貼っておきます。「Run Pen」をクリックして、あちこち移動して縮小したり拡大してみたりしてください。ズームレベルを保ったまま表示範囲を広げたい場合は「0.5x」、「0.25x」をクリック。
今回やったことOpenStreetMapから森林・草地・公園などのレイヤを重ね合わせ
背景を立ち入り禁止の緑色にする
湿地をパターン塗りつぶしする (これが一番
O-mapの原図に国土地理院ベクトルタイルと標高タイルを使う
オリエンテーリングマップ(O-map)の原図用に「国土地理院ベクトルタイル」と「標高タイル」をQGISでダウンロードしてOpenOrienteering Mapperにインポートする方法を紹介します。
基盤地図情報ダウンロードサービスが止まっているので、基盤地図情報が無ければ国土地理院ベクトルタイルをダウンロードすればいいじゃない、というわけです。
国土地理院ベクトルタイルについてざっくり言っ
国土地理院ベクトルタイルをO-map風にスタイル設定する
↓で紹介した手順のうち、オリエンテーリング地図(O-map)風にスタイル設定するところをnoteに記録をつけながらやっていきます。
できあがったものを先に貼っておきます。
やること国土地理院ベクトルタイルをISOM2017-2になるべく寄せて表示するためのスタイル設定を、Maputnikというオンラインエディタで作成します。そのための下準備を主にやっていきます。
作業ミリメートルからピクセル
MapLibreにO-Map風のコース線を引くサンプル
スタートの三角形を次のコントロールに向けて回転させたり (三角関数を成人後初めて使った…! ) 、線が三角・丸・二重丸の中に入らないように長さを調節したり、必要な機能を盛り込もうとするとそこそこ面倒くさいんですけど、雨降りの日曜を一日費やしてChatGPTにコード書かせて不具合調査して修正依頼出してを繰り返したら、そこそこいい感じに作ってくれました。
デモ使い方：
1. Run Penをクリック
5m間隔コンタつきO-map風Web地図の作り方メモ
「国土地理院ベクトルタイル」をMaputnikでデザインして、「標高タイル」(をTerrain-RGB形式に変換したデータ)からmaplibre-contourで生成した5m間隔の等高線を重ねて、地図ライブラリのMapLibre GL JSを使ってオリエンテーリング地図風にWeb地図を表示する方法のメモ。
サンプルちょっとしたサンプルを作ってみました(2024/6/15更新)。「Run Pen」
基盤地図情報の属性情報をISOM記号と対応させてOpenOrienteering MapperにインポートするためのCRTファイルを作る
OpenOrienteering Mapperでファイルをインポートするとき、記号の置き換えルールをテキストで書いたCRT(相互参照テーブル)ファイルというものを用意することで、記号が割り当てられた状態でオブジェクトを追加できます。
この機能を使えば基盤地図情報をインポートする作業を効率化できるのでは、ということでnoteの投稿画面をメモ帳として使いながら、今からCRTファイルを作っていきます。