qml加载离线osm瓦片地图，并画矩形，画图片

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtPositioning 5.12
import QtLocation 5.12
import QtQuick.Controls 2.14

Rectangle {
  id:control;
   visible: true;
  width: 600;
  height: 700;
  
  /************************这一段就是加载瓦片地图************/
Map{
    property variant scaleLengths: [5, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 20000, 50000, 100000, 200000, 500000, 1000000, 2000000]
    id: the_map
    copyrightsVisible:false //此属性具有版权声明的可见性。
    anchors.fill: parent
    minimumZoomLevel: 3
    maximumZoomLevel: 16
    zoomLevel: m_level
    center: QtPositioning.coordinate(30.68, 104.06)
    plugin:Plugin{
      name: "osm"
      PluginParameter{
        name: "osm.mapping.offline.directory"
        value: "D:/code/Display_control/display_control/code/map/"
      }
    }
  /************************上面就是加载瓦片地图************/

/*******************************在地图上画个矩形*************************************/
    Rectangle{
      anchors{
        left: the_map.left;
        bottom: the_map.bottom
        margins: 5
      }
      width:content.width+20;
      height:content.height+20;
      Text{
        id: content;
        x:10;
        y:5;
        font.pixelSize: 14;
        text: "Zoom Level "+Math.floor(the_map.zoomLevel)+" Center:"+the_map.center.latitude+"  "+the_map.center.longitude
      }
    }
    /***************/

    onCenterChanged:{
      scaleTimer.restart()
      if (map.followme)
        if (map.center != positionSource.position.coordinate) map.followme = false
    }

    onZoomLevelChanged:{
      scaleTimer.restart()

      if (map.followme) map.center = positionSource.position.coordinate
    }

	//加载行政区域，省界线
    property var region_flag: 1
    MouseArea {
      id: creat_admin_region
      anchors.fill: parent
      enabled:the_map.region_flag != 0
      property var city_coordinate_list:[]
      onDoubleClicked: {
        for(var i=0;i<control.map_file_num;i++)
        {
          city_coordinate_list.splice(0,city_coordinate_list.length)
          qmlRequireCityNum(i);
          for(var t=0; t<control.lati.length; t++)
          {
            var coord0=QtPositioning.coordinate(control.longti[t],control.lati[t])
            city_coordinate_list.push(coord0);
          }

          var component = Qt.createComponent("AdminRegion.qml");
          console.log(component.errorString());
          if(component.status === Component.Ready)
          {
            var polygon = component.createObject(the_map)
            polygon.admin_region_list=city_coordinate_list

            polygon.city_name=control.name

            polygon.level=control.level

            polygon.center_lati=control.center[0]
            polygon.center_longti=control.center[1]

            polygon.showAdminRegionCityInfo.connect(showAdminRegionCityInfo);


            the_map.addMapItemGroup(polygon)
          }
        }

        the_map.region_flag = 0;
      }
    }



//地图宽度改变
    onWidthChanged:{
      scaleTimer.restart()
    }
//地图高度改变
    onHeightChanged:{
      scaleTimer.restart()
    }

//地图上放3张图片
    Item{
      id: scale
      z: the_map.z + 3
      visible: scaleText.text != "0 m"
      anchors.bottom: parent.bottom;
      anchors.right: parent.right
      anchors.margins: 20
      height: scaleText.height * 2
      width: scaleImage.width
      Image {
        id: scaleImageLeft
        source: "./resource/scale_end.png"
        anchors.bottom: parent.bottom
        anchors.right: scaleImage.left
      }
      Image {
        id: scaleImage
        source: "./resource/scale.png"
        anchors.bottom: parent.bottom
        anchors.right: scaleImageRight.left
      }
      Image {
        id: scaleImageRight
        source: "./resource/scale_end.png"
        anchors.bottom: parent.bottom
        anchors.right: parent.right
      }
      Label{
        id:scaleText;
        x:10;
        y:5;
        font.pixelSize: 14;
        text:"0 m"
      }
    }
    
    //定时器
    Timer {
      id: scaleTimer
      interval: 100
      running: false
      repeat: false
      onTriggered: {
        map.calculateScale()
      }
    }
 
  }