qmlにマップグリッドを作成することはできますか？

Question

pyqt5のアプリケーションでqmlを使用していて、マップグリッドをマップに追加したいとします。しかし、どこから始めたらいいのかわかりません。それで、もしそれを作ることさえ可能ですか？そうであれば、小さな事例がありますか？これは私のmap.qmlです。

import QtQuick 2.0 
import QtQuick.Controls 2.2 
import QtQuick.Window 2.0 
import QtLocation 5.9 
import QtPositioning 5.5 


Item { 
id: myItem 

Plugin { 
    id: mapPlugin 
    name: "mapboxgl" 
} 

Map { 
    id: map 
    objectName: "mapboxgl" 
    property double lat: 47.368649 
    property double lon: 8.5391825 
    visible: true 
    anchors.fill: parent 
    plugin: mapPlugin 
    center { 
     latitude: lat 
     longitude: lon 
    } 
    zoomLevel: 14 

    ListView { 
     height: 1 
     model: map 
     delegate: Text { 
      text: "Latitude: " + (center.latitude).toFixed(3) + " Longitude: " + (center.longitude).toFixed(3) 
      } 
     } 

     MouseArea{ 
      id: mouseArea 
      property var positionRoot: map.toCoordinate(Qt.point(mouseX, mouseY)) 
      anchors.fill: parent 
      onClicked: { 
        var component = Qt.createComponent("addAttribute.qml") 
        if (component.status === Component.Ready) { 
        var dialog = component.createObject(parent,{popupType: 1}) 
        dialog.sqlPosition = positionRoot 
        dialog.show() 
       } 
      } 
     } 

    MapQuickItem { 
     id: marker 
     objectName: "marker" 
     visible: false 
     anchorPoint.x: 0.5 * image.width 
     anchorPoint.y: image.height 
     sourceItem: Image { 
      id: image 
      source: "icons/markerIcon.png" 
      MouseArea{ 
       anchors.fill: parent 
       onClicked: { 
        ToolTip.timeout = 2000 
        ToolTip.visible = true 
        ToolTip.text = qsTr("Coordinates: %1, %2").arg(marker.coordinate.latitude).arg(marker.coordinate.longitude) 
       } 
      } 
     } 
    } 

    MapItemView { 
     model: markerModel 
     delegate: MapQuickItem{ 
      anchorPoint: Qt.point(2.5, 2.5) 
      coordinate: QtPositioning.coordinate(markerPosition.x, markerPosition.y) 
      zoomLevel: 0 
      sourceItem: Column{ 
        Image { 
         id: imag 
         source: "icons/markerIcon.png" 
         MouseArea{ 
          anchors.fill: parent 
          onClicked: { 

           ToolTip.timeout = 2000 
           ToolTip.visible = true 
           ToolTip.text = qsTr("Coordinates: %1, %2".arg(markerPosition.x).arg(markerPosition.y)) 
          } 
         } 
        } 

        Text { 
         text: markerTitle 
         font.bold: true 
        } 
      } 
     } 
    } 
    MapParameter { 
    type: "source" 
    property var name: "coordinates" 
    property var sourceType: "geojson" 
    property var data: '{ "type": "FeatureCollection", "features": \ 
     [{ "type": "Feature", "properties": {}, "geometry": { \ 
     "type": "LineString", "coordinates": [[ 8.541484, \ 
     47.366850 ], [8.542171, 47.370018],[8.545561, 47.369233]]}}]}' 
    } 

    MapParameter { 
     type: "layer" 
     property var name: "layer" 
     property var layerType: "line" 
     property var source: "coordinates" 
     property var before: "road-label-small" 
    } 

    MapParameter { 
     objectName: "paint" 
     type: "paint" 
     property var layer: "layer" 
     property var lineColor: "black" 
     property var lineWidth: 8.0 
    } 

    MapParameter { 
     type: "layout" 
     property var layer: "layer" 
     property var lineJoin: "round" 
     property var lineCap: "round" 
    } 
} 
} 

グリッドはこのように見えます。

Answer 1

答えがある

import QtQuick 2.0 
import QtQuick.Window 2.0 
import QtLocation 5.5 
import QtPositioning 5.5 

Window { 
    visible: true 
    title: "Python OSM" 
    width: 640 
    height: 480 
    Map { 
     id: map 
     anchors.fill: parent 
     plugin: Plugin { 
      name: "osm" 
     } 
     center: QtPositioning.coordinate(-12.0464, -77.0428) 
     zoomLevel: 14 
    } 
    Canvas { 
     id: root 
     anchors.fill : parent 
     property int wgrid: 20 
     onPaint: { 
      var ctx = getContext("2d") 
      ctx.lineWidth = 1 
      ctx.strokeStyle = "black" 
      ctx.beginPath() 
      var nrows = height/wgrid; 
      for(var i=0; i < nrows+1; i++){ 
       ctx.moveTo(0, wgrid*i); 
       ctx.lineTo(width, wgrid*i); 
      } 

      var ncols = width/wgrid 
      for(var j=0; j < ncols+1; j++){ 
       ctx.moveTo(wgrid*j, 0); 
       ctx.lineTo(wgrid*j, height); 
      } 
      ctx.closePath() 
      ctx.stroke() 
     } 
    } 
}