系列文章目录
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源目录找到此文件夹,拷贝到自己的工程项目中才可以正常使用
总结
好了,今天就这些吧,都很简单…都是基础操作一下章节讲一下如何制作一个自己的地图插件