我正在使用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"
}
}
}
网格看起来像这样。
答案 0 :(得分:0)
要绘制网格,请使用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()
}
}
}