说明

在本次项目中，我们使用QT开发框架，高德地图Web服务地图API，完成一个项目Demo，进行一次对QT、对编程的学习。

本系类文章所包含内容包括：

1.QT组件提升

2.QT鼠标事件处理

3.QT图片显示、移动和缩放

4.QPixmap的使用（简略）

5.QT网络操作

准备工作

大致准备工作参考本人往期文章

效果预览

用户可以动态地填写参数、构建url进行高德地图的访问，将获取过来的图片，放入QT的组件中，并完成对图片的移动、缩放操作。

一、UI布置

使用Qt Design设计如下图所示，如有必要请自行增加删除。

二、QT网络操作

网络操作可参考本人往期博客

除了之前的一个函数之外、我决定把QT网络操作写成一个类，该类具有较高的复用性。

//MyQtNetwork.h
class MyQtNetwork
{
public:MyQtNetwork();QByteArray getReply();                 //使用url获取网络返回值QByteArray getReply(const QString&);   //该函数URL直接用外部提供QString getUrl();public:void spliceRequestUrl();               //根据urlParaMap、urlhead、urltail组装URLvirtual void initFixedUrl();           //初始化urlhead、urltailprotected:QString url;QString urlHead;QString urlTail;QMap<QString,QString> urlParaMap;       //url的参数对应
};

大致实现如下：

#include "MyQtNetwork.h"MyQtNetwork::MyQtNetwork()
{
}QByteArray MyQtNetwork::getReply()
{return getReply(getUrl());
}QByteArray MyQtNetwork::getReply(const QString& urlstr)
{..略
}QString MyQtNetwork::getUrl()
{spliceRequestUrl();return url;
}void MyQtNetwork::spliceRequestUrl()
{url = urlHead;for (auto it = urlParaMap.begin(); it != urlParaMap.end(); it++) {url += it.key() + "=" + it.value() + "&";}url += urlTail;
}void MyQtNetwork::initFixedUrl()
{
}

用于要满足本次静态地图的url格式，我们创建子类来扩展该类

url格式来源：高德地图-静态地图-开发文档

