WebGLマップスケーリングの機能

スタイルエディタ をリリースしました 使用方法の詳細については、サービスタスクでカードを構成できます。vc.ruで読むことができます Habréでは、スタイルエディタでも使用しているStyleZoomの概念について説明します。



カットの下-ズームレベルについての短い話:なぜ標準形式では広い領域に適していないのか、スケールがタイルの読み込みとマップの外観にどのように影響するのか。









ズームレベル



2GIS WebGLマップでスケールを示すために、他の多くのマップと同様に、数値が使用されます-ズームレベルまたは単にズーム。ゼロのズームは、全世界を256×256ピクセルの正方形に収めるマップスケールに対応します。





ズーム= 0でのワールドマップ



1単位でズームインすると、マップが2回引き伸ばされます。最初のズームでは、全世界は256×2 = 512ピクセルになります。4番目に、サイズ256×2×2×2×2 = 4096pxを取得します。



このシステムでは、わかりやすい番号でさまざまなスケールを指定できます。たとえば、zoom = 11は画面上の約1つの大都市であり、zoom = 19を使用すると、建物とそれらの間の通路を詳細に確認できます。



メルカトルプロジェクション



2GISマップは、Mercatorカートグラフィックプロジェクションを使用します。マッププロジェクションは、地球の球面をフラットマップに表示する方法です。



平面とボールは同じものではないため、マップの投影によってオブジェクトの形状やサイズが歪められます。 Mercatorプロジェクションでは、マップ上の高緯度のオブジェクトは、赤道のオブジェクトよりも大きく表示されます。したがって、そのようなマップでは、グリーンランドはアフリカのサイズに見えますが、実際にはその面積はアフリカの面積の14分の1です。 ここでは、投影が国のサイズをどのように歪めるかを見ることができます。





ロシアを赤道に近づけると、地図上のサイズが大幅に縮小されます



オブジェクトの伸びは1 / cos(lat)に比例します。ここで、latはオブジェクトの緯度です。この式から、マップ上のサンクトペテルブルクの緯度(緯度= 60°)にあるオブジェクトは2回引き伸ばされることになります。また、北極または南極(緯度= 90°)のオブジェクトは無期限に伸びます。そのため、メルカトル投影のマップに極が描かれることはありません。極は、緯度約85°の南北すべてを遮断します。 この視覚的で魅力的な資料で



、メルカトルの投影について詳しく読むことができます



ズームとメルカトル投影の問題



ズームの主な問題は、メルカトル投影の特性にあります。異なる緯度での同じズームレベルは、異なる実際のマップスケールに対応します。



Murmansk(緯度69°)とTashkent(緯度41°)の14番目のズームでのマップのスクリーンショットを比較してみましょう。





Murmanskの





15番目のズームTashkentの15番目のズーム



家のサイズの違いを確認できます。ムルマンスクでは大きく、タシュケントでは地図が浅い。



マップをスタイリングするときは、特定のルックアンドフィールを与えたいと考えています。これを行うには、家の表示を開始するズームまたはズームに応じて、道路の幅をピクセル単位で設定します。ある緯度用に書かれたスタイルは、別の緯度では非常に異なって見えます。ズームは異なる実際のスケールを意味するため、それらに固有の意味は歪められます。



決定



この問題を解決するために、通常のズームとは異なる可能性のあるstyleZoomの概念を導入しました。

通常ズーム StyleZoom
オブジェクトのスケーリングを定義します ロードするタイルを決定します
URLで書かれています スタイルを適用するスケールを決定します
おなじみのgetZoom / setZoomメソッドで使用されます getStyleZoom / setStyleZoomメソッドで使用されます
ビットマップタイルに一致


styleZoomは、次の式を使用してズームと緯度から計算されます。styleZoom= zoom + log2(1 /(2 * cos(lat))。



次のstyleZoomプロパティは次の式に従います。

  • 60°の緯度でstyleZoom =ズーム。スタイルはもともとノボシビルスクとモスクワのために書かれたので、この緯度をベースにすることにしました。
  • 緯度<60°の場合styleZoom <zoom。赤道では、styleZoom = zoom-1。
  • 緯度> 60°の場合styleZoom>ズーム。


ここで、TashkentとMurmanskがstyleZoom = 15でどのように見えるかを見てみましょう。Tashkent





、styleZoom = 15(ズーム





≈15.59 Murmansk、styleZoom = 15(ズーム≈14.53 styleZoom



は、緯度に関係なく、マップの実際の縮尺に対応していることがはっきりとわかります。サイズに違いはありません。地図は2つの異なる都市で同じように見えます。



制限事項



修正メカニズムには、マップを操作するための2つのシナリオに現れる欠点があります。



ズーム<9

小さなズームでは、全世界またはその大部分が画面に表示されているときに、マップを上下にドラッグすると、緯度が大きく変化し、それに応じてstyleZoomが変化します。



ドラッグアンドドロップ中に、これにより、新しいタイルの読み込み、スタイルの切り替え、オブジェクトの表示または非表示などが発生する可能性があります。この影響を回避するには、ズーム<9で補正を無効にし、styleZoomをズームに設定します。



緯度> 60°

非常に高い緯度では、styleZoomははるかに大きなズームになります。styleZoomはどのタイルをロードするかを担当するため、たとえば、14番目のズームで16番目のズームのタイルをロードして表示することが判明する場合があります。16番目のズームタイルは、14番目のズームタイルの16分の1の面積です。また、通常約30個のタイルが画面に表示される場合、この場合は480個になります。また、タイルの数はパフォーマンスに大きく影響します。これらの緯度でビデオカードをロードしないように、緯​​度> 60°では補正が無効になり、styleZoomもズームに設定されます。



出力の代わりに



さまざまな都市でどのように表示されるかを心配することなく、サービスのタスク用にWebGLマップと  デザインマップのAPIを接続します



投稿してくれたLeshaFedosovに特に感謝します。リョーカ、こんにちは!



All Articles