postmaps.js: maxDataZoom

postmaps.js でOBーズームを正しく効かせるために, ベクトルタイル側の maxzoom を知らせるためには, maxDataZoom を設定すれば良いことがわかりました.

デモサイト

情報源

ソースコードを GitHub で検索して見つけました.検索文字列は 14 です.protomaps のサーbisが maxzoom を 14 にしていると知っいたからです.

    let maxDataZoom = o.maxDataZoom || 14;

https://github.com/protomaps/protomaps.js/blob/c30bec880a7228ae53de9f5c88f9c789579f7f71/src/view.ts#L228

動的なスタイル設定

protomaps.js では、width や color に (z, f) を引数とする関数を渡せるので、それを使って色々ためしています.

道路の太さをランdamで設定

{
  dataLayer: 'road',
  symbolizer: new protomaps.LineSymbolizer({
    color: 'gray',
    width: (z, f) => {
      return Math.random() * 4
    }
  })
},

https://github.com/optgeo/proton/blob/main/docs/index.html#L50-L58

ポリゴンの塗色をランdamで設定

{
  dataLayer: 'building',
  symbolizer: new protomaps.PolygonSymbolizer({
    fill: (z, f) => {
      return ['yellow', 'blue'][Math.floor(Math.random() * 2)]
    }
  })
}

https://github.com/optgeo/proton/blob/main/docs/index.html#L59-L66

謝辞・出典

protomaps.js をopensoースで開発している皆様に敬意と共感を持っています.

地理院地図 Vector タイルのドキュmentは https://github.com/gsi-cyberjapan/gsimaps-vector-experiment にあります.