class StaticMapNetwork : public MyQtNetwork {
public:StaticMapNetwork() {initFixedUrl();           //子类构造函数这里一定加上这段，父类加上无用}virtual void initFixedUrl() {urlHead = "https://restapi.amap.com/v3/staticmap?";urlTail = "output=xml&key=《你的key》";}void setUrlFileds(const QString& location,const QString& zoom = "5", const QString& size = "500*500",const QString& scale = "1", const QString& traffic = "1") {urlParaMap.insert("location", location);urlParaMap.insert("zoom", zoom);urlParaMap.insert("size", size);urlParaMap.insert("scale", scale);urlParaMap.insert("traffic", traffic);};
};

三、获取QPixmap图片与显示

我们使用QPixmap来获取网络图片，用于有了MyQtNetwork类的设计，Qpixmap又自带loadFromData的函数，这使得编写非常简单

StaticMapNetwork network;
QPixmap myMap;void StaticMapManage::getNewImg()
{network.setUrlFileds(ui.led_locX->text(), ui.led_Zoom->text()); //如有需要自行添加其他参数myMap.loadFromData(network.getReply());
}

在label显示一副Qpixmap同样简单。我在这里还附加了显示url于lienEdit的操作

ui.label->setPixmap(myMap);ui.led_url->setText(network.getUrl());

我们可以绑定一个按钮，当按钮按下时，就调用这几行代码，实现图片的获取，简单显示和url展示。

connect(ui.btn_run, SIGNAL(clicked()), this, SLOT(whenBtnRunClicked()));
...
void StaticMapManage::whenBtnRunClicked() {getNewImg();ui.label->setPixmap(myMap);ui.led_url->setText(network.getUrl());
}

四、组件提升

由于想要赋予图片更多的交互功能，我们需要使用QPainter进行绘图，这意味这我们需要重写Qt自带的paintEvent函数，如果想要仅仅在子控件上实现paintEvent，我们需要提升组件（有一种事件过滤的操作也能实现这里不做介绍）。

QPainter详解 Qt在控件上绘图 QT组件提升

我们先创建一个组件提升所需要类,在对Ui上的Frame进行组件提升，右键点击Frame即可看到相应提升

//StaticMapMngUiMapFrame.h
class StaticMapMngUiMapFrame : public QFrame
{Q_OBJECT
public :StaticMapMngUiMapFrame(QWidget* parent = 0);
}//StaticMapMngUiMapFrame.cpp
StaticMapMngUiMapFrame::StaticMapMngUiMapFrame(QWidget* parent) :QFrame(parent)
{}

五、重写paintEvent

我们重写paintEvent，使用QPainter实现在frame组件中绘制一幅图像

QPixmap myMap;
bool hasMap = false;void StaticMapMngUiMapFrame::setMap(const QPixmap& map)   //这里的map由高层传入、指鼠标点击运行后
{myMap = map;hasMap = true;this->update();  //更新，自动调用paintEvent()
}void StaticMapMngUiMapFrame::paintEvent(QPaintEvent* event) {if (hasMap==false) return; QPainter painter(this);   //提升组件后的this// 根据组件窗口计算应该显示的图片的大小   //可自行决定使用int width = qMin(myMap.width(), this->width());int height = width * 1.0 / (myMap.width() * 1.0 / myMap.height());height = qMin(height, this->height());width = height * 1.0 * (myMap.width() * 1.0 / myMap.height());..#1 //待填写//绘制QRect picRect(-width / 2, -height / 2, width, height); //请注意这里的坐标，这里是this的坐标，及0，0在this的0，0处painter.drawPixmap(picRect, myMap);
}

至此我们可以看到frame中同样可以绘制图像了。

六、鼠标实现图片移动和缩放

重写鼠标点击函数，实现触发拖拽和滚轮事件

void mousePressEvent(QMouseEvent* event);   //点击
void mouseMoveEvent(QMouseEvent* event);    //移动
void mouseReleaseEvent(QMouseEvent* event); //释放
void wheelEvent(QWheelEvent* event);        //滚轮
bool isMouseDrag = false;                   //拖曳参数
QPointF lastPoint;                          //前一个点击点void StaticMapMngUiMapFrame::mousePressEvent(QMouseEvent* event)
{isMouseDrag = true;lastPoint = event->pos();
}void StaticMapMngUiMapFrame::mouseMoveEvent(QMouseEvent* event)
{if (isMouseDrag) {...#2}this->update();
}void StaticMapMngUiMapFrame::mouseReleaseEvent(QMouseEvent* event)
{isMouseDrag = false;this->update();
}void StaticMapMngUiMapFrame::wheelEvent(QWheelEvent* event)
{if (event->delta() > 0)  //后滚轮{...#3}else if (event->delta() < 0 )  //前滚轮{...#4}this->update();
}

添加几个参数，在这些事件触发时改变

#..2处
int offsetX = event->pos().x() - lastPoint.x();
int offsetY = event->pos().y() - lastPoint.y();
myOffsetX += offsetX;
myOffsetY += offsetY;
lastPoint = event->pos();          //记得更新否则回出现错误#..3处
myZoom += 0.1;#..4处
if( myZoom > 0.1 )
myZoom -= 0.1;

最后使用 QPainter::translate(）和QPainter::scale(）实现平移和缩放

#..1处
//偏移量
painter.translate(this->width() / 2 + myOffsetX, this->height() / 2 + myOffsetY);
//缩放量
painter.scale(myZoom, myZoom);

代码借鉴出处

七、总结与展望

至此我们完成了所有工作，运行程序，应该能够实现所以功能，填写参数，按键运行，获取图像，图像显示，图像移动等一系列功能。

然而，这可能还远远不够，我们每次只能获取一张图片，如果我想查询更多的图片，在移动到就图片边缘时候就能快速获取，就行真正的高德地图一样。我们要如何实现呢.....？

QT+高德地图Web服务API开发—静态地图开发Demo。QT组件提升、QT鼠标事件处理、Qt图片显示与移动、QT网络操作相关推荐

java aoi 服务器地图_GitHub - WanZixin/getShp: 利用高德地图web服务API获取坐标串，生成行政区和aoi的shp文件...
爬取数据生成shp文件 1.功能简介共有两大功能,一个功能是根据高德地图web服务API获取行政区划坐标串,写入行政区shp文件:另一个功能是根据高德地图的接口获取poi坐标串,写入aoi(area ...
使用百度地图Web服务API查询地点的经纬度信息
使用百度地图Web服务API查询地点的经纬度信息 API地理编码服务数据结果 API地理编码服务地理编码服务(又名Geocoder)是一类Web API接口服务: 地理编码服务提供将结构化地址数 ...
python如何爬虫获取图形上点的坐标_python调用百度地图WEB服务API获取地点对应坐标值...
本篇博客介绍如何使用Python调用百度地图WEB服务API获取地点对应坐标值,现有一系列结构化地址数据(如:北京市海淀区上地十街十号),目的是获取对应坐标值. 百度地图开发者平台路线规划使用说明网址 ...
python调用百度地图实现导航_python调用百度地图WEB服务API获取地点对应坐标值
本篇博客介绍如何使用Python调用百度地图WEB服务API获取地点对应坐标值,现有一系列结构化地址数据(如:北京市海淀区上地十街十号),目的是获取对应坐标值. 百度地图开发者平台路线规划使用说明网址 ...
百度地图Web服务API——正/逆地理编码服务
正/逆地理编码服务(又名Geocoding API)是一类Web API接口服务: 正向地理编码服务提供将结构化地址数据(如:北京市海淀区上地十街十号)转换为对应坐标点(经纬度)功能: 逆向地理编码服 ...
百度鹰眼html打开,BMap：WEB 服务API
ylbtech-Map-Baidu: WEB 服务API 百度地图Web服务API为开发者提供http/https接口,即开发者通过http/https形式发起检索请求,获取返回json或xml格式的 ...
设置电子围栏高德地图_地理围栏-API文档-开发指南-Web服务 API | 高德地图API
产品介绍地理围栏服务是一类HTTP接口,提供在服务端,增删改查地理围栏的功能,同时支持对于设备与围栏关系进行监控. 适用场景地理围栏服务适用于需要针对特定区域,监控用户位置与区域关系的场景中.包括 ...
接口获取行政区划代码_行政区域查询-API文档-开发指南-Web服务 API | 高德地图API...
产品介绍行政区域查询是一类简单的HTTP接口,根据用户输入的搜索条件可以帮助用户快速的查找特定的行政区域信息. 使用API前您需先申请Key,若无高德地图API账号需要先申请账号. 例如:中国> ...
android高德天气api接口,天气查询-API文档-开发指南-Web服务 API | 高德地图API
产品介绍天气查询是一个简单的HTTP接口,根据用户输入的adcode,查询目标区域当前/未来的天气情况. 使用API前您需先申请Key,若无高德地图API账号需要先申请账号. 适用场景需要使用相关 ...

QT+高德地图Web服务API开发—静态地图开发Demo。QT组件提升、QT鼠标事件处理、Qt图片显示与移动、QT网络操作

说明