是否可以在 qml 中创建地图网格？

Question

我正在使用qml 开发我的pyqt5 应用程序，并希望将地图网格添加到我的地图中。但我有点不知道从哪里开始。那么是否有可能制作一个，如果是的话，是否有一个小例子或类似的东西让我开始研究？这将是我的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

要绘制网格，请使用Canvas，如下所示

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()
        }
    }
}