快捷導(dǎo)航

QT使用QML實(shí)現(xiàn)地圖繪制虛線(xiàn)的示例代碼

更新時(shí)間：2023年07月04日 11:45:11 作者：喵喵叫的猴

QML提供了MapPolyline用于在地圖上繪制線(xiàn)段，這篇文章主要為大家詳細(xì)介紹了QT如何使用QML實(shí)現(xiàn)在地圖上繪制虛線(xiàn)，需要的小伙伴可以參考一下

QML提供了MapPolyline用于在地圖上繪制線(xiàn)段，該線(xiàn)段是實(shí)線(xiàn)，因此我使用Canvas自定義繪制的方式在地圖上繪制線(xiàn)段，如圖：

鼠標(biāo)在地圖上點(diǎn)擊后，在點(diǎn)擊位置添加圖標(biāo) ，當(dāng)有多個(gè)圖標(biāo)被添加到地圖上后，計(jì)算各個(gè)圖標(biāo)間的距離，并創(chuàng)建一個(gè)新的虛線(xiàn)線(xiàn)段組件，連接兩個(gè)圖標(biāo)點(diǎn)，顯示距離數(shù)值。如果對(duì)自定義圖標(biāo)添加拖動(dòng)屬性，效果如圖：

MapDashLine.qml屬性：

beginCoordinate：線(xiàn)段起始經(jīng)緯度坐標(biāo)
endCoordinate：線(xiàn)段終點(diǎn)經(jīng)緯度坐標(biāo)
lineDash：虛線(xiàn)樣式
lineColor：虛線(xiàn)顏色
lineWidth：虛線(xiàn)粗細(xì)
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)
            //**繪制虛線(xiàn)
            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()
    }
}

到此這篇關(guān)于QT使用QML實(shí)現(xiàn)地圖繪制虛線(xiàn)的示例代碼的文章就介紹到這了,更多相關(guān)Qt QML地圖繪制虛線(xiàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: