写点什么

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

作者:向阳逐梦
  • 2023-08-15
    四川
  • 本文字数:1591 字

    阅读完需:约 5 分钟

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

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

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

MapDashLine.qml 属性:

  • beginCoordinate:线段起始经纬度坐标

  • endCoordinate:线段终点经纬度坐标

  • lineDash:虚线样式

  • lineColor:虚线颜色

  • lineWidth:虚线粗细

  • textColor:显示距离文字颜色

  • textPixelSize:字体大小

MapDashLine.qml 源码(我使用的是 Qt5.15):

import QtQuick 2.15import 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()    }}
复制代码


发布于: 刚刚阅读数: 7
用户头像

向阳逐梦

关注

人生享受编程,编程造就人生! 2022-06-01 加入

某公司芯片测试工程师,嵌入式开发工程师,InfoQ签约作者,阿里云星级博主,华为云·云享专家。座右铭:向着太阳,追逐梦想!

评论

发布
暂无评论
QT使用QML实现地图绘制虚线_向阳逐梦_InfoQ写作社区