3D地图

# QT_GaoDe_Map_1 **Repository Path**: radiumgitee/qt_-gao-de_-map_1 ## Basic Information - **Project Name**: QT_GaoDe_Map_1 - **Description**: 调用高德地图，使用3D视角，通过点击的方式，获取点击区域的经纬度。本来写了搜索和定位的代码，但是官方接口有点bug，正在跟官方沟通排查中。本来打算用QT写，然后可以集合很多功能的，但是QT自带浏览器的速度太慢了，要是再集合其他功能，估计的卡死，所以并没有继续扩展，而是将很多网页，集合为html，然后放到网上，这样加速速度要快一些。现在学了QML以后，有了新方案，后面再出 - **Primary Language**: C++ - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: https://www.alon1787.top/biji - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 3 - **Created**: 2024-08-01 - **Last Updated**: 2024-08-01 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # QT_GaoDe_Map_1 ## 介绍调用高德地图，使用3D视角，通过点击的方式，获取点击区域的经纬度。本来写了搜索和定位的代码，但是官方接口有点bug，正在跟官方沟通排查中。本来打算用QT写，然后可以集合很多功能的，但是QT自带浏览器的速度太慢了，无论是在线网站还是本地网页，都非常慢，要是再集合其他功能，估计的卡死，所以并没有继续扩展，而是将很多网页，集合为html，然后放到网上，这样加速速度要快一些。 ## 效果预览： [在线网页](https://www.alon1787.top/project/map/GaoDeMap3DClick.html) <--- 点击即可 ### 效果1：3D视角获取经纬度 ![map](assets/map.gif) ### 效果2：添加搜索功能 ![image-20230327104425503](assets/image-20230327104425503.png) ## 制作步骤 ### 初始化项目 + 创建项目，选择QWindowWidget 和 QWidget都行 + 加入gitee。 + 在pro文件中，添加：`QT += webchannel webenginewidgets` + 在main.cpp文件中，测试一下能否运行：下面的代码 ```cpp #include #include #include #include int main(int argc, char *argv[]) { // 这几行代码是为了加速用的，如果太慢，可以关闭注释： //QCoreApplication::setAttribute(Qt::AA_DisableHighDpiScaling); //QCoreApplication::setAttribute(Qt::AA_UseOpenGLES); //QNetworkProxyFactory::setUseSystemConfiguration(false); QApplication a(argc, argv); QWebEngineView *view = new QWebEngineView(); // 访问在线网页，这里大家可以测试 www.baidu.com view->load(QUrl("https://www.alon1787.top/project/map/GaoDeMap3DClick.html")); view->show(); return a.exec(); } ``` + 测试如果可以运行，就可以继续。如果提示找不到 webenginewidgets，那就是没有安装 webengine 组件。可以参考网上的方法，去添加一下组件。 + 这里我本来是QT 5.14，结果没有添加组件，于是去下载了一个 QT5.9，打上组件，安装MSVC，注意，一定是MSVC 13以后的才行，我用的是QT5.9 + MSVC 15 。使用WinGW肯定是用不了的。 + 测试没问题以后，才可以往下走。 ### 去高德地图申请KEY + 点击这个：[高德地图开发者平台](https://lbs.amap.com/) + 自己注册账号，进入控制台，应用管理，我的应用，新建应用，添加。 + 应用类型随便选，我选的其他 + 点击添加

