Versione attuale delle 04:51, 18 gen 2024

Introduzione: la struttura della MapView

Il Controllo grafico "MapView " è costituito da un Oggetto "Figlio" Panel, il quale è a sua volta ha un Oggetto "Figlio" che è una DrawingArea:

MapView
⬇ genitore di un
Panel
⬇ genitore di una
DrawingArea

Mostrare elementi grafici non altrimenti riproducibili con il Metodo "Map.AddShape()"

Di norma, per mostrare alcuni elementi grafici (punti, figure piane e immagini), si deve fare riferimento al Metodo ".AddShape()" della Classe Map.
Questo Metodo, però, non consente di inserire direttamente anche altri elementi, come ad esempio: testo, effetti grafici in movimento, Controlli grafici ed altro. ^{[nota 1]}

In caso di bisogno, dunque, per mostrare sulla MapView elementi ed effetti grafici, testo, disegni, immagini e anche Controlli, non altrimenti riproducibili normalmente con il Metodo "Map.AddShape()", si utilizzerà l'Oggetto DrawingArea, "Figlio" dell'Oggetto Panel a sua volta "Figlio" del Controllo MapView. Al riguardo va ricordato che la Classe DrawingArea eredita le risorse della Classe Container della libreria grafica QT.
Ovviamente con tale modalità potranno essere mostrati sulla mappa anche altri elementi grafici comunque normalmente riproducibili dal predetto Metodo "Map.AddShape()". Tale circostanza rende molto versatile, duttile ed efficiente questo particolare utilizzo dell'Oggetto DrawingArea, "nipote" della MapView.

Disegnare effetti grafici sulla MapView usando l'Evento MapView_Draw()

Va precisato che l'Evento, ove deve avvenire la realizzazione del disegno mediante le risorse della Classe Paint resta comunque quello dell'Oggetto MapView:

MapView_Draw()

avendo cura in tale routine di assegnare al Metodo "Paint.Begin()" l'Oggetto DrawingArea, "Figlio" del Panel.

Esempio astratto per disegnare qualsiasi qualcosa

Mostriamo di seguito un esempio astratto ed essenziale, per disegnare qualsiasi cosa, facendola apparire al di sopra della mappa:

Private pn As Panel


Public Sub Form_Open()

 With MapView1
   .Map.AddTile("topo", "https://a.tile.opentopomap.org/{z}/{x}/{y}.png")
   .Map.Zoom = 14
   .Map.Center = MapPoint(Latitudine, Longitudine)
 End With

' Individua dapprima l'Oggetto "Figlio" della "MapView", che è un "Panel":
 pn = MapView1.Children[0]

' Stabilisce le coordinate geografiche ove sarà posizionato la figura disegnata:
 mp = MapPoint(Latitudine, Longitudine)

End

' Questo Evento garantisce che, sia all'apertura iniziale della mappa, sia in caso di spostamento la Mappa con il mouse, l'elemento grafico disegnato si mostri solo e sempre alle sue coordinate geografiche prestabilite.
' Se l'istruzione viene posta invece all'interno di un Evento del "Form", il disegno non acquisirà le predette coordinate.
Public Sub MapView1_Draw()

' Individua l'Oggetto "Figlio" del "Panel", che è una "DrawingArea":
 Dim da As DrawingArea

 da = pn.Children[0]

 With Paint
' Disegna sull'Oggetto "Figlio" del "Panel", che è una "DrawingArea" (ossia lo stesso Oggetto che la Classe "MapView" usa ordinariamente per mostrare la mappa):
   .Begin(da)

   ' ...qui disegna qualcosa...

   .End
 End With

End

Esempio pratico

Disegnaremo sulla mappa un cerchio giallo:

Private MapView1 As MapView
Private ZOOM As Byte = 15
Private pn As Panel
Private mp As MapPoint


Public Sub Form_Open()

 With Me
   .W = Screen.AvailableWidth
   .H = Screen.AvailableHeight
   .Arrangement = Arrange.Fill
 End With
 With MapView1 = New MapView(Me) As "MapView1"
   .Map.AddTile("GoogleMap", "https://mt0.google.com/vt/lyrs=s&hl=&x={x}&y={y}&z={z}")
   .Map.Zoom = ZOOM
   .Map.Center = MapPoint(41.89018, 12.49230)
   pn = .Children[0]
 End With

