qml端写一个圆类，在主函数实例化成对象，画个圆

mengzhi啊

于 2024-07-21 18:48:27 发布

阅读量120

点赞数 2

文章标签： qml

本文链接：https://blog.csdn.net/sunflower_2020/article/details/140591915

版权

// A code block
var foo = 'bar';

import QtQuick 2.4
import QtPositioning 5.6
import QtLocation 5.9
//import QtQuick.Controls 2.12

MapItemGroup {
  id: groupPolyCircle
  property var myCoordinate: QtPositioning.coordinate(24.9394, 102.6394)
  property var distance:15000.0
  property color myColor: '#1f1e0b'
  property string customText: "\n\n"
  property var border_width: 0
  property var z_value: 0
   property var circle_opacity: 0
    z:z_value
//19dffb
  MapCircle {
    id:circle
    opacity:circle_opacity
    border.width: groupPolyCircle.border_width
    border.color: '#19dffb'
    center: groupPolyCircle.myCoordinate
    radius: groupPolyCircle.distance
    color: groupPolyCircle.myColor
    visible: true

  }
  MouseArea{
    id:mouse_circleInfo
    anchors.fill: circle
    acceptedButtons: Qt.RightButton
    onClicked: {
        groupPolyCircle.destroy();
      circleClickedSignal(groupPolyCircle.customText,groupPolyCircle.myColor,circle.center, circle.radius);
      console.log("Clicked on circle at (" + circle.center + ", " + circle.radius + ")")
    }
  }

  MapQuickItem {
    coordinate:QtPositioning.coordinate(circle.center.latitude+((groupPolyCircle.distance/2)/1113)*0.01,circle.center.longitude-((groupPolyCircle.distance/2)/1000)*0.01);
    sourceItem: Text {
      text: groupPolyCircle.customText
      color: "black"
      font.pixelSize: 20
      wrapMode: Text.Wrap
      fontSizeMode: Text.HorizontalFit //设置文字水平自适应宽度
     // width: 200 // Text控件宽度

//      verticalAlignment: Text.AlignVCenter
//      horizontalAlignment: Text.AlignHCenter
    }
  }

  function destroy_circle()
  {
        groupPolyCircle.destroy();
        circle.destroy();
  }

  //latitude 纬度 longitude 经度
  function calculateRadius(coord1, coord2)
  {
    var d=Math.PI/180;
    var f=coord1.latitude*d, h=coord2.latitude*d;
    var i=coord1.longitude*d - coord2.longitude*d;
    var e=(1 - Math.cos(h - f) + (1 - Math.cos(i)) * Math.cos(f) * Math.cos(h)) / 2;
//    console.log("radius ::"+2 * 6378137 * Math.asin(Math.sqrt(e)))
    return 2 * 6378137 * Math.asin(Math.sqrt(e));
  }

}

加载组件

  Component {
    id: circleComponent
    MyCircle {}
  }

主函数中写一个槽函数触发，画一个圆

  //画//空域的圆
  onChSigAddCircle: {
    //空域的圆
    var component = Qt.createComponent("MyCircle.qml")
    if(component.status === Component.Ready)
    {

      var circle = component.createObject(the_map)
      var point = Qt.point(0,0);
      var coord = the_map.toCoordinate(point);

      coord.z_value=10;
      coord.latitude = lat;
      coord.longitude = lng;
      circle.myCoordinate = coord;
      circle.distance = radius
        //青色的
      circle.myColor = '#c8f3f9';
      circle.customText = str;
      circle.border_width=5;
      circle.circle_opacity=0.5;

      the_map.addMapItemGroup(circle);

    }
}