Qml地图开发实例(一)：map组件

已于 2024-12-25 22:52:09 修改
阅读量1.5k 收藏 18
点赞数 21
CC 4.0 BY-SA版权
分类专栏： Qml地图应用 文章标签： qt c++
于 2024-12-25 22:36:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suncoin/article/details/144704998

        通过Qml的map组件可以快速构建地图应用，设计中需要在地图上实时显示海量数据点（预计万点以上），考虑Qml、c++结合的方式，前端使用Qml显示，后端使用c++进行数据处理。由于刚接触Qml不久，本文主要记录作者急于求成的开发过程，边学边用，很多知识点存在理解不深的情况，若使用请慎重。

        急于求成的特点就是知识零散、不系统，所以Qml开发的基础过程本文略过不讲（讲不清楚），下面急入主题。

1、目标

        本节目标：

        使用Qml创建一个地图基础应用。地图放大、缩小、移动，增加标注线、矩形等图元。

        本节难度：★★★★★（万事开头难）

        葫芦在此

        如葫所示，内容包括

        1）地图背景

        2）左上角显示地图放大等级、鼠标点击位置

        3）三个区域圆圈，设置区域背景颜色

2、实现过程

        1）新建Quick工程

        2）创建完成后，打开main.qml，添加代码生成地图窗口。

import QtQml 2.12
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

import QtLocation 5.12
import QtPositioning 5.12

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello map")    //看的出来，这是专业标题
    visibility: Window.Maximized  // 设置窗口最大化

    Map {
        id: item_map
        anchors.fill: parent
        anchors.topMargin:0
        opacity: 0.99

        plugin: Plugin{
            //参见文档https://doc.qt.io/qt-5.12/qml-qtlocation-plugin.html

            //首选插件语言环境的有序列表,但是貌似没啥用
            locales: "zh-CN"

            //插件的名称
            //osm需要把openssl的dll放到运行目录
            //esri默认就能用,mapbox的我这里加载不了,here的不知道咋用
            //esri默认这个图成都那里不对（放大后）
            name: "osm" // "mapboxgl", "esri", "osm"...

            //首选插件名称的有序列表,设置了name值时无效
            //preferred: ["here","osm"]

            //选择附加到哪个服务插件时Plugin对象所需的功能集,设置了name值时无效
            //required: Plugin.AnyMappingFeatures | Plugin.AnyGeocodingFeatures
        }

        //初始中心点-成都
        center: QtPositioning.coordinate(centerLat, centerLon)
        //初始缩放等级
        zoomLevel: mapZoomReset
        //最大缩放等级
        maximumZoomLevel: 15
        //最小缩放等级
        minimumZoomLevel: 5
        //背景色，没有正常加载时显色的图块颜色
        color: "green"

        //自定义属性
        property real mapZoomReset : 12
        property var mouseCoord : center
        //可供在外部初始化
        property real centerLat : 30.67
        property real centerLon : 104.07

    }
}

        运行结果

        恭喜，第1步成功了！是的，借用的别人的代码（注释完整部分，感谢各路大神分享，丝滑剪切，开心微改）。

        核心内容：

        map组件：定义地图的中心，缩放等级，plugin等属性；

        plugin属性：选择加载的地图类别；

        4）继续，获取鼠标点击位置坐标

import QtQml 2.12
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

import QtLocation 5.12
import QtPositioning 5.12

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello map")    //看的出来，这是专业标题
    visibility: Window.Maximized  // 设置窗口最大化

    Map {
        id: item_map
        anchors.fill: parent
        anchors.topMargin:0
        opacity: 0.99

        plugin: Plugin{
            //参见文档https://doc.qt.io/qt-5.12/qml-qtlocation-plugin.html

            //首选插件语言环境的有序列表,但是貌似没啥用
            locales: "zh-CN"

            //插件的名称
            //osm需要把openssl的dll放到运行目录
            //esri默认就能用,mapbox的我这里加载不了,here的不知道咋用
            //esri默认这个图成都那里不对（放大后）
            name: "osm" // "mapboxgl", "esri", "osm"...

            //首选插件名称的有序列表,设置了name值时无效
            //preferred: ["here","osm"]

            //选择附加到哪个服务插件时Plugin对象所需的功能集,设置了name值时无效
            //required: Plugin.AnyMappingFeatures | Plugin.AnyGeocodingFeatures
        }

        //初始中心点-成都
        center: QtPositioning.coordinate(centerLat, centerLon)
        //初始缩放等级
        zoomLevel: mapZoomReset
        //最大缩放等级
        maximumZoomLevel: 15
        //最小缩放等级
        minimumZoomLevel: 5
        //背景色，没有正常加载时显色的图块颜色
        color: "green"

        //自定义属性
        property real mapZoomReset : 12
        property var mouseCoord : center
        //可供在外部初始化
        property real centerLat : 30.67
        property real centerLon : 104.07

        //信息提示框
        Rectangle{
           anchors.left: parent.left
           anchors.top: parent.top
           height: item_center.height+20
           width: item_center.width+20
           radius: 3
           color: "black"
           opacity: 0.8

           Text{
               id: item_center
               x: 10
               y: 10
               color: "white"
               font.pixelSize: 16
               font.bold: true
               //展示缩放等级 和 map的中心点经纬度
               text: "zoom level:"+Math.floor(item_map.zoomLevel)+
                     "  位置:"+item_map.mouseCoord.latitude+
                     "  "+item_map.mouseCoord.longitude
           }
        }

        //响应鼠标点击事件，鼠标点击时，显示鼠标位置坐标
        MouseArea {
            anchors.fill: parent
            onClicked: {
                var coord = item_map.toCoordinate(Qt.point(mouse.x, mouse.y));
                item_map.mouseCoord = coord;
                console.log("Latitude: " + coord.latitude + ", Longitude: " + coord.longitude);

                //发射信号
                mouse.accepted = true;
                //此处设置选定，用于改变其它item的focus状态
                focus = true;
            }

        }

    }
}

        运行结果

        恭喜，第2步成功了！是的，也是借用的别人的代码（再次感谢各路大神分享，开心加倍）。

        核心内容：

        Rectangle：左上角显示提示信息；

        MouseArea：响应鼠标事件，获取点击位置的坐标；

