Disegnare un cerchio o un punto su una MapView

Disegnare un Punto o un Cerchio con il Metodo ".AddShape().AddCircle()" della Classe "Map"

Disegnare un Punto

Per disegnare su una MapView un punto con il Metodo ".AddShape().AddCircle()" della Classe "Map", è necessario assegnare un piccolo valore al terzo argomento del predetto Metodo e assegnare un colore al settimo argomento, affinché l'elemento geometrico appaia come un "punto" (un piccolo cerchio pieno) e non come un cerchio vuoto.

Public Sub Form_Open()
 
 Dim mp As New MapPoint(41.89018, 12.49230)
   
 With MapView1.Map
   .AddTile("GoogleMap", "https://mt0.google.com/vt/lyrs=s&hl=&x={x}&y={y}&z={z}")
   .Zoom = 15
' Imposta il centro del punto:
   .Center = mp
' Disegna infine il punto:
   .AddShape("colosseo").AddCircle("punto", mp, 4, Color.Red, 2, Line.Solid, Color.Red)
 End With 
   
End

Il terzo argomento stabilisce la dimensione in pixel del punto. Il quarto argomento assegna il colore alla circonferenza, mentre il settimo riempie il punto con il colore ivi impostato.

Disegnare un Cerchio

Per disegnare su una MapView un cerchio mediante il Metodo , è possibile utilizzare il Metodo .AddCircle( ) del Metodo ".AddShape( )" della Classe "Map".
E' sufficiente assegnare un adeguato valore al terzo argomento e il valore della trasparenza al settimo argomento, se si vuole ottenere un cerchio vuoto, altrimenti un colore opaco se si vuole ottenere un cerchio pieno. Per variare lo spessore della circonferenza bisogna operare sul quinto argomento.

Public Sub Form_Open()
 
 Dim mp As New MapPoint(41.89035, 12.49237)
   
 With MapView1.Map
   .AddTile("GoogleMap", "https://mt0.google.com/vt/lyrs=s&hl=&x={x}&y={y}&z={z}")
   .Zoom = 15
' Imposta il centro del cerchio:
   .Center = mp
' Disegna infine il cerchio:
   .AddShape("colosseo").AddCircle("cerchio", mp, 100, Color.Red, 1, Line.Solid, Color.Transparent)
 End With 
   
End

Se, invece, si vuole creare un cerchio riempito di un colore e con la circonferenza disegnata da altro colore, bisognerà passare il valore di un colore al 7° argomento del Metodo ".AddCircle()":

MapView1.Map.AddShape("cerchio").AddCircle("cerchio", mp, 100, Color.Red, 2, Line.Solid, Color.Yellow)

Disegnare più punti

Mostriamo un esempio pratico per disegnare più punti lungo un'ideale circonferenza:

Public Sub Form_Open()
 
 Dim x_a, y_o, r, an As Short
 Dim po As New Point
 Dim mp As New MapPoint
  
 With MapView1
   .Map.AddTile("GoogleMap", "https://khms{s}.google.it/kh/v={version}&src=app&x={x}&y={y}&z={z}&s=Galile", ["version": "999"]).SubDomains = ["0", "1", "2"]   '[nota 1]
   .Map["GoogleMap"].Visible = True
   .Map.Zoom = 15
 End With
 
' Imposta il centro della circonferenza, lungo la quale saranno posizionati i vari punti da disegnare:
 mp.Lat = 41.89035
 mp.Lon = 12.49237
 MapView1.Map.Center = mp
 po = MapView1.Map.MapPointToPixelRel(mp)
  
 x_a = po.X   ' Rappresenta la distanza X della circonferenza dal punto 0 (angolo in alto a sinistra)
 y_o = po.y   ' Rappresenta la distanza Y della circonferenza dal punto 0 (angolo in alto a sinistra)
 r = 50       ' Rappresenta la dimensione del raggio della circonferenza
 
