Upgrade to Pro — share decks privately, control downloads, hide ads and more …

国内向けタイルサーバの構築と運用について

 国内向けタイルサーバの構築と運用について

OpenSource Conference 2021 Online/Spring 発表資料。

Taro Matsuzawa aka. btm

March 06, 2021
Tweet

More Decks by Taro Matsuzawa aka. btm

Other Decks in Technology

Transcript

  1. 自己紹介 • 地理空間系プログラマ • OpenStreetMap Foundation Japan メ ンバー •

    OSGeo.JP 理事 • 日本UNIXユーザ会理事 • breakcore クラスタ • 来月から社会人学生 2
  2. タイルの概要 • インターネット上で効率よく地図 を提供する仕組み • タイルという単位で地図を配信 • 今回はWeb Mercator Projection

    のものを例にあげる • それ以外はややこしいので省略 https://a.tile.openstreetmap.org/0/0/0.png 21
  3. ズームレベル • Zoom Level = 0で全世界を表現 • 185度付近で切られている • Zoom

    Level = 0 で20x20=1枚 • Zoom Level = 1 で21x21=4枚 • Zoom Level = 16 で 216x216枚 https://maps.gsi.go.jp/development/siyou.html 22
  4. ベクタタイルの配信 Mbtiles (SQLite) フォント あ/A スプライト tileserver-gl nginx tileserver-glは SQLiteの展開と

    ファイルへのプロクシをしている レンダリングは クライアントで あ/A スタイル 37
  5. ラスタタイルの配信 Mbtiles (SQLite) フォント あ/A スプライト tileserver-gl nginx tileserver-glは スタイルから画像生成を行って

    varnishでキャッシュ しながら返す スタイル varnish クライアントは 画像のみ受け取る 38
  6. セットアップするもの • tileserver-gl + nginx + let’s encrypt • cockpit

    • モニタリング兼リモートシェル • elastic search + fl uentd + grafana • nginxのログを可視化するのに利用 40
  7. 43

  8. 3つの地図スタイル • https://openmaptiles.org/styles/ から3つスタイルを選択して 利用 • OSM Bright • Maptiler

    Basic • Toner • いずれもフォントはM+1を利用するよう変更している 45
  9. 46

  10. プログラムで地図タイルを扱う • Web上で使えるライブラリ • Lea fl et, OpenLayers, Mapbox GL

    JS, MapLibre GL JS • スマートフォン向けライブラリ • MapKit (iOS), Maps SDK for Android, Mapbox GL Native, MapLibre GL Native 50
  11. Lea fl et • 主にラスタタイルを扱う Javascript ライブラリ • PluginでMapbox Vector

    Tileも 扱えるが微妙 • 初心者向けに簡単に使える https://lea fl etjs.com/ 52
  12. Lea fl et example import L from 'lea fl et'

    import 'lea fl et/dist/lea fl et.css' import './index.css' const map = new L.Map('mapid') L.tileLayer( 'https://tile.openstreetmap.jp/styles/maptiler-basic-ja/{z}/{x}/{y}.png', { maxZoom: 18, attribution: `&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors`, } ).addTo(map) map.setView([36.104611, 140.084556], 10) zxyのURLを指定する 53
  13. Lea fl et example import L from 'lea fl et'

    import 'lea fl et/dist/lea fl et.css' import './index.css' const map = new L.Map('mapid') L.tileLayer( 'https://tile.openstreetmap.jp/styles/maptiler-basic-ja/{z}/{x}/{y}.png', { maxZoom: 18, attribution: `&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors`, } ).addTo(map) map.setView([36.104611, 140.084556], 10) attributionは必ず表記する 超 重要 54
  14. Lea fl et example import L from 'lea fl et'

    import 'lea fl et/dist/lea fl et.css' import './index.css' const map = new L.Map('mapid') L.tileLayer( 'https://tile.openstreetmap.jp/styles/maptiler-basic-ja/{z}/{x}/{y}.png', { maxZoom: 18, attribution: `&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors`, } ).addTo(map) map.setView([36.104611, 140.084556], 10) 初期表示の座標とズームレベルを指定 55
  15. Lea fl etの注意点 • 座標の指定の仕方が[latitude, longitude]という並びになって る • 普通のライブラリでは[longitude, latitude]の並び

    • 普通は[y, x]ではなく[x, y] • Google Mapsがこの並びなのでそれに合わせたと思われる 56
  16. OpenLayers example import './index.css' import 'ol/ol.css' import { Map, View

    } from 'ol' import TileLayer from 'ol/layer/Tile' import XYZ from 'ol/source/XYZ' import proj4 from 'proj4' const from = 'EPSG:4326' const to = 'EPSG:3857' const center = proj4(from, to, [140.084556, 36.104611]) new Map({ target: 'map', layers: [ new TileLayer({ source: new XYZ({ url: 'https://tile.openstreetmap.jp/styles/maptiler-basic-ja/{z}/{x}/{y}.png' }) }) ], view: new View({ center: center, zoom: 10 }) }) EPSG:3857へ 変換が必要 58
  17. Mapbox GL JS • Mapbox Vector Tileのリファレン ス的実装 • ベクタタイルとラスタタイルの

    両方をサポート • v1.xまでOSSだった • だった… https://docs.mapbox.com/mapbox-gl-js/api/ 59
  18. Maplibre GL JS • Mapbox GL JS 1.xのフォーク • コミュニティによって運用されてい

    る • まだ正式リリースはされてないが十 分動く • 個人的には移行をおすすめ • あくまで個人の意見です https://github.com/maplibre/maplibre-gl-js 61
  19. MapLibre example import './index.css' import 'maplibre-gl/dist/maplibre-gl.css' import { Map }

    from 'maplibre-gl' new Map({ container: 'mapid', style: 'https://tile.openstreetmap.jp/styles/maptiler-basic-ja/style.json', center: [140.084556, 36.104611], zoom: 10, }) スタイルのURLを 指定する 62
  20. 注意点 • Mapbox GL JS及びMapLibre GL JSをparcelで使う場合browserlist を指定する必要がある • 基本的に右の設定をpackage.json

    に入れるだけでOK "browserslist": { "production": [ "last 3 chrome versions", "last 3 fi refox versions", "last 3 safari versions" ], "development": [ "last 1 chrome version", "last 1 fi refox version", "last 1 safari version" ] }, 63
  21. Mapbox GL Native / Maplibre GL Native • Mapbox GL

    NativeもMapbox GL JS同様以下略なので Maplibre GL Nativeを検討してみましょう • まだ試せてないので省略 66