tjmsy

tjmsy

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

続きです。 ここまでの成果デモ。 「Run Pen」をクリック(タップ)して、あちこち移動して縮小したり拡大してみたりしてください。ズームレベルを保ったまま表示範囲を広げたい場合は「0.5x」、「0.25x」をクリック。 今回やったこと 機能追加 現在地に移動する機能を追加 スケール表示を追加 地図のエクスポート機能を追加 地物を追加・変更 線路を地理院ベクトルタイルからOpenStreetMapに変更 ズームレベル4-7の海岸線の表示を追加 砂地を追加

tjmsy

    • O-map風ウェブ地図にOpenStreetMapと筆ポリゴンを重ねあわせる

      ↓の続きです。 できあがったものを先に貼っておきます。「Run Pen」をクリックして、あちこち移動して縮小したり拡大してみたりしてください。ズームレベルを保ったまま表示範囲を広げたい場合は「0.5x」、「0.25x」をクリック。 今回やったことOpenStreetMapから森林・草地・公園などのレイヤを重ね合わせ 背景を立ち入り禁止の緑色にする 湿地をパターン塗りつぶしする (これが一番たいへんだった) 筆ポリゴンのベクトルタイルを重ねて耕作地をパターン塗りつぶし

      tjmsy

      • O-mapの原図に国土地理院ベクトルタイルと標高タイルを使う

        オリエンテーリングマップ(O-map)の原図用に「国土地理院ベクトルタイル」と「標高タイル」をQGISでダウンロードしてOpenOrienteering Mapperにインポートする方法を紹介します。 基盤地図情報ダウンロードサービスが止まっているので、基盤地図情報が無ければ国土地理院ベクトルタイルをダウンロードすればいいじゃない、というわけです。 国土地理院ベクトルタイルについてざっくり言って基盤地図情報のようなオープンデータの地理情報で、特徴として、Web地図でリアル

        tjmsy

        • 国土地理院ベクトルタイルをO-map風にスタイル設定する

          ↓で紹介した手順のうち、オリエンテーリング地図(O-map)風にスタイル設定するところをnoteに記録をつけながらやっていきます。 できあがったものを先に貼っておきます。 やること国土地理院ベクトルタイルをISOM2017-2になるべく寄せて表示するためのスタイル設定を、Maputnikというオンラインエディタで作成します。そのための下準備を主にやっていきます。 作業ミリメートルからピクセルに単位換算 ISOM2017-2では線の幅などの単位がミリメートルで指定されて

          tjmsy

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

        tjmsy

        • O-map風ウェブ地図にOpenStreetMapと筆ポリゴンを重ねあわせる

          tjmsy

        • O-mapの原図に国土地理院ベクトルタイルと標高タイルを使う

          tjmsy

        • 国土地理院ベクトルタイルをO-map風にスタイル設定する

          tjmsy

          MapLibreにO-Map風のコース線を引くサンプル

          スタートの三角形を次のコントロールに向けて回転させたり (三角関数を成人後初めて使った…! ) 、線が三角・丸・二重丸の中に入らないように長さを調節したり、必要な機能を盛り込もうとするとそこそこ面倒くさいんですけど、雨降りの日曜を一日費やしてChatGPTにコード書かせて不具合調査して修正依頼出してを繰り返したら、そこそこいい感じに作ってくれました。 デモ使い方： 1. Run Penをクリック(タップ)して起動する 2. 右上の線のアイコンをクリックして描画モードに入る

          tjmsy

          MapLibreにO-Map風のコース線を引くサンプル

          tjmsy

          5m間隔コンタつきO-map風Web地図の作り方メモ

          「国土地理院ベクトルタイル」をMaputnikでデザインして、「標高タイル」(をTerrain-RGB形式に変換したデータ)からmaplibre-contourで生成した5m間隔の等高線を重ねて、地図ライブラリのMapLibre GL JSを使ってオリエンテーリング地図風にWeb地図を表示する方法のメモ。 サンプルちょっとしたサンプルを作ってみました(2024/6/15更新)。「Run Pen」をクリックして、あちこち移動して縮小したり拡大してみたりしてください。ズームレベ

          tjmsy

          5m間隔コンタつきO-map風Web地図の作り方メモ

          tjmsy

          基盤地図情報の属性情報をISOM記号と対応させてOpenOrienteering MapperにインポートするためのCRTファイルを作る

          OpenOrienteering Mapperでファイルをインポートするとき、記号の置き換えルールをテキストで書いたCRT(相互参照テーブル)ファイルというものを用意することで、記号が割り当てられた状態でオブジェクトを追加できます。 この機能を使えば基盤地図情報をインポートする作業を効率化できるのでは、ということでnoteの投稿画面をメモ帳として使いながら、今からCRTファイルを作っていきます。 今回やること「基盤地図情報ダウンロードデータファイル仕様書」(以下「基盤地図

          tjmsy

          基盤地図情報の属性情報をISOM記号と対応させてOpenOrienteering MapperにインポートするためのCRTファイルを作る

          tjmsy