' Descrive un angolo da 0° sino a 360° (quindi un'intera circonferenza):
  For an = 0 To 360 Step 30
    po.X = x_a + r * Cos(Rad(an)) 
    po.Y = y_o + r * Sin(Rad(an))
    mp = MapView1.Map.PixelToMapPointRel(po)
    MapView1.Map.AddShape("italia").AddCircle("cerchio", mp, 5, Color.Red, 2, Line.Solid, Color.Yellow)
  Next
  
End

Disegnare un semplice punto senza utilizzare il Metodo ".AddCircle()"

Si può, volendo, disegnare un semplice punto anche senza utilizzare il Metodo ".AddCircle()", disegnando su un Oggetto Image un cerchio o un rettangolo colorato.

Public Sub Form_Open()
  
 With MapView1.Map
   .AddTile("Open Topo", "https://a.tile.opentopomap.org/{z}/{x}/{y}.png")
   .Zoom = 15
' Imposta il centro della mappa:
   .Center = MapPoint(41.89018, 12.49230)
 End With 
      
End


Public Sub MapView1_MouseUp()

 If Not Mouse.Right Then Return   ' Se si clicca con il tasto destro del mouse, si disegnerà sulla mappa
 
 Dim mp As MapPoint
 Dim pt As New Point(Mouse.X, Mouse.Y)
 Dim im As Image
 
 mp = MapView1.Map.PixelToMapPointRel(pt)
 
' Crea l'oggetto "Image":
 im = New Image(90, 60, Color.Transparent, gb.Standard)
 
' Scrive le coordinate geografiche nell'oggetto "Image" in forma testuale:
 With Paint
   .Begin(im)
   .Font.Size = 8
   .Brush = .Color(Color.Red)
   .DrawText(Format(mp.Lat, "#.######") & "\n" & Format(mp.Lon, "#.######"), 35, 14, im.W, im.H, Align.Normal)
' Disegna un cerchietto pieno come punto delle coordinate:
   .Arc(45, 30, 2, Rad(0), Rad(360), False)
   .Fill
   .End
 End With
 
 With MapView1
   .Map.AddShape("immagine").AddPoint("immagine", mp, Color.Default, im)
   .Refresh()
   .Map.Refresh()
 End With
 
End

Disegnare un cerchio o una ellisse o un punto su una MapView usando l'Oggetto "Figlio" DrawingArea

L'Oggetto "MapView" mostra la mappa su una "DrawingArea", che è un Oggetto "Figlio" di un "Panel", "Figlio" a sua volta dell'Oggetto "MapView":

MapView
⬇ padre di un
Panel
⬇ padre di una
DrawingArea

Pertanto, sarà possibile utilizzare tale "DrawingArea" per disegnare qualsiasi cosa, facendola apparire al di sopra della mappa.

Mostriamo un semplice codice esemplificativo:

Private MapView1 As MapView
Private Const ZOOM As Byte = 14
Private pn As Panel
Private mmpp As New MapPoint[]


Public Sub Form_Open()
 
 With Me
   .Move(0, 0, Screen.AvailableWidth, Screen.AvailableHeight)
   .Arrangement = Arrange.Fill
 End With

 With MapView1 = New MapView(Me) As "MapView1"
   .Map.Center = New MapPoint(41.89018, 12.49230)
   .Map.Zoom = ZOOM
   .Map.AddTile("topo", "https://a.tile.opentopomap.org/{z}/{x}/{y}.png")
' Individua dapprima l'Oggetto "Figlio" della "MapView", che è un "Panel":
   pn = .Children[0]
 End With
 
End


Public Sub MapView1_MouseUp()
 
 Dim pt As New Point(Mouse.X, Mouse.Y)
 
' Si usa l'Oggetto "MapPoint" per garantire la coerenza del puntamento su un punto della mappa anche nel caso di spostamento o variazione dello zoom della mappa medesima:
 mmpp.Push(MapView1.Map.PixelToMapPointRel(pt))
 
 Me.Caption = CStr(mmpp[mmpp.Max].Lat) & "  -  " & CStr(mmpp[mmpp.Max].Lon)
 
 MapView1.Refresh
 
