QML QtLocation地图应用学习-3：实现面积测量

1.实现思路

参照网上的测面积功能，界面效果和测距差不多，在点和线的基础上多了一个填充区域。

点和线参照上一篇博客：https://blog.csdn.net/gongjianbo1992/article/details/103674047

填充区域使用 MapPolygon ，但是这个类接口很少，大部分操作还是借住折线 MapPolyline 来完成。

这个功能最主要的是根据坐标点的集合求面积，在网上找了很多参考代码，大部分思路是球面多边形面积计算，但是计算结果都不一样，有误差。

最后我用的是别人从高德的API里提取出来的函数。下面给出部分参考链接：

JS实现（首尾太近会算错）：https://blog.csdn.net/neil89/article/details/49331641

Py实现：https://www.cnblogs.com/c-w20140301/p/10308431.html

Java参照的高德API：https://blog.csdn.net/zdb1314/article/details/80661602

根据球面面积计算公式：https://wenku.baidu.com/view/4e213e27162ded630b1c59eef8c75fbfc67d94e2.html

2.实现代码及git链接

下面是实现效果：

Area组件实现代码：

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

// 计算地图连线围成面积
MapItemGroup{
    id: control

    property bool _pathClose: false
    property double areaValue: 0
    //MapPolygon很多方法没有，所以拿MapPolyline来记录坐标点
    //优化的话自定义cpp类型
    MapPolygon{
        id: item_polygon
        color: Qt.rgba(0,1,0,0.4);
        border.width: 0
        path: item_line.path
    }
    MapPolyline{
        id: item_line
        line.width: 1
        line.color: "red"
    }

    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"
                //Component.onDestruction: console.log("destory item");

                Loader{
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: parent.bottom
                    anchors.margins: 5
                    sourceComponent: (_pathClose&&index==(item_model.count-1))?area_comp:null_comp
                }
            }
            //通过listmodel来设置数据
            coordinate{
                latitude: latitudeval
                longitude: longitudeval
            }
            anchorPoint: Qt.point(sourceItem.width/2, sourceItem.height/2)
        }
    }

    Component{
        id: null_comp
        Item{}
    }
    Component{
        id: area_comp
        Rectangle{
            width: area_text.width+5+5+14+5
            height: area_text.height+10
            border.color: "gray"
            Text {
                id: area_text
                x: 5
                anchors.verticalCenter: parent.verticalCenter
                text: control.areaValue+" m^2"
            }
            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: {
                        clearPath();
                    }
                }
            }
        }
    }

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

    function followMouse(coord){
        if(item_line.pathLength()item_model.count){
            item_line.removeCoordinate(item_line.pathLength()-1);
        }
        if(item_line.pathLength()