' Stabilisce le coordinate geografiche ove sarà posizionato il disegno:
 mp = MapPoint(41.89320, 12.51000)

End

Public Sub MapView1_Draw()

' Individua l'Oggetto "Figlio" del "Panel", che è una "DrawingArea":
 Dim da As DrawingArea

 da = pn.Children[0]

 With Paint
   .Begin(da)
   .Brush = .Color(Color.Yellow)
' Proporziona lo spessore del perimetro del cerchio allo zoom corrente con un'apposita formula:
   .LineWidth = 2 * CSingle(1.5 ^ (MapView1.Map.Zoom - ZOOM))
' Disegna il cerchio e lo proporziona allo zoom corrente con un'apposita formula:
   .Arc(MapView1.Map.MapPointToPixelRel(mp).X, MapView1.Map.MapPointToPixelRel(mp).Y, 50 * CSingle(1.5 ^ (MapView1.Map.Zoom - ZOOM)), Rad(0), Rad(360), False)
   .Stroke
   .End
 End With

End

Mostrare un'immagine in un punto determinato della mappa

Mostriamo di seguito un esempio per mostrare un'immagine in un punto della mappa determinato da coordinate geografiche prestabilite.
Questo è ovviamente il caso in cui un elemento grafico, gestibile dal Metodo ".AddShape()" della Classe Map, può essere riprodotto anche senza tale Metodo, bensì con la modalità argomento della presente pagina.

Private MapView1 As MapView
Private ZOOM As Byte = 15
Private mpim As MapPoint
Private im As Image

Public Sub Form_Open()

 With Me
   .W = Screen.AvailableWidth
   .H = Screen.AvailableHeight
   .Arrangement = Arrange.Fill
 End With
 With MapView1 = New MapView(Me) As "MapView1"
   .Map.AddTile("GoogleMap", "https://mt0.google.com/vt/lyrs=s&hl=&x={x}&y={y}&z={z}")
   .Map.Zoom = ZOOM
   .Map.Center = MapPoint(41.89018, 12.49230)
 End With 

 im = Image.Load("/percorso/del/file/immagine")

' Stabilisce le coordinate geografiche ove sarà posizionata l'immagine:
 mpim = MapPoint(41.90018, 12.50030)
 
End

' Questo Evento garantisce che, sia all'apertura iniziale della mappa, sia in caso di spostamento la Mappa con il mouse, l'immagine si mostri solo e sempre alle sue coordinate geografiche prestabilite.
' Se l'istruzione viene posta invece all'interno di un Evento del "Form", l'immagine non acquisirà le predette coordinate.
Public Sub MapView1_Draw()

' Individua dapprima l'Oggetto "Figlio" della "MapView", che è un "Panel":
 Dim pn As Panel = MapView1.Children[0]

' Quindi individua l'Oggetto "Figlio" del predetto "Panel", che è una "DrawingArea":
 Dim da As DrawingArea = pn.Children[0]

 With Paint
' Disegna sull'Oggetto "Figlio" del "Panel", che è una "DrawingArea" (ossia lo stesso Oggetto che la Classe "MapView" usa ordinariamente per mostrare la mappa):
   .Begin(da)
' Disegna l'immagine caricata e la proporziona allo zoom corrente con un'apposita formula:
   .DrawImage(im, MapView1.Map.MapPointToPixelRel(mpim).X, MapView1.Map.MapPointToPixelRel(mpim).Y, im.W * CSingle(2 ^ (MapView1.Map.Zoom - ZOOM)), im.H * CSingle(2 ^ (MapView1.Map.Zoom - ZOOM)), 1.0, Null)
   .End
 End With

End

Mostrare un video in un punto determinato della mappa usando la Classe "MediaPlayer" del Componente gb.media

E' possibile mostrare sulla MapView anche un video, sia caricato da file, sia richiamato da un indirizzo web.

A tal file si utilizzerà la Classe MediaPlayer del Componente gb.media.
Il video sarà dirottato verso la DrawingArea mediante il Metodo ".SetWindow()", impostandone anche le coordinate e le dimensioni.

Di seguito un esempio per mostrare un file video che fa uso anche della Classe MediaPlayer del Componente "gb.media":