End


Public Sub MapView1_Draw()
 
 Dim w, h As Float = 50.0
 Dim i As Integer
 
 With Paint
' Disegna sull'Oggetto "Figlio" del "Panel", che è una "DrawingArea", la stessa che la Classe "MapView" usa per mostrare la mappa:
   .Begin(pn.Children[0])
   .Brush = .Color(Color.Red)
' Usa la formula per proporzionare lo spessore della circonferenza del cerchio allo zoom corrente:
   .LineWidth = 2.0 * CSingle(2 ^ (MapView1.Map.Zoom - ZOOM))
   For i = 0 to mmpp.Max
' (w / 2) e (h / 2) per centrare il cerchio nel punto dove si clicca con il mouse ed usa la formula per proporzionare la dimensione del cerchio allo zoom corrente:
     .Ellipse(MapView1.Map.MapPointToPixelRel(mmpp[i]).X - (w / 2), MapView1.Map.MapPointToPixelRel(mmpp[i]).Y - (h / 2), w * CSingle(2 ^ (MapView1.Map.Zoom - ZOOM)), h * CSingle(2 ^ (MapView1.Map.Zoom - ZOOM)), Rad(0), Rad(360), False)
' E' possibile anche usare il Metodo ".Arc()".
   Next
   .Stroke
   .End
 End With

End

In quest'altro esempio, ove si è cliccato con il tasto destro del mouse, nel punto indicato dal puntatore del mouse, si disegneranno in sequenza sulla mappa, mostrata dall'Oggetto "MapView", dei cerchi concentrici, lasciando alla fine dell'effetto grafico un solo punto. ^{[nota 2]}

Private MapView1 As MapView
Private pn As Panel
Private pt As Point
Private ct As Short


Public Sub Form_Open()

 With Me
  .Move(0, 0, Screen.AvailableWidth, 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 = 15
' Imposta il centro del punto:
  .Map.Center = New MapPoint(41.89018, 12.49230)
End With

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

End


Public Sub MapView1_MouseUp()

 If Mouse.Right Then   ' Se si clicca con il tasto destro del mouse, si disegnerà sulla mappa
   Dim c As Short
   pt = New Point(Mouse.X, Mouse.Y)
' Fornisce i dati per far disegnare in sequenza sulla mappa, mostrata dall'Oggetto "MapView", dei cerchi concentrici:
   For c = 28 DownTo 1 Step 3
     ct = c
     MapView1.Refresh
     Wait 0.1
   Next
   If Object.IsValid(pt) Then Me.Text = Format(MapView1.Map.PixelToMapPointRel(pt).Lat, "0.000000") &
                                        "   " &
                                        Format(MapView1.Map.PixelToMapPointRel(pt).Lon, "0.000000")
 Endif 

End


' Viene sollevato questo Evento, se si sposta il mouse sulla mappa tenendo premuto un tasto:
Public Sub MapView1_MouseDrag()

 pt = Null

End


Public Sub MapView1_MouseWheel()

 pt = Null

End

 
Public Sub MapView1_Draw()

 If Not Object.IsValid(pt) Then Return 

 With Paint
   .Begin(pn.Children[0])
   .Brush = .Color(Color.Red)
   .Arc(pt.X, pt.Y, 2 * ct, Rad(0), Rad(360), False)
   If ct > 1 Then 
     .Stroke
   Else 
     .Fill
   Endif 
   .End
 End With

End

Note

[1] Qualora la mappa non appaia, verificare la versione GoogleMap, ed eventualmente modificarla in questa parte del codice: ["version": "999"]
Al riguardo vedere: Conoscere la versione più recente di Google Maps satellite

[2] Vedere anche la pagina: Disegnare sulla MapView dei cerchi concentrici al punto ove si è cliccato con il puntatore del mouse