MapViewer V2.0：在高德/百度地图上增加小车回放功能，控制小车的速度，显示行驶方方向

最新推荐文章于 2024-05-24 17:54:15 发布
最新推荐文章于 2024-05-24 17:54:15 发布
阅读量920 收藏 2
点赞数 1
分类专栏： python 文章标签： 街景地图 python javascript agps
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013516331/article/details/118878712
版权

背景介绍 

        在MapViewer V1.0的基础上，增加了小车行驶轨迹回放的功能，这种展示方法直观、清晰，很适合给领导尤其是不懂技术的领导汇报工作。

效果图

主要部分的设计与实现 

右下角控件布置

<body><div id="container"></div>
  <div class="input-card" position="top">
    <div>
        <select id="spd" style="width:100px;" onchange="changeSpd()">
            <option value="500">500</option>
            <option value="5000" selected="selected">5000</option>
            <option value
了解本专栏 订阅专栏 解锁全文 超级会员免费看
dj Yang
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
高德地图轨迹回放+进度条，倍速调整
07-13
高德地图历史轨迹回放+进度条，倍速调整
mapviewer:Mapviewer简化了使用配置创建地图可视化的过程。 这是对Leaflet的抽象
05-06
地图浏览器Mapviewer是的抽象，可以使用配置创建常见的GIS应用程序。 Mapviewer需要npm install leaflet d3 d3-scale-chromatic mapviewer color npm install leaflet d3 d3-scale-chromatic mapviewer 。 < link...
高德地图轨迹回放，消息框内展示车辆速度且随车辆移动
博客
05-09 2864
直接上代码和效果图，代码中有步骤注释，很简单 需要替换您自己的高德API KEY。 <html> <head> <script src="https://webapi.amap.com/maps?v=1.3&key=你的KEY&plugin=AMap.Autocomplete,AMap.Walking,AMap.PlaceSearch,AMap.PolyEditor,AMap.CircleEditor,AMap.Transfer,AMap.Drivin
vue3百度地图电子地图轨迹回放，通过坐标集合从开始到结束播放轨迹，根据坐标集合自动调整视野，地图坐标信息窗窗口点击和结果的监听事件，绘制折线的地图叠加层和折线的箭头方向
最新发布
weixin_43373009的博客
05-24 613
vue3百度地图电子地图轨迹回放，通过坐标集合从开始到结束播放轨迹，根据坐标集合自动调整视野，地图坐标信息窗窗口点击和结果的监听事件，绘制折线的地图叠加层和折线的箭头方向
高德地图轨迹回放，消息框内展示车辆速度且随车辆移动-升级支持调整速度、回放进度
博客
05-09 9640
使用高德地图回放车辆GPS轨迹，并添加速度和回放进度条，并支持调整，效果如下： 新增的功能： 在基础版本，有如下升级 速度条：可以拖动以调整车辆回放速度，且从当前位置继续回放 进度条：进度条表示车辆已回放的百分比，且拖动进度条车辆定位到相应的位置并继续回放 ###思路分析 高德和marker回放相关的API //主要靠他回放 moveAlong(path:Array,speed:Number,f:Function,circlable:Boolean) //点移动到另一个位置，移动进度条车辆跟随移动
百度地图API实现轨迹动态回放并控制回放速度
热门推荐
Coder_XiaoHui的博客
03-29 1万+
百度地图实现动态回放并控制回放速度，介绍了几个主要函数，代码直接可用。
vue 利用高德地图的巡航轨迹， 做带进度条和倍速的轨迹回放
weixin_40579884的博客
04-29 1万+
所用技术：vue，高德地图（amap），iview-slider 绘制轨迹使用的是高德地图的 轨迹展示 功能 对应demo地址：https://lbs.amap.com/api/amap-ui/demos/amap-ui-pathsimplifier/simple-demo， api地址:https://lbs.amap.com/api/javascript-api/reference-am...
MapViewer:打开由WurmAPI创建的地图
03-13
MapViewer 打开由WurmAPI创建的地图最新更新（1.4.0） 通过新标志的CLI 本地化（尚无翻译）要求运行MapViewer 开发MapViewer使用单击获取最新版本并下载MapViewer jar。 对于大多数用户，如果Java正确安装在系统上，...
mm_mapviewer:魔法门 6-8 地图查看器 (OpenGL)
06-03
mm_mapviewer 魔法门 6-8 地图查看器 (OpenGL)
Qt调用百度地图APImap_APP.7z
02-14
在本文中，我们将深入探讨如何在Qt环境中调用百度地图API进行二次开发。这个压缩包文件"map_APP.7z"包含了一系列必要的文件，用于帮助开发者实现这一目标。首先，让我们了解一下Qt和百度地图API的基本概念，然后逐一...
MapViewer：一个用于3D映射可视化的地图查看器演示
02-05
5. **标记与注解**：MapViewer可能允许用户在地图上添加标记、注解或热点，这些功能对于定位、规划路线或进行地理分析非常有用。 6. **光照和纹理**：为了提高视觉效果，MapViewer可能应用了光照模型和纹理映射，使...
高德地图轨迹回放
12-17
地图轨迹回放包含下面功能 1.轨迹回放播放 2.轨迹回放暂停 3.轨迹回放速度增大 4.轨迹回放速度减小 5.轨迹回放中文地址显示 6.支持进度条控制轨迹回放 注：使用时替换相应地图key即可，提供Json模拟数据，保证运行
高德地图——车随轨迹点移动
who_become_gods的博客
12-02 4572
经常有人问怎么控制车辆车头方向随着行进方向改变, 怎么展示车辆运行轨迹 在高德地图中展示车辆轨迹有三种方法，一种方法是AMapUI的PathSimplifier创建巡航器来展示轨迹： 高德地图轨迹展示示例 第二种方法是使用moveAlong,moveAlong可以让marker按照给定的经纬度数组以指定的速度移动 高德地图轨迹回放示例 第三中方法是使用moveTo，moveTo可以让marker以给定的速度从一个经纬度移动到另一个经纬度并自动调整车头方向(车头方向与起点到终点的直线平行)。也可以看做move
Vue中使用高德地图历史轨迹回放(二)-加速功能
jinglianglove的博客
10-11 4137
Vue中使用高德地图历史轨迹回放-加速功能 在能让轨迹运动起来的前提下（基础功能），现在要加速运动和减速运动怎么做 直接看代码 //加速 默认速度200，让他成倍数的加速自己设定一个固定的值就可以了 startAdd() { if (this.markerSpeed < 1000) { this.markerSpeed = 200; ...
高德地图路线绘制，支持回放、速度、坐标转换等功能。
qq_42483780的博客
09-26 551
vue高德地图
vue中使用高德地图实现历史轨迹回放并能控制播放轨迹的倍速
jieyucx的博客
05-11 3090
如何在vue中引入高德地图在这里就不过多赘述，大家可以看这篇参考。
百度地图轨迹回放 快进 后退 停止 播放 暂停 的实现
zhounanboa的专栏
08-30 4144
//左边树 var menuTree; //地图 var map; //时间框 var dlg_Edit1; //markerArr var arr; //label var label; //marker var m1; //循环 var interval; //坐标点下标 var counterM = 0; //searchInfoWindow var sea
JSAPI 高德地图应用--车辆的轨迹回放、并附有信息框（上）
wo_1021的博客
07-28 2690
关于车辆的轨迹回放功能方法，主要分为两种，一种是通过标记点moveAlong()的方法，另一种是PathSimplifier是一个轨迹展示组件；两种方法，各有各的优缺点，前者是比较简单，但是不能在中途控制速度；后者的功能比较全面，但是目前依赖Canvas进行绘制，因此不支持IE9及以下浏览器，而且巡航作为动画过程是非常耗费性能的。 下面我将用不同的方法来实现这个轨迹回放，首先使用一个简单标记点的方法，效果如下： 具体的代码如下： function initLine...
qt调用百度地图标记点信息
04-30
Qt是一种跨平台的开发框架，它提供了丰富的功能库，可轻松实现各种应用程序。要在Qt中调用百度地图标记点信息，首先需要在百度地图开放平台上创建一个应用程序，并获得对应的应用密钥。接着，可以使用Qt中提供的网络模块进行HTTP请求，从而与百度地图API进行通信，获取标记点的信息。 在Qt中，可以使用QNetworkAccessManager类来发起HTTP请求，并使用QNetworkReply类来处理响应。需要注意的是，百度地图API通常会返回JSON格式的数据，因此需要使用Qt中提供的Json模块进行解析。同时，还可以使用Qt中的Graphics View框架来展示地图和标记点，以及与用户进行交互。 以下是一个简单的示例代码，演示如何在Qt中使用百度地图API获取标记点信息并在地图上显示： ``` #include <QtNetwork> #include <QGraphicsView> #include <QJsonDocument> #include <QJsonObject> class MapViewer : public QGraphicsView { public: MapViewer(QWidget *parent = nullptr) : QGraphicsView(parent) { // 创建网络访问管理器 m_network = new QNetworkAccessManager(this); // 设置百度地图API密钥 m_apikey = "YOUR_API_KEY"; // 发起HTTP请求获取标记点信息 requestMarkers(); } private: QNetworkAccessManager *m_network; QString m_apikey; void requestMarkers() { QUrl url("http://api.map.baidu.com/place/v2/search"); QUrlQuery query; query.addQueryItem("query", "餐厅"); // 搜索关键词 query.addQueryItem("region", "北京"); // 搜索区域 query.addQueryItem("output", "json"); // 返回格式为JSON query.addQueryItem("scope", "2"); // 返回详细信息 query.addQueryItem("ak", m_apikey); // 此处填写应用程序的API密钥 url.setQuery(query); QNetworkRequest request(url); QNetworkReply *reply = m_network->get(request); connect(reply, &QNetworkReply::finished, this, &MapViewer::handleMarkers); } void handleMarkers() { QNetworkReply *reply = qobject_cast<QNetworkReply *>(sender()); if (reply->error() != QNetworkReply::NoError) return; QByteArray data = reply->readAll(); QJsonDocument doc = QJsonDocument::fromJson(data); QJsonObject jsonObj = doc.object(); QJsonArray results = jsonObj.value("results").toArray(); for (const QJsonValue &result : results) { QJsonObject poi = result.toObject(); double lon = poi.value("location").toObject().value("lng").toDouble(); double lat = poi.value("location").toObject().value("lat").toDouble(); QGraphicsRectItem *marker = new QGraphicsRectItem(-5, -5, 10, 10); marker->setPen(Qt::NoPen); marker->setBrush(Qt::red); marker->setPos(lon * 100000, -lat * 100000); scene()->addItem(marker); } } }; int main(int argc, char *argv[]) { QApplication app(argc, argv); MapViewer viewer; viewer.setScene(new QGraphicsScene); viewer.show(); return app.exec(); } ``` 以上代码演示了如何在Qt中发起HTTP请求，获取百度地图API返回的标记点信息，并在Graphics View中显示标记点。当然，由于百度地图API拥有丰富的功能，上述代码仅为一个示例，开发者可以根据需求进行扩展和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

dj Yang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值