Private MapView1 As MapView
Private ZOOM As Byte = 15
Private mpvi As MapPoint
Private mp As MediaPlayer
Private DrawingArea1 As DrawingArea


Public Sub Form_Open()

 Dim pn As Panel

 With Me
   .W = Screen.AvailableWidth
   .H = Screen.AvailableHeight
   .Arrangement = Arrange.Fill
 End With
 With MapView1 = New MapView(Me) As "MapView1"
   .Map.AddTile("GoogleMap", "https://mt0.google.com/vt/lyrs=s&hl=&x={x}&y={y}&z={z}")
   .Map.Zoom = ZOOM
   .Map.Center = MapPoint(41.89018, 12.49230)
' Individua dapprima l'Oggetto "Figlio" della "MapView", che è un "Panel":
   pn = .Children[0]
 End With

' Quindi individua l'Oggetto "Figlio" del predetto "Panel", che è una "DrawingArea":
 DrawingArea1 = pn.Children[0] 
 
' Stabilisce le coordinate geografiche ove sarà posizionato il video:
 mpvi = MapPoint(41.90018, 12.50030)

End

Public Sub MapView1_MouseUp()  ' Questo Evento sarà sollevato cliccando sulla "MapView"

' Se si clicca su un tasto diverso da quello "destro", si esce dalla presente sub-routine:
 If Not Mouse.Right Then Return

 With mp = New MediaPlayer
   .URL = Media.Url("/percorso/del/file/video")
   .Play()
' Imposta il Controllo grafico dell'uscita video da usare:
   .SetWindow(DrawingArea1, MapView1.Map.MapPointToPixelRel(mpvi).X, MapView1.Map.MapPointToPixelRel(mpvi).Y, 240, 160)
 End With

End

' Questo Evento garantisce che, sia all'apertura iniziale della mappa, sia in caso di spostamento la Mappa con il mouse, il "Controllo" si mostri solo e sempre alle sue coordinate geografiche prestabilite.
' Se l'istruzione viene posta invece all'interno di un Evento del "Form", il "Controllo" non acquisirà le predette coordinate.
Public Sub MapView1_Draw()

 If IsNull(mp) Then Return 

 mp.SetWindow(DrawingArea1, MapView1.Map.MapPointToPixelRel(mpvi).X, MapView1.Map.MapPointToPixelRel(mpvi).Y, 240, 160)

' Se si desidera che la finestra del video sia ridimensionata proporzionatamente allo zoom corrente, si utilizzerà la precedente riga così integrata:
' mp.SetWindow(DrawingArea1, MapView1.Map.MapPointToPixelRel(mpvi).X, MapView1.Map.MapPointToPixelRel(mpvi).Y, 240 * CSingle(2 ^ (MapView1.Map.Zoom - ZOOM)), 160 * CSingle(2 ^ (MapView1.Map.Zoom - ZOOM)))

End
 
Public Sub MPlayer_End()

 mpl.Close
 MapView1.Refresh

End

Public Sub Form_Close()

 mp.Close

End

