行政区划是一个常见的地图功能,我们需要给不同的区域绘制轮廓。如果使用百度或高德的网页在线地图进行开发,那么直接就可以查询到一个区域的边界点(高德比百度更密集点),之后就可以绘制这个区域了。
参见百度Demo:http://lbsyun.baidu.com/jsdemo.htm#c1_10)
百度的接口是这样获取区域边界的:
我们可以把需要的区域输入进去,然后把点打印出来,保存到文件里(这里我保存了成都的几个区的边界)。
有了边界点,那么绘制区划图就简单了,可以参见Qt示例(E:\Qt\Qt5.12.6\Examples\Qt-5.12.6\location\itemview_transitions)。使用一个 MapItemView来加载数据Model,Model的每一项都包含一个区划路径,而delegate使用MapPolygon来绘制多边形区域。Model可以是QML定义的,也可以是C++定义的,如果是C++定义的,注意QList是不会转为QML的path的(只有单个坐标点可以互相转换,Qt的源码中path也是通过JSValue来中转的),所以C++转的时候要自己处理下(我是分为了两个QList)。
后来我发现一个新问题,MapPolygon的边框可能拖动或者缩放后会无缘无故的消失,于是采用了MapPolygon绘制区域加MapPolyline绘制边界的方式。
2.实现代码效果:
(代码git链接:https://github.com/gongjianbo/MyQtLocation)
主要代码:
//QML
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtLocation 5.12
import QtPositioning 5.12
import MyMap 1.0 //C++注册的Model对应模块
Item {
id: control
property int hoverIndex: -1
//地图
Map {
id: the_map
anchors.fill: parent
minimumZoomLevel: 4
maximumZoomLevel: 16
zoomLevel: 10
center: QtPositioning.coordinate(30.67, 104.06)
plugin: Plugin { //这里使用了自定义plugin请忽略
name: "mymap" //"esri" "mapbox" "osm" "here"
PluginParameter {
name: "baseUrl"
// 自行指定瓦片路径
value: "file:///"+applicationDirPath+"/dianzi_gaode_ArcgisServerTiles/_alllayers"
}
PluginParameter {
name: "format"
value: "png"
}
}
MapItemView{
id: map_itemview
//Cpp扩展的model,只有坐标点,还没写其他信息
model: BoundaryModel{
id: map_itemmodel
}
//MapPolygon的边框有Bug,所以还是用折线来画,但是务须让首尾相连
delegate: MapItemGroup{
MapPolygon{
id: item_polygon
function fromLatAndLong(latList, longList) {
let the_path=[];
if(latList.length!==longList.length)
return the_path;
for (let i=0; iapplicationDirPath()+"/pathfiles/";
}
loadData();
}
QHash BoundaryModel::roleNames() const
{
return QHash{{Qt::UserRole,"boundary"}};
}
int BoundaryModel::rowCount(const QModelIndex &parent) const
{
Q_UNUSED(parent)
//qDebug()
关注
打赏
最近更新
- 深拷贝和浅拷贝的区别(重点)
- 【Vue】走进Vue框架世界
- 【云服务器】项目部署—搭建网站—vue电商后台管理系统
- 【React介绍】 一文带你深入React
- 【React】React组件实例的三大属性之state,props,refs(你学废了吗)
- 【脚手架VueCLI】从零开始,创建一个VUE项目
- 【React】深入理解React组件生命周期----图文详解(含代码)
- 【React】DOM的Diffing算法是什么?以及DOM中key的作用----经典面试题
- 【React】1_使用React脚手架创建项目步骤--------详解(含项目结构说明)
- 【React】2_如何使用react脚手架写一个简单的页面?