Mapboxはいいぞ！！！！！ /RACDA25-bms-mapbox

RACDA25周年記念 バスマップzoom会議

Transcript

1. Mapboxはいいぞ！
   2020/10/25
   RACDA25周年記念 バスマップzoom会議
   あなぐら(@anagura0000)
   

   View Slide

2. 自己紹介
   ● 経路検索サービスの会社にいます
   ● GIS Engineer
   ○ 地図周りの業務全般
   ○ その他雑用など
   ● バスマップ関係の以前の発表
   ○ FOSS4G Niigata: 全国の鉄道及び バス路線図が見れる! GTFSか
   ら生成した シームレス路線図の試作
   

   View Slide

3. Mapboxはいいぞ！！！！！
   

   View Slide

4. Mapboxはいいぞ！
   ● バスマップ界隈で主流なのはLeaflet.js
   ● Mapbox GL JSもいいぞという話
   

   View Slide

5. Mapbox GL JSのオススメポイント
   ● ベクトルデータ描画に強い
   ● 大量のデータに強い
   ● 更新頻度が高い
   ○ 1～2ヶ月に1回リリースされる
   ● Mapbox Style Specificationで柔軟なスタイリングが可能
   ● リッチなバスマップを作るのに非常に便利
   

   View Slide

6. Mapbox Style Specification
   ● フィルタと多様なオプションにより、柔軟なスタイリングが可能
   ● JSONで記述
   ● 高速に動作
   

   View Slide

7. フィルタの例
   ["==", "name", "東京"] // nameが東京と一致
   ["!in", "name", "東京", "大阪"] // nameが東京と大阪ではない
   [">=", "population", 10000] // populationが10000以上
   ["has", "name"] // nameが存在している
   ["all", ["has", "name"], ["==", "name", "東京"]] // nameが存在していて、nameが東京と一致
   

   View Slide

8. Styleの例：Layout option
   {
   "text-field": ["get", "name"], // nameのプロパティを取得して、表示する
   "text-font": [ // fontはOpen Sans Regularを使う
   "Open Sans Regular"
   ],
   "text-offset": [0, 1], // 下方向に1emずらす
   "text-anchor": "left" // アンカーの下にテキストを配置
   }
   

   View Slide

9. Styleの例：Paint option
   {
   "text-color": "blue", // 文字色はblue
   "text-halo-color": "white", // 文字のhaloの色はwhite
   "text-halo-width": 1, // haloの幅は1px
   "text-opacity": 0.5 // 文字の透明度は0.5
   }
   

   View Slide

10. Sample demo
    (富山県オープンデータを使ったバスマップ
    )
    

    View Slide

11. リッチなバスマップを作ろう！
    ● Web地図の利点は動的なバスマップを作れる
    ● 昨今ライブラリや仕様が充実してきた
    

    View Slide