+ 提交以后，复制Key和秘钥，后面会经常用到，最好是找个地方保存一下。 + 点击这个，进入 [JS API 示例 ](https://lbs.amap.com/demo/list/js-api) + 这里面的示例有很多，后期可以自己选择。 + 这里我们用到的是 `获取经纬度`的 [示例](https://lbs.amap.com/demo/javascript-api/example/map/click-to-get-lnglat) 《---可以直接点这个就行。 + 提示一下：其实百度地图也行，但是我测试了一下，百度地图，确实不如高德地图方便好用。 + 先测试一下是否可以正常使用： ![image-20230326155000047](assets/image-20230326155000047.png) + 将右侧代码复制下来，另存为比如`GaoDeMap3DClick.html`，然后使用本地浏览器打开试一下，是否可以运行 + 注意：这里有的 JS 前端大佬，其实就可以参考开发手册直接修改代码了，在线运行在另存也行。 + 这里我就不使用它的代码了，而是自己改了一个：大家也可以拿过去用。记得在代码里面，修改KEY ```html // 3D地图

左击获取经纬度：

// 这里自己修改KEY： key----plugin 之间的那一串：大家尽量用自己的，我的有限制。 ``` + 测试一下，是否可以运行 ![image-20230326155647886](assets/image-20230326155647886.png) + 这里我选的是电子科大的位置，（毕竟两次与电子科大失之交臂，对这里还是有点遗憾的，就选了这里） ### 用QT运行本地html + 将刚刚的html文件的路径保存下来，或者干脆放一个容易找的地方，比如D盘底下。 + 将刚刚的 `main.cpp` 文件改一下：这里的代码，需要替换为自己的html路径： + 注意：必须使用`QUrl::fromLocalFile`加载，而且里面都用 `\\` 双右斜杠，或者单左斜杠。 ```cpp #include #include #include #include int main(int argc, char *argv[]) { // 加速用的，如果打开过于慢了，可以取消注释，不过3D效果没了。 //QCoreApplication::setAttribute(Qt::AA_DisableHighDpiScaling); //QCoreApplication::setAttribute(Qt::AA_UseOpenGLES); QApplication app(argc, argv); QWebEngineView view; view.load(QUrl::fromLocalFile("C:\\Users\\ASUS\\Desktop\\new.html")); // 替换为你的HTML文件路径 view.resize(1200, 800); view.show(); return app.exec(); } ``` + 如果没问题，再继续往下进行。 + 其实到了这一步，大体已经搞完了。下面是给大家介绍一下改 JS 代码的部分心得。 ### 部分心得 + 在示例中心的代码，保存为html以后，就可以直接使用了，但是官方的代码太片面，功能单一，需要自己添加修改。 + 使用QT打开本地，还是在线，速度都很慢，所以原本我打算添加许多功能，结合QT按钮等操作，搞路径规划和路径的，本来JS代码改的差不多了，奈何QT速度太慢，就没搞了，等解决了速度问题，再继续搞。一下代码，可以加速，但是会失去3D效果。 + // 加速用的，如果打开过于慢了，可以取消注释，不过3D效果没了。 //#include //QCoreApplication::setAttribute(Qt::AA_DisableHighDpiScaling); //QCoreApplication::setAttribute(Qt::AA_UseOpenGLES); + 打开本地html的路径的代码，可以优化，具体得修改pro文件，自己创建文件夹，自行百度，我就懒得搞了。 + 鉴于现在QT的加载速度慢的问题，我的方案是，把改好的 html 放在云端服务器，比如腾讯服务器的静态网页托管，很便宜，然后本地直接调用即可。 ### 高德地图 JS 代码修改经验 + ##### KEY不是必须修改的，我测试过，不修改KEY一样可以运行，估计是高德地图后端程序员发现这块很多问题，懒得做验证吧。 + ##### 修改标题 + `3D地图` + ##### JS脚本：59行 ` 之间即可。 //为地图注册click事件获取鼠标点击出的经纬度坐标 map.on('click', function(e) { document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat() }); ``` + ##### 添加3D罗盘和按住 CTRL + 鼠标控制俯仰的功能 ``` // 添加 3D 罗盘控制 map.addControl(new AMap.ControlBar()); ``` + ##### 地图图层：添加在 var map 属性里面，就是大括号里面 ``` 卫星图： layers: [new AMap.TileLayer.Satellite()], 默认图层 layers: [//只显示默认图层的时候，layers可以缺省 new AMap.TileLayer()//高德默认标准图层], //实时路况图层，这个不加在 map 里面： var trafficLayer = new AMap.TileLayer.Traffic({zIndex: 10}); trafficLayer.setMap(map); // 卫星路网： layers: [ // 卫星 new AMap.TileLayer.Satellite(), // 路网 new AMap.TileLayer.RoadNet() ], // 楼块图层： // 隐藏默认楼块 features: ['bg', 'road', 'point'], mapStyle: 'amap://styles/light', layers: [ // 高德默认标准图层 new AMap.TileLayer.Satellite(), // 楼块图层 new AMap.Buildings({ zooms: [16, 18], zIndex: 10, heightFactor: 2//2倍于默认高度，3D下有效 }) ], ``` ![image-20230326162510928](assets/image-20230326162510928.png) + ##### 部分功能有冲突，需要写在不同函数里面 + ##### 添加搜索功能 ```html // 这里需要填写秘钥，跟key是两个东西 // 这里需要修改key值 // 标签：

请输入关键字：

// JS 脚本： ``` ![image-20230327104529717](assets/image-20230327104529717.png) + ##### 添加左上角/ 右上角的3D控制旋钮 ```js AMap.plugin([ 'AMap.ControlBar', ], function(){ // 添加 3D 罗盘控制 map.addControl(new AMap.ControlBar()); }); ``` ### 使用 webchannel ，QT和网页JS交互 + 这里以后补充，网上CSDN有很多参考的，因为加速速度慢的问题，我已经放弃了这个方案。