postmaps.js でオーバーズームを正しく効かせるために、ベクトルタイル側の maxzoom を知らせるためには、maxDataZoom を設定すれば良いことがわかりました。
情報源
ソースコードを GitHub で検索して見つけました。検索文字列は 14 です。protomaps のサービスが maxzoom を 14 にしていると知っていたからです。
let maxDataZoom = o.maxDataZoom || 14;
動的なスタイル設定
protomaps.js では、width や color に (z, f) を引数とする関数を渡せるので、それを使って色々ためしています。
道路の太さをランダムで設定
{
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
ポリゴンの塗色をランダムで設定
{
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 をオープンソースで開発している皆様に敬意と共感を持っています。
地理院地図 Vector タイルのドキュメントは https://github.com/gsi-cyberjapan/gsimaps-vector-experiment にあります。
Top comments (0)