5）继续，增加区域圆圈

import QtQml 2.12
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

import QtLocation 5.12
import QtPositioning 5.12

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello map")    //看的出来，这是专业标题
    visibility: Window.Maximized  // 设置窗口最大化

    Map {
        id: item_map
        anchors.fill: parent
        anchors.topMargin:0
        opacity: 0.99

        plugin: Plugin{
            //参见文档https://doc.qt.io/qt-5.12/qml-qtlocation-plugin.html

            //首选插件语言环境的有序列表,但是貌似没啥用
            locales: "zh-CN"

            //插件的名称
            //osm需要把openssl的dll放到运行目录
            //esri默认就能用,mapbox的我这里加载不了,here的不知道咋用
            //esri默认这个图成都那里不对（放大后）
            name: "osm" // "mapboxgl", "esri", "osm"...

            //首选插件名称的有序列表,设置了name值时无效
            //preferred: ["here","osm"]

            //选择附加到哪个服务插件时Plugin对象所需的功能集,设置了name值时无效
            //required: Plugin.AnyMappingFeatures | Plugin.AnyGeocodingFeatures
        }

        //初始中心点-成都
        center: QtPositioning.coordinate(centerLat, centerLon)
        //初始缩放等级
        zoomLevel: mapZoomReset
        //最大缩放等级
        maximumZoomLevel: 15
        //最小缩放等级
        minimumZoomLevel: 5
        //背景色，没有正常加载时显色的图块颜色
        color: "green"

        //自定义属性
        property real mapZoomReset : 12
        property var mouseCoord : center
        //可供在外部初始化
        property real centerLat : 30.67
        property real centerLon : 104.07

        //设置背景色
        MapQuickItem{
           id: rad_bk
           zoomLevel: 10 //和缩放等级一起放大缩小
           coordinate: QtPositioning.coordinate(item_map.centerLat, item_map.centerLon)
           anchorPoint: Qt.point(sourceItem.width/2,sourceItem.height/2)
           sourceItem: Rectangle{
               width: 300
               height: 300
               radius: 150
               color: "green"
               opacity: 0.1 //使用透明度
           }
        }

        //画最外圆线
        MapQuickItem{
           id: rad_0
           zoomLevel: 10 //和缩放等级一起放大缩小
           coordinate: QtPositioning.coordinate(item_map.centerLat, item_map.centerLon)
           anchorPoint: Qt.point(sourceItem.width/2,sourceItem.height/2)
           sourceItem: Rectangle{
               width: 300
               height: 300
               radius: 150
               color: "transparent" //使用透明，只显示边框
               border.color: "green"
               border.width: 1
               opacity: 0.3
           }

        }

        //画中间圆线
        //在地图上显示任意Qt Quick对象
        MapQuickItem{
           id: rad_1
           //缩放等级默认0固定大小，否则会和缩放等级一起放大缩小
           zoomLevel: 10
           //指示的坐标点
           coordinate: QtPositioning.coordinate(item_map.centerLat, item_map.centerLon)
           //sourceItem左上角相对于coordinate的偏移
           anchorPoint: Qt.point(sourceItem.width/2,sourceItem.height/2)
           //Qt Quick对象
           sourceItem: Rectangle{
               width: 200
               height: 200
               radius: 100
               color: "transparent"
               border.color: "yellow"
               border.width: 1
               opacity: 1
           }
           //Qt5.14加了一个淡入属性autoFadeIn
        }

        //画最内圆线
        MapQuickItem{
           id: rad_2
           zoomLevel: 10 //和缩放等级一起放大缩小
           coordinate: QtPositioning.coordinate(item_map.centerLat, item_map.centerLon)
           anchorPoint: Qt.point(sourceItem.width/2,sourceItem.height/2)
           sourceItem: Rectangle{
               width: 100
               height: 100
               radius: 50
               color: "transparent" //背景透明，但边框不透明
               border.color: "red"
               border.width: 1
               opacity: 0.5
           }

        }

        //信息提示框
        Rectangle{
           anchors.left: parent.left
           anchors.top: parent.top
           height: item_center.height+20
           width: item_center.width+20
           radius: 3
           color: "black"
           opacity: 0.8

           Text{
               id: item_center
               x: 10
               y: 10
               color: "white"
               font.pixelSize: 16
               font.bold: true
               //展示缩放等级 和 map的中心点经纬度
               text: "zoom level:"+Math.floor(item_map.zoomLevel)+
                     "  位置:"+item_map.mouseCoord.latitude+
                     "  "+item_map.mouseCoord.longitude
           }
        }

        //响应鼠标点击事件，鼠标点击时，显示鼠标位置坐标
        MouseArea {
            anchors.fill: parent
            onClicked: {
                var coord = item_map.toCoordinate(Qt.point(mouse.x, mouse.y));
                item_map.mouseCoord = coord;
                console.log("Latitude: " + coord.latitude + ", Longitude: " + coord.longitude);

                //发射信号
                mouse.accepted = true;
                //此处设置选定，用于改变其它item的focus状态
                focus = true;
            }

        }

    }
}

        运行结果

        恭喜，第3步成功了！

        核心内容：

        MapQuickItem：地图内添加组件使用该模块，具有coordinate属性，通过设置坐标值进行位置定位。

        zoomLevel：设置不为0，则随地图进行缩放；设置为0则固定大小，不随地图缩放。

        圆圈设计：没有直接空心圆的组件，这里使用透明色、边框色、边框宽度进行配置，达到预期效果，比设计代码画空心圆省心不少（小坑一个）

        color: "transparent" //使用透明，只显示边框

        border.color: "green"

        border.width: 1