Qualora il video da eseguire abbia un indirizzo web, allora tale indirizzo web andrà assegnato alla Proprietà ".Url" della Classe MediaPlayer direttamente (senza l'uso del Metodo "Media.Url()", come per i file video presenti su dispositivi di memoria):

With mp = New MediaPlayer
  .URL = "https://www.freedesktop.org/software/gstreamer-sdk/data/media/sintel_cropped_multilingual.webm"
  ...etc...

Mostrare Controlli grafici sulla MapView

La modalità sinora descritta consente di mostrare sulla MapView di uno o più Controlli grafici (Button, Label, etc).

Anche in questo caso la routine "MapView_Draw()" risulta valida e utile, sebbene solo per far sì che il Controllo, qualora venga spostato la Mappa con il mouse, si mostri solo e sempre alle sue coordinate geografiche prestabilite.
In particolare si porrà il Metodo ".Move()" del Controllo, assegnando ai due argomenti previsti le coordinate x,y ricavate - quali Proprietà ".X" e ".Y" dal Metodo ".MapPointToPixelRel()" della Classe Map, al quale viene passata la variabile di tipo della Classe MapPoint, contenente le coordinate geografiche del Controllo, precedentemente assegnatele.

Esempio per porre un Controllo grafico sulla MapView

Mostriamo di seguito un esempio astratto ed essenziale, per far apparire un Controllo grafico (ad esempio un Button) al di sopra della mappa:

Private MapView1 As MapView
Private bu As Button
Private mpbu As MapPoint

Public Sub Form_Open()

 Dim mp As New MapPoint(41.89018, 12.49230)
 Dim pn As Panel
 Dim pt As Point
 Dim da As DrawingArea

 With Me
   .W = Screen.AvailableWidth
   .H = Screen.AvailableHeight
   .Arrangement = Arrange.Fill
 End With
 With MapView1 = New MapView(Me) As "MapView1"
   .Map.AddTile("topo", "https://a.tile.opentopomap.org/{z}/{x}/{y}.png")
   .Map.Zoom = 14
   .Map.Center = mp
   pt = New Point(.Map.MapPointToPixelRel(mp).X, .Map.MapPointToPixelRel(mp).Y)
 End With

' Individua dapprima l'Oggetto "Figlio" della "MapView", che è un "Panel":
 pn = MapView1.Children[0]

' Quindi individua l'Oggetto "Figlio" del predetto "Panel", che è una "DrawingArea":
 da = pn.Children[0]

 ' Attribuisce il Controllo grafico "Button" alla predetta "DrawingArea" ("Figlia" del "Panel"), per impedire che altrimenti si espanda alla dimensione della "MapView":
 With bu = New Button(da) As "Controllo1"
' Posiziona il "Button" nei pressi di determinate coordinate geografiche, trasformate adeguatamente in coordinate x,y dell'Oggetto "DrawingArea", della quale il "Button" è ormai "Figlio":
   .X = pt.X
   .Y = pt.Y
   .W = 20
   .H = 20
 End With

' Converte le coordinate x,y del "Controllo" ("Button") in coordinate geografiche e le assegna a una variabile di tipo "MapPoint":
 mpbu = MapView1.Map.PixelToMapPointRel(pt)

End

' Questo Evento garantisce che, sia all'apertura iniziale della mappa, sia in caso di spostamento la Mappa con il mouse, il "Controllo" si mostri solo e sempre alle sue coordinate geografiche prestabilite.
' Se l'istruzione viene posta invece all'interno di un Evento del "Form", il "Controllo" non acquisirà le predette coordinate.
Public Sub MapView1_Draw()

' Assicura che il "Controllo" grafico sia mostrato solo e sempre alle sue coordinate geografiche prestabilite, che trasforma adeguatamente in coordinate x,y sulla "DrawingArea" qualora ne ricorrano le circostanze geografiche ad esempio a seguito di eventuale spostamento della mappa con il mouse):
 With MapView1.Map
   bu.Move(.MapPointToPixelRel(mpbu).X, .MapPointToPixelRel(mpbu).Y)
 End With 

End

Public Sub Controllo1_Click()

 Me.Text = "Cliccato sul Tasto !"

End

Gestire la riproduzione degli elementi grafici non all'interno dell'Evento "MapView_Draw()"

Usare l'Evento "DrawingArea_Draw()"

E' possibile operare sugli elementi grafici usando direttamente l'Evento "_Draw()" della DrawingArea ("Figlia" del Panel ) annziché l'Evento "MapView_Draw()".
In tal caso si dovrà, ovviamente, attribuire detta DrawingArea ad un Gruppo di Eventi, affinché possa sollevare il proprio predetto Evento "_Draw()".
Nel fare ciò non si dovrà utilizzare il Metodo ".Attach()" della Classe Object, altrimenti la DrawingArea non potrà caricare la mappa e resterà quindi scura.
Si dovrà invece usare la Classe Observer:

 obs = New Observer(variabile_drawingarea, True) As "DrawingArea1"

avendo cura di impostare a "True" il secondo parametro nel momento della creazione dell'Oggetto "Observer".

Mostriamo un esempio:

Private MapView1 As MapView
Private Const ZOOM As Byte = 14
Private pn As Panel
Private da As DrawingArea
Private mp As MapPoint

Public Sub Form_Open()

 Dim obs As Observer

 With Me
   .W = Screen.AvailableWidth
   .H = Screen.AvailableHeight
   .Arrangement = Arrange.Fill
 End With
 With MapView1 = New MapView(Me) As "MapView1"
   .Map.AddTile("GoogleMap", "https://mt0.google.com/vt/lyrs=s&hl=&x={x}&y={y}&z={z}")
   .Map.Zoom = ZOOM
   .Map.Center = MapPoint(41.89018, 12.49230)
' Individua dapprima l'Oggetto "Figlio" della "MapView", che è un "Panel":
   pn = .Children[0]
 End With

' Stabilisce le coordinate geografiche ove sarà posizionato l'elemento grafico disegnato:
 mp = MapPoint(41.89320, 12.51000)

 da = pn.Children[0]
 obs = New Observer(da, True) As "DrawingArea1"

End

Public Sub DrawingArea1_Draw()

 With Paint
   .Brush = .Color(Color.Yellow)
    ' Proporziona lo spessore del perimetro del cerchio allo zoom corrente con un'apposita formula:
   .LineWidth = 2 * CSingle(2 ^ (MapView1.Map.Zoom - ZOOM))
' Disegna il cerchio e lo proporziona allo zoom corrente con un'apposita formula:
   .Arc(MapView1.Map.MapPointToPixelRel(mp).X, MapView1.Map.MapPointToPixelRel(mp).Y, 50 * CSingle(2 ^ (MapView1.Map.Zoom - ZOOM)), Rad(0), Rad(360), False)
   .Stroke
   .End
 End With

End

Mostrare un'immagine in una "MapView" usando la Classe "MediaPlayer" del Componente gb.media

E' possibile mostrare una immagine in una MapView, usando la Classe "MediaPlayer" del Componente gb.media:

Nel seguente esempio verrà mostrata un'immagine nel punto ove si sarà cliccato. Ogni immagine impostata sulla MapView resterà evidente anche quando saranno state inserite altre eventuali immagini, ma spostando la MapView le immagini mostrate si perderanno.

Private MapView1 As MapView
Private mpt As New MapPoint(41.89018, 12.49230)
Private mp As MediaPlayer
Private IMMAGINE As String = "/percorso/del/file/immagine" 


Public Sub Form_Open()

 With Me
   .W = Screen.AvailableWidth
   .H = Screen.AvailableHeight
   .Arrangement = Arrange.Fill
 End With

' Crea una "MapView" come Oggetto GUI da usare per l'uscita immagine:
 With MapView1 = New MapView(Me) As "MapView1"
   .Map.AddTile("GoogleMap", "https://mt0.google.com/vt/lyrs=s&hl=&x={x}&y={y}&z={z}")
   .Map.Zoom = 15
   .Map.Center = mpt
 End With

' Crea un Oggetto "MediaPlayer" per mostrare immagine:
 With mp = New MediaPlayer
  .URL = Media.URL(IMMAGINE)
' Imposta il Controllo dell'uscita immagine da utilizzare:
  .SetWindow(MapView1)
 End With
 
End


Public Sub MapView1_MouseUp()  ' Se si clicca sulla "MapView", sarà mostrata l'immagine

 Dim pt As New Point(Mouse.X, Mouse.Y)

 mpt = MapView1.Map.PixelToMapPointRel(pt)

' Imposta il Controllo dell'uscita immagine da utilizzare, e la sua posizione sulla MapView:
 mp.SetWindow(MapView1, MapView1.Map.MapPointToPixelRel(mpt).X, MapView1.Map.MapPointToPixelRel(mpt).Y, ImageStat(IMMAGINE).Width, ImageStat(IMMAGINE).Height)

' Mostra il file immagine:
 mp.Play()

End


Public Sub Form_Close()

 mp.Close

End

Con questo codice ogni immagine inserita sarà visibile per il solo tempo in cui si cliccherà sulla MapView, mantenendo premuto il tasto del mouse: al suo rilascio l'immagine sparirà.

Private MapView1 As MapView
Private mpt As New MapPoint(41.89018, 12.49230)
Private mp As MediaPlayer
Private IMMAGINE As String = "/percorso/del/file/immagine" 


Public Sub Form_Open()

 With Me
   .W = Screen.AvailableWidth
   .H = Screen.AvailableHeight
   .Arrangement = Arrange.Fill
 End With

' Crea una "MapView" come Oggetto GUI da usare per l'uscita immagine:
 With MapView1 = New MapView(Me) As "MapView1"
   .Map.AddTile("GoogleMap", "https://mt0.google.com/vt/lyrs=s&hl=&x={x}&y={y}&z={z}")
   .Map.Zoom = 15
   .Map.Center = mpt
 End With

' Crea un Oggetto "MediaPlayer" per mostrare immagine:
 With mp = New MediaPlayer
  .URL = Media.URL(IMMAGINE)
' Imposta il Controllo dell'uscita immagine da utilizzare:
  .SetWindow(MapView1)
 End With
 
End


Public Sub MapView1_MouseDown()  ' Se si clicca sulla "MapView", sarà mostrata l'immagine

 Dim pt As New Point(Mouse.X, Mouse.Y)

 mpt = MapView1.Map.PixelToMapPointRel(pt)

' Imposta il Controllo dell'uscita immagine da utilizzare, e la sua posizione sulla MapView:
 mp.SetWindow(MapView1, MapView1.Map.MapPointToPixelRel(mpt).X, MapView1.Map.MapPointToPixelRel(mpt).Y, ImageStat(IMMAGINE).Width, ImageStat(IMMAGINE).Height)

' Mostra il file immagine:
 mp.Play()

End


Public Sub MapView1_MouseUp()  ' Al rilascio del tasto del mouse l'immagine sarà cancellata

' Determina la pulitura della "MapView" e pertanto la cancellazione dell'immagine mostrata:
 With mp
   .Stop
   .Close
 End With
 MapView1.Refresh

End


Public Sub Form_Close()

 mp.Close

End

Mostrare un video in una "MapView" usando la Classe "MediaPlayer" del Componente gb.media

Analogamente è possibile mostrare un video in una MapView, usando la Classe "MediaPlayer" del Componente gb.media.

Riprendiamo il codice precedente:

Private MapView1 As MapView
Private mpt As New MapPoint(41.89018, 12.49230)
Private mp As MediaPlayer
Private VIDEO As String = "/percorso/del/file/video" 


Public Sub Form_Open()

 With Me
   .W = Screen.AvailableWidth
   .H = Screen.AvailableHeight
   .Arrangement = Arrange.Fill
 End With

' Crea una "MapView" come Oggetto GUI da usare per l'uscita video:
 With MapView1 = New MapView(Me) As "MapView1"
   .Map.AddTile("GoogleMap", "https://mt0.google.com/vt/lyrs=s&hl=&x={x}&y={y}&z={z}")
   .Map.Zoom = 15
   .Map.Center = mpt
 End With

' Crea un Oggetto "MediaPlayer" per eseguire il video:
 With mp = New MediaPlayer
  .URL = Media.URL(VIDEO)
' Imposta il Controllo dell'uscita video da utilizzare:
  .SetWindow(MapView1)
 End With
 
End


Public Sub MapView1_MouseDown()  ' Se si clicca sulla "MapView", sarà mostrato il video

 Dim pt As New Point(Mouse.X, Mouse.Y)

 mpt = MapView1.Map.PixelToMapPointRel(pt)

' Imposta il Controllo dell'uscita video da utilizzare, e la sua posizione sulla MapView:
 mp.SetWindow(MapView1, MapView1.Map.MapPointToPixelRel(mpt).X, MapView1.Map.MapPointToPixelRel(mpt).Y, 80, 320)

' Mostra il video:
 mp.Play()

End


Public Sub MapView1_MouseUp()  ' Al rilascio del tasto del mouse il video sarà terminato

' Consente la cancellazione del video mostrato:
 With mp
   .Stop
   .Close
 End With

' Determina la pulitura della "MapView" e pertanto la cancellazione del video mostrato:
 MapView1.Refresh

End

Note

[1] Vedere nche la seguente pagina: Inserire un Oggetto grafico su una MapView

Esempi pratici

Esempi pratici posso essere rinvenuti nelle seguenti pagine:

• Disegnare il testo su una MapView usando l'Oggetto "Figlio" DrawingArea
• Disegnare sulla MapView dei cerchi concentrici al punto ove si è cliccato con il puntatore del mouse
• Disegnare un cerchio o una ellisse o un punto su una MapView usando l'Oggetto "Figlio" DrawingArea
• Disegnare un mirino come cursore del mouse su una MapView
• Disegnare un'immagine su una MapView usando l'Oggetto "Figlio" DrawingArea
• Inserire un Oggetto grafico su una MapView