I have a qml map, and a qml quick map item, wen I click on a point on map it places quick map item, well my quick map item is an image which is 300px in 300px, I want to get the coordinate of point(200,200) of image on map, I know that there is a function which is named item.mapToItem(item,x,y), Well I tried to use this function but it returns wrong values,Here is my whole code
Map {
id:map
anchors.fill: parent
plugin: mapPlugin
center: QtPositioning.coordinate(59.91, 10.75) // Oslo
zoomLevel: 7
MapQuickItem{
id:imagQuickitem
zoomLevel:1
sourceItem:Image {
id:image
asynchronous:true
smooth: false
transformOrigin: Item.Center
antialiasing: false
//visible: false
MouseArea{
anchors.fill: parent ;
onPressed:
{
if(!gcplistener && currentTool=="addgcp"){
gcpimgposition=Qt.point(mouse.x,mouse.y);
console.log("The first point is set")
currentgcppoint.row=gcpimgposition.x;
currentgcppoint.column=gcpimgposition.y;
gcplistener=true;
}
console.log(mouse.x + " "+ mouse.y)
console.log( imagQuickitem.mapToItem(map,mouse.x,mouse.y).x+ " "+imagQuickitem.mapToItem(map,mouse.x,mouse.y).y)
console.log( imagQuickitem.mapFromItem(map,mouse.x,mouse.y).x+ " "+imagQuickitem.mapFromItem(map,mouse.x,mouse.y).y)
}
}
}
coordinate: QtPositioning.coordinate(59.91, 10.75)
}
Row {
id: containerRow
layoutDirection: rightEdge() ? Qt.LeftToRight : Qt.RightToLeft
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: rightEdge() ? parent.right : undefined
anchors.left: rightEdge() ? undefined : parent.left
Button {
id: sliderToggler
width: 32
height: 96
checkable: true
checked: true
anchors.verticalCenter: parent.verticalCenter
transform: Scale {
origin.x: rightEdge() ? 0 : sliderToggler.width / 2
xScale: rightEdge() ? 1 : -1
}
style: ButtonStyle {
background: Rectangle {
color: "transparent"
}
}
property real shear: 0.333
property real buttonOpacity: 0.5
property real mirror : rightEdge() ? 1.0 : -1.0
Rectangle {
width: 16
height: 48
color: "seagreen"
antialiasing: true
opacity: sliderToggler.buttonOpacity
anchors.top: parent.top
anchors.left: sliderToggler.checked ? parent.left : parent.horizontalCenter
transform: Matrix4x4 {
property real d : sliderToggler.checked ? 1.0 : -1.0
matrix: Qt.matrix4x4(1.0, d * sliderToggler.shear, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0)
}
}
Rectangle {
width: 16
height: 48
color: "seagreen"
antialiasing: true
opacity: sliderToggler.buttonOpacity
anchors.top: parent.verticalCenter
anchors.right: sliderToggler.checked ? parent.right : parent.horizontalCenter
transform: Matrix4x4 {
property real d : sliderToggler.checked ? -1.0 : 1.0
matrix: Qt.matrix4x4(1.0, d * sliderToggler.shear, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0)
}
}
}
Rectangle {
id: sliderContainer
height: parent.height
width: sliderRow.width + 10
visible: sliderToggler.checked
color: Qt.rgba( 0, 191 / 255.0, 255 / 255.0, 0.07)
property var labelBorderColor: "transparent"
property var slidersHeight : sliderContainer.height
- rowSliderValues.height
- rowSliderLabels.height
- sliderColumn.spacing * 2
- sliderColumn.topPadding
- sliderColumn.bottomPadding
MouseArea{
onPressed: {
console.log("test")
}
}
Column {
id: sliderColumn
spacing: 10
topPadding: 16
bottomPadding: 48
anchors.centerIn: parent
// the sliders value labels
Row {
id: rowSliderValues
spacing: sliderRow.spacing
width: sliderRow.width
height: 32
property real entryWidth: zoomSlider.width
Rectangle{
color: labelBackground
height: parent.height
width: parent.entryWidth
border.color: sliderContainer.labelBorderColor
Label {
id: labelZoomValue
text: zoomSlider.value.toFixed(3)
font.pixelSize: fontSize
rotation: -90
anchors.centerIn: parent
}
}
Rectangle{
color: labelBackground
height: parent.height
width: parent.entryWidth
border.color: sliderContainer.labelBorderColor
Label {
id: labelBearingValue
text: opacityslider.value.toFixed(2)
font.pixelSize: fontSize
rotation: -90
anchors.centerIn: parent
}
}
Rectangle{
color: labelBackground
height: parent.height
width: parent.entryWidth
border.color: sliderContainer.labelBorderColor
Label {
id: labelTiltValue
text: imagescale.value.toFixed(2)
font.pixelSize: fontSize
rotation: -90
anchors.centerIn: parent
}
}
Rectangle{
color: labelBackground
height: parent.height
width: parent.entryWidth
border.color: sliderContainer.labelBorderColor
Label {
id: labelFovValue
text: rotationslider.value.toFixed(2)
font.pixelSize: fontSize
rotation: -90
anchors.centerIn: parent
}
}
} // rowSliderValues
// The sliders row
Row {
spacing: -10
id: sliderRow
height: sliderContainer.slidersHeight
C2.Slider {
id: zoomSlider
height: parent.height
orientation : Qt.Vertical
from : map.minimumZoomLevel
to : map.maximumZoomLevel
value : map.zoomLevel
onValueChanged: {
map.zoomLevel = value
}
}
C2.Slider {
id: opacityslider
height: parent.height
from: 0
to: 1
orientation : Qt.Vertical
value: image.opacity
onValueChanged: {
image.opacity = value;
}
}
C2.Slider {
id: imagescale
height: parent.height
orientation : Qt.Vertical
from: 0;
to: 5
value: image.scale
onValueChanged: {
image.scale= value;
rectangular.scale=value;
}
}
C2.Slider {
id: rotationslider
height: parent.height
orientation : Qt.Vertical
from: 0
to: 360
value: image.rotation
onValueChanged: {
image.rotation = value;
rectangular.rotation=value
}
}
} // Row sliders
// The labels row
Row {
id: rowSliderLabels
spacing: sliderRow.spacing
width: sliderRow.width
property real entryWidth: zoomSlider.width
property real entryHeight: 64
Rectangle{
color: labelBackground
height: parent.entryHeight
width: parent.entryWidth
border.color: sliderContainer.labelBorderColor
Label {
id: labelZoom
text: "Map Zoom"
font.pixelSize: fontSize
rotation: -90
anchors.centerIn: parent
}
}
Rectangle{
color: labelBackground
height: parent.entryHeight
width: parent.entryWidth
border.color: sliderContainer.labelBorderColor
Label {
id: labelBearing
text: "Image Opacity"
font.pixelSize: fontSize
rotation: -90
anchors.centerIn: parent
}
}
Rectangle{
color: labelBackground
height: parent.entryHeight
width: parent.entryWidth
border.color: sliderContainer.labelBorderColor
Label {
id: labelTilt
text: "Image Scale"
font.pixelSize: fontSize
rotation: -90
anchors.centerIn: parent
}
}
Rectangle{
color: labelBackground
height: parent.entryHeight
width: parent.entryWidth
border.color: sliderContainer.labelBorderColor
Label {
id: labelFov
text: "Image Rotation"
font.pixelSize: fontSize
rotation: -90
anchors.centerIn: parent
}
}
} // rowSliderLabels
} // Column
} // sliderContainer
}
MouseArea {
anchors.fill: parent
propagateComposedEvents: true
onClicked: mouse.accepted = false;
onReleased: mouse.accepted = false;
onDoubleClicked: mouse.accepted = false;
onPositionChanged: mouse.accepted = false;
onPressAndHold: mouse.accepted = false;
onPressed: {
mouse.accepted = false;
if(imagesourcepoint==null){
imagesourcepoint=Qt.point(mouse.x,mouse.y)
imagQuickitem.coordinate= map.toCoordinate(imagesourcepoint)
rectangular.topLeft=map.toCoordinate(imagesourcepoint);
var w=((image.width*0.0016)+map.toCoordinate(imagesourcepoint).longitude);
var h=(map.toCoordinate(imagesourcepoint).latitude)+(image.height*1.5);
console.log(w)
console.log(h)
if(!image.visible){
image.visible=true
}
}
switch(currentTool){
case "addgcp":
gcppoint=map.toCoordinate(Qt.point(mouse.x,mouse.y));
if(gcplistener){
row.text=gcpimgposition.x;
col.text=gcpimgposition.y;
x.text=gcppoint.longitude;
y.text=gcppoint.latitude;
inputgcpDialog.open();
}else{
currentgcppoint.lat=gcppoint.latitude;
currentgcppoint.lon=gcppoint.longitude;
}
if(gcpimgposition==null&&gcplistener==false){
//user must click on image
//FIXME:
messages.displayMessage("Please click on image, not outside");
}
gcpimgposition==null;
break;
case "moveimage":
//moving image
if(moveimageEnabled){
imagQuickitem.coordinate= map.toCoordinate(Qt.point(mouse.x,mouse.y))
}
break;
}
console.log(map.width + " "+ map.height)
console.log("z: "+map.zoomLevel )
console.log("image.mapToItem: "+ image.mapToItem(map,0,0).x+ " "+image.mapToItem(map,0,0).y)
console.log("image coordinate on map: "+ image.mapToItem(map,image.width,image.height).x+ " "+image.mapToItem(map,image.width,image.height).y)
// console.log( map.mapFromItem(null,0,0).x+ " "+map.mapFromItem(null,0,0).y)
// console.log( map.mapToItem(imagQuickitem,0,0).x+ " "+map.mapToItem(imagQuickitem,0,0).y)
// console.log( map.mapFromItem(imagQuickitem,0,0).x+ " "+map.mapFromItem(imagQuickitem,0,0).y)
onPressed: console.log('latitude = '+ (map.toCoordinate(Qt.point(mouse.x,mouse.y)).latitude),
'longitude = '+ (map.toCoordinate(Qt.point(mouse.x,mouse.y)).longitude));
}
}
}
well, my problem is in part Maps Mouse Area which I expect to get the coordinate of clicked point on Map object based o quickmapitems coordinate using mapToItem function.
My main function is in Mouse pressed button,In above code I expect image.mapToItem(map,0,0).y) to return the same as console.log(mouse.x + " "+ mouse.y) as the mouse.x and mouse.y are the position of (0,0) of image which are mapped on Map items coordinate, I know how to converts maps coordinate to geographic coordinate
I also kept some codes of sliders in map control as I think there must be a relation between these parameters and main map controls mapToItem function
ColumnLayout, theGroupBox, theRowLayout. Remove sliders. Remove commented out code. Make a game out of seeing how few characters you can use to reproduce the problem. Then edit your question with that code, and include (a) what you do (e.g. click on...), (b) what you EXPECTED to happen, and (c) what happened instead. Your current code and question are unlikely to get you help because it is too much irrelevant code, and not clear what your problem is. - PhrogzanchorPointon aMapQuickItemto choose what will be at a location? Also, it sounds like you might wanttoCoordinate()which converts a mouse location to a coordinate on the map. - Phrogz