Verificare le tessere dei livelli delle Map tiles

Le "Map tiles", che si usano sul web, sono formate, per ciascun livello di zoom, da molteplici tessere (tiles), ciascuna solitamente avente dimensione 256 pixel x 256 pixel, che insieme offrono la rappresentazione corrente della mappa.

Visualizzare le tessere di una mappa e i relativi parametri "x", "y" e "z" mediante il Controllo "WebView"

Il seguente semplice codice esemplificativo consente di vedere ogni singola tessera utilizzata da Google Maps, usata nel livello di zoom prescelto, e di conoscerne i relativi parametri "x" (Longitudine), "y" (Latitudine) e "z" (Zoom).
E' necessario attivare il Componente grafico che rende disponibile la Classe "WebView", come ad esempio gb.qt5.webkit (quindi non gb.map).
(La tessera di partenza mostra la foce del fiume Tevere ad un livello di zoom = 12).
Per vedere le tessere contigue a quella corrente visibile (quindi per spostarsi sul territorio), è necessario modificare i valori dei parametri x (Longitudine) e y (Latitudine) delle tile, che potranno essere variati cliccando sulle parti visibili di colore arancione del "Panel" di contorno al "WebView", come segue: se si clicca sulla parte sinistra, sarà mostrata la tessera contigua a sinistra della tessera corrente; se si clicca sulla parte superiore, sarà mostrata la tessera contigua al di sopra della tessera corrente; e così via per le restanti due parti del Panel arancione. Per modificare lo zoom della mappa, ruotare la rotellina del mouse al di sopra dell'oggetto "WebView".
Va ricordato che il numero del parametro "x" (Longitudine) aumenta, se ci si sposta verso Est; mentre il valore del parametro "y" (Latitudine) aumenta, se ci si sposta verso SUD.

Private WebView1 As WebView
Private Panel1 As Panel
Private Label1 As Label
Private Label2 As Label
Private Label3 As Label
Private x As Integer     ' Indica lo spostamento in Longitudine (Ovest-Est)
Private y As Integer     ' Indica lo spostamento in Latitudine (Nord-Sud)
Private z As Byte        ' Indica lo Zoom della mappa


Public Sub _new()
 
 With Me
   .Center
   .W = 580
   .H = 500
 End With
 With Panel1 = New Panel(Me) As "Panel1"
   .X = 100
   .Y = 50
   .W = 350
   .H = 350
   .Background = Color.Orange
 End With
 With Label1 = New Label(Me)
   .X = Me.W * 0.82
   .Y = Me.H * 0.3
   .Alignment = Align.Right
   .W = .Font.TextWidth(.Text)
   .H = 20
 End With
 With Label2 = New Label(Me)
   .X = Me.W * 0.82
   .Y = Label1.Y + Label1.H + 10
   .Alignment = Align.Right
   .W = .Font.TextWidth(.Text)
   .H = 20
 End With
 With Label3 = New Label(Me)
   .X = Me.W * 0.82
   .Y = Label2.Y + Label2.H + 10
   .Alignment = Align.Right
   .W = .Font.TextWidth(.Text)
   .H = 20
 End With
 
End 

Public Sub Form_Open()
 
 x = 2187
 y = 1524
 z = 12
 AggiornaLabel()
 
 Ricarica()
 
End


Public Sub WebView1_MouseWheel()
 
 Select Case Mouse.Delta
   Case 1
     If z == 22 Then Return 
     x *= 2
     y *= 2
     z += 1
   Case -1
     If z == 0 Then Return 
     x \= 2
     y \= 2
     z -= 1
 End Select
 
 AggiornaLabel()
 
 Ricarica()
 
End


Public Sub Panel1_MouseUp()
 
 If Mouse.X < WebView1.X Then x -= 1
 If Mouse.X > (WebView1.X + WebView1.W) Then x += 1
 
 If Mouse.Y < WebView1.Y Then y -= 1
 If Mouse.Y > (WebView1.Y + WebView1.H) Then y += 1
 
 AggiornaLabel()
 
 Ricarica()
 
End

Private Procedure AggiornaLabel()
 
 Label1.Text = "x = " & Format(x, "########")
 Label1.W = Label1.Font.TextWidth(Label1.Text)
 Label2.Text = "y = " & Format(y, "########")
 Label2.W = Label2.Font.TextWidth(Label2.Text)
 Label3.Text = "z = " & Format(z, "########")
 Label3.W = Label3.Font.TextWidth(Label3.Text)
 
End

Private Procedure Ricarica()
 
 If Object.IsValid(WebView1) Then WebView1.Delete
 
 With WebView1 = New WebView(Panel1) As "WebView1"
   .X = 50
   .Y = 50
   .W = 256
   .H = 256
   .Url = "https://mt1.google.com/vt/lyrs=s&x=" & CStr(x) & "&y=" & CStr(y) & "&z=" & CStr(z)
 End With
 
End

Scaricare dal web e ri-assemblare coerentemente le tessere di una mappa

Ora con un semplice codice proviamo a scaricare dal web e mostrare insieme, ri-assemblandole in modo coerente, tre tessere orizzontalmente contigue (è necessario attivare i Componenti gb.net e gb.net.curl):

Public Sub Form_Open()
 
 Dim tp As New HttpClient
 Dim ss As New String[]
 Dim iimm As New Image[]
 Dim img, im As Image
 Dim b As Byte
 Dim PictureBox1 As PictureBox
 
' Scarica tre immagini-tessere:
 ss.Push(tp.Download("https://mt1.google.com/vt/lyrs=s&x=2187&y=1524&z=12"))
 ss.Push(tp.Download("https://mt1.google.com/vt/lyrs=s&x=2188&y=1524&z=12"))
 ss.Push(tp.Download("https://mt1.google.com/vt/lyrs=s&x=2189&y=1524&z=12"))
 tp.Close
 
 im = New Image
 For b = 0 To ss.Max
   iimm.Push(im.FromString(ss[b]))
 Next
 
 img = New Image(iimm[0].W * iimm.Count, iimm[0].H)
 
 With Me
   .Center
   .W = img.W + 50
   .H = img.H + 50
 End With
 
 For b = 0 To ss.Max
   With Paint
     .Begin(img)
     .DrawImage(iimm[b], b * iimm[0].W, 0, iimm[0].W, iimm[0].H)
     .End
   End With
 Next
 
 With PictureBox1 = New PictureBox(Me)
   .X = 20
   .Y = 20
   .W = img.W
   .H = img.H
   .Image = img
 End With
  
End