3、总结

        1）Qml快速构建地图应用，确实比较方便（比C++）；

        2）主要组件：map、MapQuickItem，plugin、zoomLevel等属性；

        3）矩形、鼠标响应事件，与常规Qml处理相同；

        本节目标完成，加加油！

源码下载：

【免费】Qml地图应用示例，包括地图显示、区域线、获取鼠标位置等源程序资源-CSDN文库

        脚印--不断寻找的轮子最终可能是自己--

QML中的地图与位置服务
夏天的狂风的专栏
03-31 1193
欢迎阅读关于QML中地图和位置服务的博客！在本文中，我们将探讨如何在QML应用程序中使用地图和位置相关功能，包括展示地图、定位用户位置、搜索地点和计算路径。我们将首先介绍Qt位置模块，然后通过实例讨论如何实现各种地图和位置服务功能。
使用Qt的QML开发一个简单的地图应用
sssfasla的博客
07-12 1978
最近的QT项目中需要做一个简单的地图应用，功能不太复杂只需要通过鼠标点击获取点击位置的经纬度，查找了很多资料和方案，本着简单方便才是硬道理的原则，最后决定使用qml来实现。QML是Qt提供的一种声明性语言，用于快速创建用户界面。是QML中的一个地图插件，它支持离线地图的加载，干好满足我的要求。下面是我在使用这个工具开发简单地图应用的过程的一些问题。
qml的map容器
sunflower_2020的博客
07-21 276
qml的map容器
在qgroundcontrol中添加高德混合地图（以下为4.4.4版本，使用较新版本的可以看下！）
最新发布
woaiguoxinming的博客
06-26 214
2. 在GenericMapProvider.cpp末尾处添加以下代码。4. 在FlightMap.qml文件末尾添加以下代码。主要内容：需要对以下四个文件进行修改。
QT QML地图开发
QT性能优化QT原理源码QT界面美化
11-22 1371
QT和QML简介QT和QML简介在开始学习如何使用QT和QML进行地图开发之前，我们首先需要了解QT和QML的基本概念以及它们之间的关系。QT简介QT是一个跨平台的C++图形用户界面应用程序框架，它被广泛用于开发GUI应用程序，也可以用于开发非GUI程序，如控制台工具和服务器。QT由挪威Trolltech公司（后被Nokia收购，之后又转手给了Digia，最终由The Qt Company继续开发）创造，现在是一个开源项目。
QML地图简介（1）
xt18971492243的博客
02-09 2931
一、地图插件介绍 1.qml提供了四个内建的地图在线插件"esri"、“mapbox”、“nokia”、“osm”,但是都不是国内地图,对国内很不友好，esri国内可以使用。要是想使用高德和谷歌需要自己写插件。 例如： 插件文件gd_plugin.json { "Keys": ["amap"], "Provider": "amap", "Version": 200, "Experimental": false, "Features": [ "Onlin
QML中map的用法
u013351233的博客
08-23 7177
var keys = []; for(var p in dect){ if(dect.hasOwnProperty(p)) keys.push(p); } // console.log(keys); ...
Qt qml加载Html百度地图 qml发送模拟经纬度控制地图图标移动
12-17
Qt是一个跨平台的C++应用程序开发框架，广泛用于创建桌面、移动和嵌入式应用。QML是Qt的一种声明式编程语言，它允许开发者以JSON风格编写UI和逻辑，简化了界面设计和交互。 2. **加载HTML百度地图** 百度地图提供...
QML与C++交互
深之JohnChen的专栏
03-18 1121
QML 与 C++ 的交互是 Qt Quick 开发的核心需求，常用于将界面逻辑与底层业务逻辑解耦。
Qt加载百度离线地图
04-04
Qt是一个跨平台的应用程序开发框架，而百度地图则提供了丰富的地图服务，包括在线和离线地图API。结合两者，我们可以创建功能强大的地图应用。 首先，我们需要理解Qt中的QGraphicsView和QGraphicsScene组件，它们是...
QML与C++结合实现在地图上添加标记示例代码
4. Qt地图开发组件：Qt提供了一套完整的地图组件，允许开发者在应用中嵌入地图，并支持多种地图服务提供商。Qt地图组件通常包括地图视图（MapView）、地图模型（MapModel）和地图元素（如Marker）。开发者可以通过...
qml小地图（（包括可拉伸的矩形（包括滚轮缩放），和对应变换的显示区域））
12-05
 思路，首先是根据flickable的显示属性，可以将要显示的区域局部显示，并且可以设置显示区域的位置和大小 ，那就需要一个Handle来动态的改变这个显示区域的属性，这个handle得具有哪些属性呢？1.大小可拉伸，即四个点加上四个边可以拉升改变这个handle，并且大小必须有限定。2.可拖动，在一个区域内要能够拖动。3.鼠标滚轮能控制放大缩小，但不能超过固定区域。          显示，显示区域的大小与flickable对应的比例，与handle大小和handle的限定区域对应的比例一致，并且坐标也应该对应成比例。
qt qml使用高德地图的WebAPI获取静态地图
08-03
qt qml使用高德地图的WebAPI获取静态地图，见博客 http://blog.csdn.net/d759378563/article/details/76576550
Qt Quick qml 插件
04-27
QML 插件则进一步扩展了这一功能，使得开发者可以自定义自己的组件和行为，以适应特定项目的需求。 在 Qt Quick 中，QML 插件通常是一组预定义的类型，这些类型由 C++ 实现并在 QML 中使用。创建 QML 插件的目的是...
Map QML Type The Map type displays a map.
抟土成人祖，炼石补青天。眼中览银河，手可摘星辰。
04-12 979
Map只是一个壳，地图资源是通过plugin插件从第三方服务获取的，默认不会带地图资源，得你自己配。Qt Widgets 本身不内建地图组件，不像 QML 有现成的Map类型可以用。也就是说，在Widgets 应用中你不能直接用类似 QML 的Map {}那种方式来展示地图。不过，别担心，Qt Widgets 也能实现地图功能，只是要靠其他办法。下面我来详细讲讲几种可行的方式👇方法优点缺点+ Web 地图简单、功能强、跨平台依赖 WebEngine 模块、需联网嵌 QML Map。
QML Map
海天鹰
08-01 2667
一直想做地图，找不到资料，尤其是C++的。 https://blog.csdn.net/gongjianbo1992/article/details/103624656 qmlscene main.qml 报错： Extra characters after test expression. 放在Qt工程里用 QQmlApplicationEngine 加载成功 加入全局变量，替代固定的经纬度，只需要改这2个值就可以定位到自己所在的城市了。 property double lat : 26.9..
QML在地图上创建MapQuickItem
wangshuping18的博客
06-24 1109
QML在地图上动态创建MapQuickItem的方法
QML Maps
aggs1990的专栏
09-11 238
The​Map类型允许显示地图并在地图中放置对象。可以定义各种兴趣点并将其添加到地图中以供显示。此外，地图还具有控制地图显示方式的功能。使用“地图”项，可以将地图居中、缩放、捏住并使该项可闪烁。​要添加到地图中的位置是MapItems。项目的位置由包括纬度、经度和高度的坐标定义。项目添加到地图后会自动显示。
【Qt 地图开发】
m0_45463480的博客
08-28 1526
Qt 地图开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值