qml mapToItem for quickmap item - qt

Question

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

Answer 1

You must call mapToItem() to replace image of imagQuickitem.
Use below code in MouseArea
var coor = image.mapToItem(map , 0 ,0)
Thanks