QT使用QML实现地图绘制虚线

QML提供了MapPolyline用于在地图上绘制线段，该线段是实线，因此我使用Canvas自定义绘制的方式在地图上绘制线段，如图：

鼠标在地图上点击后，在点击位置添加图标 ，当有多个图标被添加到地图上后，计算各个图标间的距离，并创建一个新的虚线线段组件，连接两个图标点，显示距离数值。如果对自定义图标添加拖动属性，效果如图：

MapDashLine.qml属性：

• beginCoordinate：线段起始经纬度坐标
• endCoordinate：线段终点经纬度坐标
• lineDash：虚线样式
• lineColor：虚线颜色
• lineWidth：虚线粗细
• textColor：显示距离文字颜色
• textPixelSize：字体大小

MapDashLine.qml源码（我使用的是Qt5.15）：

import QtQuick 2.15
import QtPositioning 5.15
 
Item {
    id:mapDashLine
    anchors.fill: parent
    property var beginCoordinate: QtPositioning.coordinate()
    property var endCoordinate: QtPositioning.coordinate()
    property var lineDash: [4,4]
    property color lineColor: "crimson"
    property int lineWidth: 2
    property color textColor: "crimson"
    property int textPixelSize: 14
    readonly property var mapItem: mapDashLine.parent
 
 
    Canvas{
        id:myCanvas
        anchors.fill: parent
        onPaint: {
            if(!mapDashLine.beginCoordinate.isValid || !mapDashLine.endCoordinate.isValid)
                return
            var ctx = getContext("2d")
            ctx.clearRect(0,0,myCanvas.width,myCanvas.height)
            ctx.strokeStyle = mapDashLine.lineColor
            ctx.lineWidth = mapDashLine.lineWidth
            ctx.setLineDash(mapDashLine.lineDash)
            //**绘制虚线
            ctx.beginPath()
            var beginPos = mapDashLine.mapItem.fromCoordinate(mapDashLine.beginCoordinate,false)
            ctx.moveTo(beginPos.x,beginPos.y)
            var endPos = mapDashLine.mapItem.fromCoordinate(mapDashLine.endCoordinate,false)
            ctx.lineTo(endPos.x,endPos.y)
            ctx.stroke()
            ctx.save()
            //**绘制文字
            var azimuth = endCoordinate.azimuthTo(beginCoordinate)
            if(azimuth>=180)
                azimuth = azimuth - 180
            var distance = endCoordinate.distanceTo(beginCoordinate)
            var text = (distance/1000).toFixed(0)+"Km"
            ctx.fillStyle = mapDashLine.textColor
            ctx.font = mapDashLine.textPixelSize+"px Arial"
            ctx.textAlign = "center"
            var centerX =  (beginPos.x+endPos.x)/2
            var centerY = (beginPos.y+endPos.y)/2
            ctx.translate(centerX,centerY)
            ctx.rotate(azimuth*Math.PI/180-Math.PI/2)
            ctx.fillText(text,0,-mapDashLine.textPixelSize/2)
            ctx.restore()
        }
    }
 
    onBeginCoordinateChanged: {
        update()
    }
    onEndCoordinateChanged: {
        update()
    }
    onLineDashChanged: {
        update()
    }
    onLineColorChanged: {
        update()
    }
    onLineWidthChanged: {
        update()
    }
    onTextColorChanged: {
        update()
    }
    onTextPixelSizeChanged: {
        update()
    }
 
    Connections{
        target: mapDashLine.mapItem
        function onZoomLevelChanged(){
            update()
        }
        function onVisibleRegionChanged(){
            update()
        }
    }
 
    function update(){
        myCanvas.requestPaint()
    }
}