2021-07-04 Qt Location开发系列教程 (四)

系列文章目录

Qt Location开发系列教程 (三)
Qt Location开发系列教程 (二)
Qt Location开发系列教程 (一)

---

前言

• 在地图中添加一个图标,图片,且可以跟随地图一起移动,放大和缩小
• 在地图中添加片定义的文字,且可以跟随地图一起移动,放大和缩小

实现方法

Map{} 有一个支持添加quickitem的类型: MapQuickItem QML Type
用它就可以添加做生意quick控件到map中
MapQuickItem 类型用于在地图上以指定的位置和大小放置任意 Qt Quick 对象。与在地图上方浮动项目相比，MapQuickItem 将跟随地图的平移（以及可选的缩放），就好像它在地图表面上一样。
该sourceItem属性包含要绘制的Qt Quick的项目，它可以是任何类型的可见式的。

一、添加图片

先建议一个 esri 地图

import QtQuick 2.15
import QtQuick.Window 2.15
import QtLocation 5.6
import QtPositioning 5.6

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Map {
        id:map
        //覆盖parent,采用依靠在bottom,自己去关联map大小
        width: parent.width
        height: parent.height
        anchors.bottom:parent.bottom

        plugin: Plugin { name: "esri" }
        center: QtPositioning.coordinate(34.23,108.87) // xi`an
        zoomLevel: 14

        // The code below enables SSAA
        layer.enabled: true
        layer.smooth: true
        property int w : width
        property int h : height
        property int pr: Screen.devicePixelRatio
        layer.textureSize: Qt.size(w  * 2 * pr, h * 2 * pr)

        Component.onCompleted: {
            for(let i = 0;i < supportedMapTypes.length;i++)
            {
                console.log(supportedMapTypes[i].name)
                if(supportedMapTypes[i].name === "World Imagery")
                {
                    activeMapType = supportedMapTypes[i];
                    break
                }
            }
            console.log("activeMapType: " + activeMapType.name)
        }
    }

}

新建一个qml,起名为MapImage

import QtQuick 2.0
import QtLocation 5.6
import QtPositioning 5.6
import QtGraphicalEffects 1.12

//图片
MapQuickItem{
    property string imagePath;//设置图片路径
    property real imageAngle: 0 //设置图片angle
    property color imageColor; //更改图片颜色
    property var imageCoord: QtPositioning.coordinate(); //设置图片要显示的位置
    id:imgItem
    sourceItem:Image {
        id: img
        width: 100
        height: 100
        source: imagePath

        //旋转
        transform:Rotation{
            origin.x: img.width / 2
            origin.y: img.height / 2
            angle: imageAngle
        }

        //支持更改图片颜色
        layer.enabled: true;
        layer.effect: ColorOverlay{
            anchors.fill:img
            source: img
            color:imageColor;
            cached:false//默认禁用,如果要启用了会占用大量cpu
        }
    }
    coordinate: imageCoord
    anchorPoint:Qt.point(img.width/2, img.height/2);
}

现在去Map中添加图片

    MapImage{
        id:image
        imagePath: "qrc:/marker 2.png"
        imageCoord: QtPositioning.coordinate(34.23,108.87)
//        imageAngle: 90  //旋转角度
//        imageColor: "green"   //更改颜色
    }

在地图中添加image

import QtQuick 2.15
import QtQuick.Window 2.15
import QtLocation 5.6
import QtPositioning 5.6

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Map {
        id:map
        //覆盖parent,采用依靠在bottom,自己去关联map大小
        width: parent.width
        height: parent.height
        anchors.bottom:parent.bottom

        plugin: Plugin { name: "esri" }
        center: QtPositioning.coordinate(34.23,108.87) // xi`an
        zoomLevel: 14

        // The code below enables SSAA
        layer.enabled: true
        layer.smooth: true
        property int w : width
        property int h : height
        property int pr: Screen.devicePixelRatio
        layer.textureSize: Qt.size(w  * 2 * pr, h * 2 * pr)

        Component.onCompleted: {
            for(let i = 0;i < supportedMapTypes.length;i++)
            {
                console.log(supportedMapTypes[i].name)
                if(supportedMapTypes[i].name === "World Imagery")
                {
                    activeMapType = supportedMapTypes[i];
                    break
                }
            }
            console.log("activeMapType: " + activeMapType.name)
            addMapItem(image)
        }
    }

    MapImage{
        id:image
        imagePath: "qrc:/marker 2.png"
        imageCoord: QtPositioning.coordinate(34.23,108.87)
//        imageAngle: 90
//        imageColor: "green"
    }

}

运行结果:

二、添加文字

同添加图片一样,只是把sourceItem:设置为Text,当然直接用也不好,一般是放在一个Rectangle内

import QtQuick 2.0
import QtLocation 5.6
import QtPositioning 5.6
import QtGraphicalEffects 1.12

//图片
MapQuickItem{
    property string mapText;//
    property var mapCoord: QtPositioning.coordinate();
    id:imgItem
    sourceItem:Rectangle{
        id:rect
        width:100
        height:30
        border.color:"gray"
        Text {
            id: txt
            text: mapText
            anchors.verticalCenter:parent.verticalCenter;
        }
    }
    coordinate: mapCoord
    anchorPoint:Qt.point(rect.width/2, rect.height/2);
}

添加到地图并显示:

**import QtQuick 2.15
import QtQuick.Window 2.15
import QtLocation 5.6
import QtPositioning 5.6

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Map {
        id:map
        //覆盖parent,采用依靠在bottom,自己去关联map大小
        width: parent.width
        height: parent.height
        anchors.bottom:parent.bottom

        plugin: Plugin { name: "esri" }
        center: QtPositioning.coordinate(34.23,108.87) // xi`an
        zoomLevel: 14

        // The code below enables SSAA
        layer.enabled: true
        layer.smooth: true
        property int w : width
        property int h : height
        property int pr: Screen.devicePixelRatio
        layer.textureSize: Qt.size(w  * 2 * pr, h * 2 * pr)

        Component.onCompleted: {
            for(let i = 0;i < supportedMapTypes.length;i++)
            {
                console.log(supportedMapTypes[i].name)
                if(supportedMapTypes[i].name === "World Imagery")
                {
                    activeMapType = supportedMapTypes[i];
                    break
                }
            }
            console.log("activeMapType: " + activeMapType.name)
//            addMapItem(image)
            addMapItem(_text)
        }
    }

    MapImage{
        id:image
        imagePath: "qrc:/marker 2.png"
        imageCoord: QtPositioning.coordinate(34.23,108.87)
        imageAngle: 90
        imageColor: "green"
    }
    MapText{
        id:_text
        mapText: "我是测试文字"
        mapCoord: QtPositioning.coordinate(34.23,108.87)
    }

}

注意

• anchorPoint 属性是需要调整的,默认是item左下角坐标与coordinate对齐
• zoomLevel 属性: 如果你需要将图标固定在某个地图的zoom,你需要设置它.它会跟随你地图的zoom一起放大或者缩小
• 在图片理性颜色时使用到了 QtGraphicalEffects ,Qt程序最后release打包时windeployqt 并不会引用此包,你需要到Qt源目录找到此文件夹,拷贝到自己的工程项目中才可以正常使用

总结

好了,今天就这些吧,都很简单…都是基础操作一下章节讲一下如何制作一个自己的地图插件