0、前言

Qt Location模块可用于轻量级的地图应用开发，不过官方示例及网上的例子都很少，而且仅仅是轻度使用的话没有用高德或者百度地图的Web API来得方便。

在QML中使用Qt Location模块，还需要引入Qt Positioning模块，因为Qt Location依赖他。

import QtPositioning 5.12
import QtLocation 5.12

想要深入的了解可以参照官方文档，如：https://doc.qt.io/qt-5.12/qtlocation-index.html 。

1、开始

要想展示一个地图，需要使用Map组件，并为其设置Plugin。Plugin指定了相关的位置服务插件，有esri、mapbox、osm等。最简单的地图展示代码如下：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtLocation 5.12
import QtPositioning 5.12Window {width: 512height: 512visible: truePlugin {id: mapPluginname: "osm" // "mapboxgl", "esri", ...}Map {anchors.fill: parentplugin: mapPlugincenter: QtPositioning.coordinate(30.67, 104.07)zoomLevel: 14}
}

根据我的测试，只有 osm 和 esri 可以正常加载，并且使用 osm 还要把 openssl 的动态库放到运行目录里。

Map使用OpenGL（ES）和Qt Scene Graph堆栈来渲染地图，因此在可以使用GL加速硬件的情况下，其表现非常出色。它有一些常用的属性，如 center 中心点坐标， zoomLevel 缩放等级等。其中坐标是一个单独的类型，在QML中为 coordinate 类型，有经纬度和海拔高度属性（latitude 纬度，longitude 经度，altitude 海拔高度单位米），还包含了计算距离和方位角的方法。参考官方文档：https://doc.qt.io/qt-5.12/qml-qtlocation-map.html 。

2、在Map中展示图元

QtLocation 模块中定义了很多小部件的类型，可以在 Map 中绘制点线等图元。

MapQuickItem 可以在地图上显示任意 Qt Quick 对象，通过 sourceItem 属性指定 Qt Quick 对象；coordinate 标定坐标点；anchorPoint 表示sourceItem左上角相对于coordinate的偏移（(0,0)的话左上角是在coordinate的位置）；zoomLevel 表示缩放等级，0则不会缩放，否则是和对应的地图缩放等级一起放大缩小的。

//在地图上显示任意Qt Quick对象MapQuickItem{id: point_1//缩放等级默认0固定大小，否则会和缩放等级一起放大缩小zoomLevel: 0//指示的坐标点coordinate: QtPositioning.coordinate(30.67, 104.07)//sourceItem左上角相对于coordinate的偏移anchorPoint: Qt.point(sourceItem.width/2,sourceItem.height/2)//Qt Quick对象sourceItem: Rectangle{width: 14height: 14radius: 7color: "green"border.color: "red"border.width: 1}//Qt5.14加了一个淡入属性autoFadeIn}

此外，还有MapCircle，MapRectangle，MapPolygon，MapPolyline 等图元类型，这些好像是和地图的缩放锚定的，如绘制一个多边形（每个顶点由地理坐标点指定）：

        MapPolygon{id: point_3color: "blue"border.width: 1border.color: "red"//根据坐标点绘制多边形path:[QtPositioning.coordinate(30.70, 104.08)]Component.onCompleted: {point_3.addCoordinate(QtPositioning.coordinate(30.72, 104.08))point_3.addCoordinate(QtPositioning.coordinate(30.72, 104.10))point_3.addCoordinate(QtPositioning.coordinate(30.69, 104.12))}}

3、一个完整的例子

这里写了一个简单的例子，静态的展示图元，计算两点距离，旋转地图方位等。（测试发现拉伸窗口大小的时候，图元位置可能不会实时的跟着动，可以自己主动处理下，微调地图中心点或者缩放等级等等）

//main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtPositioning 5.12
import QtLocation 5.12//参考文档 https://doc.qt.io/qt-5.12/qtlocation-index.html
Window {visible: truewidth: 640height: 480title: qsTr("龚建波 1992")Slider{id: bearing_sliderheight: 20width: parent.widthfrom: 0to: 360value: 0}//拖动窗口大小图元位置不能实时跟随，做此下策onWidthChanged: item_map.zoomLevel+=0.000001onHeightChanged: item_map.zoomLevel-=0.000001//绘制地图的容器Map{id: item_mapanchors.fill: parentanchors.topMargin:20plugin: Plugin{//参见文档https://doc.qt.io/qt-5.12/qml-qtlocation-plugin.html//首选插件语言环境的有序列表,但是貌似没啥用locales: "zh-CN"//插件的名称//osm需要把openssl的dll放到运行目录//esri默认就能用,mapbox的我这里加载不了,here的不知道咋用//esri默认这个图成都那里不对（放大后）name: "esri" // "mapboxgl", "esri", "osm"...//首选插件名称的有序列表,设置了name值时无效//preferred: ["here","osm"]//选择附加到哪个服务插件时Plugin对象所需的功能集,设置了name值时无效//required: Plugin.AnyMappingFeatures | Plugin.AnyGeocodingFeatures}//初始中心点-成都center: QtPositioning.coordinate(30.67, 104.07)//初始缩放等级zoomLevel: 12//最大缩放等级maximumZoomLevel: 14//最小缩放等级minimumZoomLevel: 1//背景色，没有正常加载时显色的图块颜色color: "green"//地图的方位//如果用于Map的插件支持方位，则该值的有效范围在0到360之间。//如果用于Map的插件不支持方位，则更改此属性将无效。bearing: bearing_slider.value//在地图上显示任意Qt Quick对象MapQuickItem{id: point_1//缩放等级默认0固定大小，否则会和缩放等级一起放大缩小zoomLevel: 0//指示的坐标点coordinate: QtPositioning.coordinate(30.67, 104.07)//sourceItem左上角相对于coordinate的偏移anchorPoint: Qt.point(sourceItem.width/2,sourceItem.height/2)//Qt Quick对象sourceItem: Rectangle{width: 14height: 14radius: 7color: "green"border.color: "red"border.width: 1MouseArea{anchors.fill: parentonClicked: console.log("click")}//coordinate类型有经纬度高度三个属性//latitude 纬度//longitude 经度//altitude 海拔高度，单位米//以及计算距离和方位角的方法//这里用文本显示两个点的距离Text{text: "   "+Math.round(point_1.coordinate.distanceTo(point_2.coordinate))/1000+" km"color: "green"font.bold: truefont.pixelSize: 16}}//Qt5.14加了一个淡入属性autoFadeIn}MapQuickItem{id: point_2zoomLevel: 10 //和缩放等级一起放大缩小coordinate: QtPositioning.coordinate(30.67, 104.04)anchorPoint: Qt.point(sourceItem.width/2,sourceItem.height/2)sourceItem: Rectangle{width: 14height: 14radius: 7color: "green"border.color: "red"border.width: 1}}//此外，还有MapCircle，MapRectangle，MapPolygon等图元类型//他们是和地图成比例的// 画多边形MapPolygon{id: point_3color: "blue"border.width: 1border.color: "red"//根据坐标点绘制多边形path:[QtPositioning.coordinate(30.70, 104.08)]Component.onCompleted: {point_3.addCoordinate(QtPositioning.coordinate(30.72, 104.08))point_3.addCoordinate(QtPositioning.coordinate(30.72, 104.10))point_3.addCoordinate(QtPositioning.coordinate(30.69, 104.12))}}// 绘制折线MapPolyline{line.width: 2line.color: "green"//路径列表 path : list<coordinate>path: [point_1.coordinate,point_2.coordinate,point_3.path[0]]}Rectangle{x: 10y: 10height: item_center.height+20width: item_center.width+20color: "green"Text{id: item_centerx: 10y: 10color: "white"font.pixelSize: 16font.bold: true//展示缩放等级 和 map的中心点经纬度text: "zoom level:"+Math.floor(item_map.zoomLevel)+" center:"+item_map.center.latitude+"  "+item_map.center.longitude}}}
}

4、Bug：当其他控件具有焦点时，地图上有灰白色方块

这是一个 Qt 的 Bug，参考Qt Bug反馈：https://bugreports.qt.io/browse/QTBUG-62463，通过将Map或上级设置透明度为 0.99 可解决。

Map {opacity: 0.99
}

QML QtLocation地图应用学习-1：在Map中展示图元 Item相关推荐

QML QtLocation地图应用学习-2：实现测距功能
1.实现思路参照百度or高德地图的测距功能,主要由两种元素组成,标记点和连线. 其中连线很好解决,Qt 提供了 MapPolyline 类型,可以用来绘制折线,并且提供了增删的便捷函数: 对于标记点 ...
QML Map中测距——QtLocation轻量级地图应用学习
QML Map中测距 1. 实现思路 2. 实现代码及git链接本文转载于:QML QtLocation轻量级地图应用学习:实现测距功能所有的热爱都要不遗余力,真正喜欢它便给它更高的优先级,和更多 ...
QML地图Map中使用QPainterPath,并显示任意点经纬度位置
QML地图Map中提供了供绘制图形的组件,例如MapPolyline,MapCircle等,但是这些组件在绘制复杂轨迹时就显得功能不够全面,因此我将QPainterPath在Map中进行使用并进行绘制 ...
占据栅格地图构建（Occupancy Grid Map）
移动机器人地图构建问题,主要以gmapping为例,讲解了地图构建的整个流程.看过前面文章的小伙伴肯定都知道,gmapping算法把SLAM问题分解成两个部分,定位问题和地图构建问题.而gmappin ...
WebGIS地图相关学习笔记
这里将记录学习gis地图相关内容的时候,如果碰到了不懂或不理解的知识点的时候,会记录在这里. 进阶问题 Web地图服务规范(WMS.WMTS.TMS)简析_surpassLiang的博客-CSDN博客 ...
QT5百度地图开发学习——qt调用JavaScript函数并传参
文章目录前言一.通信桥梁bridge 二.QT与JS相互通信(调用函数) 1.QT调用js函数前言在上文<QT5百度地图开发学习--控件提升展示地图>中,我们通过控件提升的方式在同 ...
MATLAB地图工具箱学习心得（二）设计可变参数和位置拾取的“放大镜”式投影程序
最近刚好因为一些原因整理这方面的内容,所以还是把这篇鸽了一年多的博客顺手写出来了∠( ᐛ 」∠)＿.因为是当时课程设计的一部分,程序上难免会有一些不足和bug,在这里将设计的思路分享给大家. 本篇博客 ...
QT5百度地图开发学习——qt调用输入位置坐标位置进行百度地图定位
系列文章目录上一章: QT5百度地图开发学习--JavaScript调用qt函数并传参给qt 文章目录系列文章目录前言一.界面设计二.槽函数总结前言本文实现输入坐标然后在地图上显示位置 ...
echarts map 点击地图区域变色_绘制炫酷的地图，不只是pyecharts.map！
导读:地图可视化是一种非常直观的数据分析结果展现形式,python有很多可视化库可以实现,pyecharts就是很多python爱好者喜爱的实现地图可视化方法之一.不可否认,pyecharts绘制的地 ...

QML QtLocation地图应用学习-1：在Map中展示图元 Item