qml在osm瓦片地图上画一个矩形。鼠标事件，使能 hoverEnabled:false //鼠标悬停也会触发（这个地方平时要关掉，要不然鼠标动一下，就触发点击信号）

组件
MapRuler.qml

//MapRuler.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtLocation 5.12
import QtPositioning 5.12

// 一次测距里包含多个标记点以及连线
MapItemGroup{
  id: control
  MapPolyline {
    id: item_line
    line.color: "red"
    line.width: 2
    //平滑后放大有点卡
    //layer.enabled: true
    //layer.smooth: true
    //layer.samples: 8
    function getDistanceCount(){
      var distance_count=0;
      for(var i=1;i<pathLength();i++){
        distance_count+=item_line.coordinateAt(i).distanceTo(item_line.coordinateAt(i-1));
      }
      return Math.round(distance_count);
    }
  }

  MapItemView{
    id: item_view
    add: Transition {}
    remove: Transition {}
    model: ListModel{
      id: item_model
    }
    delegate: MapQuickItem{
      id: ietm_delegate
      sourceItem: Rectangle {
        width: 14
        height: 14
        radius: 7
        color: "white"
        border.width: 2
        border.color: "red"
        Rectangle{
          anchors.left: parent.right
          anchors.top: parent.bottom
          width: item_text.width+5+5+14+5
          height: item_text.height+10
          border.color: "gray"
          Text {
            id: item_text
            x: 5
            anchors.verticalCenter: parent.verticalCenter
            text: index<=0
                  ? "起点"
                  : (index==item_model.count-1)
                    ? ("总长 "+item_line.getDistanceCount()/1000+" km")
                    :(Math.round(ietm_delegate.coordinate.distanceTo(item_line.coordinateAt(index-1)))/1000+" km")
          }
          Rectangle{
            width: 14
            height: 14
            anchors.right: parent.right
            anchors.rightMargin: 5
            anchors.verticalCenter: parent.verticalCenter
            border.color: "red"
            Text {
              color: "red"
              anchors.centerIn: parent
              text: "+"
              rotation: 45
            }
            MouseArea{
              anchors.fill: parent
              onClicked: {
                //最后一个全部删除,否则一个一个的删除
                //为0的时候发送信号给group请求删除
                if(index==item_model.count-1){
                  item_line.path=[];
                  item_model.clear();
                  //control.destroy();
                }else{
                  item_line.removeCoordinate(index);
                  item_model.remove(index);
                }
              }
            }
          }
        }

        //Component.onDestruction: console.log("destory item");
      }
      //通过listmodel来设置数据
      coordinate{
        latitude: latitudeval
        longitude: longitudeval
      }
      anchorPoint: Qt.point(sourceItem.width/2, sourceItem.height/2)
    }
  }
  function destoryLine()
  {
      item_line.path=[];
      item_model.clear();
  }

  function appendPoint(coord){
 
    item_model.append({"latitudeval":coord.latitude,"longitudeval":coord.longitude});
    item_line.addCoordinate(coord);
  }

  function followMouse(coord){
    if(item_line.pathLength()<=0)
      return;
    if(item_line.pathLength()===item_model.count){
      item_line.addCoordinate(coord);
    }else{
      item_line.replaceCoordinate(item_line.pathLength()-1,coord);
    }
  }

  function closePath(){
    while(item_line.pathLength()>item_model.count){
      item_line.removeCoordinate(item_line.pathLength()-1);
    }
  }
}

添加组件

Component{
    id: ruler_comp
    MapRuler
    {
    }
  }

使用组件

 MouseArea
  {
  	//id标识
    id:add_Rectangle
    //鼠标事件覆盖在整个父类
    anchors.fill: parent
    //使能条件
    enabled:rect_flag != 0
    //鼠标触发条件.悬停触发
    hoverEnabled:false //鼠标悬停也会触发（这个地方平时要关掉，要不然鼠标动一下，就触发点击信号）
    onClicked:
    {
    //画矩形标志为1，且左键
      if(rect_flag == 1 && mouse.button == Qt.LeftButton)
      {
        if(!ruler)
        {
          ruler = ruler_comp.createObject(the_map);
          if(ruler)
          {
            the_map.addMapItemGroup(ruler)
          }
        }
        if(ruler && i< 2){
          i=i+1;
          console.log("111 " + i);
          var coord = the_map.toCoordinate(Qt.point(mouseX,mouseY),false);
          item_rect_point_List.push(coord);
          console.log(item_rect_point_List)
          ruler.appendPoint(coord);
        }
      }
    }
    onPositionChanged: {
      if(rect_flag === 1 && i < 2)
      {
        if(ruler)
        {
          var coord = the_map.toCoordinate(Qt.point(mouseX,mouseY),false);
          ruler.followMouse(coord);
        }
      }
    }
    onDoubleClicked: {
      if(rect_flag === 1)
      {
        if(ruler)
        {
          ruler.closePath();
          ruler.destoryLine();
          ruler = null;
        }
        var component = Qt.createComponent("MyRectangle.qml")
        console.log(component.errorString())

        if(component.status === Component.Ready)
        {
          var rect = component.createObject(the_map)
          var point = Qt.point(mouseX,mouseY);
          var coord = the_map.toCoordinate(point);

          if(item_rect_point_List.length === 2)
          {
            rect.myCoordinate1 = item_rect_point_List[0]
            rect.myCoordinate2 = item_rect_point_List[1]
            qmlSigRect(rect.myCoordinate1.latitude,rect.myCoordinate1.longitude,rect.myCoordinate2.latitude,rect.myCoordinate2.longitude)
            the_map.addMapItemGroup(rect);
            rect.rectClickedSig.connect(handleMouseAreaClickedRect);
            console.log("rect.left.top.lat" + rect.myCoordinate1.latitude + "rect.left.top.lat" + rect.myCoordinate1.longitude +
                        "rect.right.bottom.lat" + rect.myCoordinate2.latitude + "rect.right.bottom.lng" +rect.myCoordinate2.longitude);
          }
          item_rect_point_List.splice(0,item_rect_point_List.length)
        }
        rect_flag = 0;
        i=0;
        console.log("rect_flag",rect_flag)
      }
    }
  }