QML地图自定义矢量路径图组件

喵喵叫的猴

已于 2022-01-27 12:23:28 修改

阅读量1.6k

点赞数 3

分类专栏： QML QML地图文章标签： qml map

于 2021-12-30 14:52:50 首次发布

本文链接：https://blog.csdn.net/zjgo007/article/details/122236221

版权

QML 同时被 2 个专栏收录

49 篇文章 36 订阅

订阅专栏

QML地图

15 篇文章 35 订阅

订阅专栏

本文介绍了一款名为MyMapVectorLine的Qml组件，它扩展了MapPolyline功能，允许在地图上绘制带有方向指示的路线。用户可以自定义路径颜色、线宽、标志图片样式及大小，并动态调整颜色。组件能根据添加或移除的数据自动计算标志朝向。示例代码和Demo已提供，方便开发者使用。

摘要由CSDN通过智能技术生成

Qml地图中提供了MapPolyline用于在地图上绘制路线，但是该控件无法显示目标的方位矢量，因此我在MapPolyline的基础上制作了MyMapVectorLine，该控件可自定义矢量标志图片样式,并根据存入数据自动计算标志方位朝向，组件颜色和标志可动态设置，效果如图：

MyMapVectorLine属性：

color:路径和标志颜色

lineWidth:路径线宽度

markWidth:标志的宽

markHeight:设置标志的高

markSource:设置标志的图片源

MyMapVectorLine方法：

appendPoint(coordinate c):往矢量路径中添加经纬度数据，数据添加后组件会根据最新数据方位设置标志朝向

removePoint():从矢量路径中移除最后一个数据，该数据移除后组件会根据最新数据方位设置标志朝向

clear():清空矢量路径中的所有数据

Demo地址（MyMapVectorLine.qml组件已在Demo中加载）：

MyMapVectorLinehttps://github.com/zjgo007/QmlDemo/tree/master/MyMapVectorLine

MyMapVectorLine源码：

import QtQuick 2.9
import QtLocation 5.9
import QtQml 2.9
import QtGraphicalEffects 1.0

MapItemGroup{
    id:vectorLine
    property color color: "green"
    property int lineWidth: 2
    property int markWidth: 24
    property int markHeight: 24
    property string markSource: ""
    MapPolyline{
        id:line
        line.width: lineWidth
        line.color: color
    }
    MapQuickItem {
        id:mark
        width: markWidth
        height: markHeight
        anchorPoint.x: markWidth/2
        anchorPoint.y: markHeight/2
        visible: false


        sourceItem: Image {
            id:image
            source: markSource
            sourceSize.width: markWidth
            sourceSize.height: markHeight
            ColorOverlay {
                anchors.fill: image
                source: image
                color: vectorLine.color
            }
        }
    }

    function appendPoint(coordinate){
        line.addCoordinate(coordinate)
        updateMarkRotation()
    }

    function removePoint(){
        var index = line.pathLength()-1
        line.removeCoordinate(index)
        updateMarkRotation()
    }

    function clear(){
        line.path = []
        updateMarkRotation()
    }

    function updateMarkRotation(){
        var size = line.pathLength()
        if(size<2){
            mark.visible = false
            return
        }
        var cCoordinate = line.coordinateAt(size-1)
        var lCoordinate = line.coordinateAt(size-2)
        mark.visible = true
        mark.coordinate = cCoordinate
        var rotation = lCoordinate.azimuthTo(cCoordinate)
        mark.rotation = rotation
    }

}