qml mapToItem用于quickmap项目

时间:2017-11-01 18:58:33

标签: qt qml

我有一个qml地图和一个qml快速地图项目,我点击地图上的一个点放置快速地图项目,我的快速地图项目是300px 300px的图像,我想得到坐标在地图上的图像的点(200,200),我知道有一个名为item.mapToItem(item,x,y)的函数,我试图使用这个函数,但它返回错误的值,这是我的整个代码

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

好吧,我的问题在于部分地图鼠标区域,我期望使用mapToItem函数获得基于地图对象的点击点的坐标o quickmapitems坐标。 我的主要功能是鼠标按下按钮,在上面的代码中,我希望image.mapToItem(map,0,0).y)返回与console.log(mouse.x + " "+ mouse.y)相同的mouse.xmouse.y的位置(0,0) )映射在Map项坐标上的图像,我知道如何将地图坐标转换为地理坐标 我还在地图控件中保留了一些滑块代码,因为我认为这些参数与主要地图控件mapToItem函数之间必然存在关系

1 个答案:

答案 0 :(得分:1)

您必须调用mapToItem()来替换imagQuickitem的图像。 在MouseArea

中使用以下代码
var coor = image.mapToItem(map , 0 ,0)

谢谢