ROS采集GPS/北斗数据在百度地图中可视化位置

关注微信公众号“混沌无形”，后台回复：13462F2。免费获取完整工程源码！

基于USB-RS232协议输出UM220-III/3-N/北斗GPS模块定位信息，使用ROS与js的接口包——roslibjs，调用百度地图js API，并可视化数据，笔者测试的效果如下（红点表示经过的路径点，GPS/北斗数据存在误差，所以路径点不连续）

使用者需要先下载安装roslibjs，再注册百度地图或高德地图。

读取GPS/北斗的定位数据代码

import serialimport rospyfrom nmea_msgs.msg import Sentence
from libnmea_navsat_driver.driver import RosNMEADriverif __name__ == '__main__':rospy.init_node('nmea_topic_serial_reader')# fine when using 10 Hznmea_pub = rospy.Publisher("nmea_sentence", Sentence, queue_size=3)serial_port = rospy.get_param('~port','/dev/ttyUSB0')serial_baud = rospy.get_param('~baud',115200)# Get the frame_idframe_id = RosNMEADriver.get_frame_id()try:GPS = serial.Serial(port=serial_port, baudrate=serial_baud, timeout=2)while not rospy.is_shutdown():data = GPS.readline().strip()sentence = Sentence()sentence.header.stamp = rospy.get_rostime()sentence.header.frame_id = frame_idsentence.sentence = datanmea_pub.publish(sentence)except rospy.ROSInterruptException:GPS.close() #Close GPS serial port

数据点在网页的可视化代码为

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}</style>
<title>地图显示</title>
<script  src="http://api.map.baidu.com/api?v=2.0&ak=Ii2oy8BEXRtwXOW1wo0oRb4xGneV6nCm"></script><script src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<script src="../build/roslib.js"></script>
</head><body><div id="statusIndicator"><p id="connecting">Connecting to rosbridge...</p><p id="connected" style="color:#00D600; display:none">Connected</p><p id="error" style="color:#FF0000; display:none">Error in the backend!</p><p id="closed" style="display:none">Connection closed.</p></div>
</ol><div id="allmap"></div><script type="text/javascript"> // Connecting to ROS// -----------------var ros = new ROSLIB.Ros();// If there is an error on the backend, an 'error' emit will be emitted.ros.on('error', function(error) {document.getElementById('connecting').style.display = 'none';document.getElementById('connected').style.display = 'none';document.getElementById('closed').style.display = 'none';document.getElementById('error').style.display = 'inline';console.log(error);});// Find out exactly when we made a connection.ros.on('connection', function() {console.log('Connection made!');document.getElementById('connecting').style.display = 'none';document.getElementById('error').style.display = 'none';document.getElementById('closed').style.display = 'none';document.getElementById('connected').style.display = 'inline'; });ros.on('close', function() {console.log('Connection closed.');document.getElementById('connecting').style.display = 'none';document.getElementById('connected').style.display = 'none';document.getElementById('closed').style.display = 'inline';});// Create a connection to the rosbridge WebSocket server.ros.connect('ws://localhost:9090');// define two global variantvar x = 0;var y = 0;//Subscribing to a Topic//----------------------// Like when publishing a topic, we first create a Topic object with details of the topic's name// and message type. Note that we can call publish or subscribe on the same topic object.var carPose = new ROSLIB.Topic({ros : ros,name : '/simplegps',messageType : 'geometry_msgs/Pose2D'});var sample = new ROSLIB.Topic({ros : ros,name : '/simplegps',messageType : 'geometry_msgs/Pose2D'});// Then we add a callback to be called every time a message is published on this topic.carPose.subscribe(function (message) {window.x = message.x;window.y = message.y;var map = new BMap.Map("allmap",{minZoom:3,maxZoom:19}); // 创建Map实例,设置地图允许的最小/大级别 var gpspoint = new BMap.Point(window.x, window.y); // 创建点坐标// 添加带有定位的导航控件var navigationControl = new BMap.NavigationControl({// 靠左上角位置anchor: BMAP_ANCHOR_TOP_LEFT,// LARGE类型type: BMAP_NAVIGATION_CONTROL_LARGE,// 启用显示定位enableGeolocation: true});map.addControl(navigationControl);// 添加定位控件var geolocationControl = new BMap.GeolocationControl();geolocationControl.addEventListener("locationSuccess", function(e){// 定位成功事件var address = '';address += e.addressComponent.province;address += e.addressComponent.city;address += e.addressComponent.district;address += e.addressComponent.street;address += e.addressComponent.streetNumber;alert("当前定位地址为：" + address);});geolocationControl.addEventListener("locationError",function(e){// 定位失败事件alert(e.message);});map.addControl(geolocationControl);//添加地图类型控件map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));      map.setCurrentCity("重庆");          // 设置地图显示的城市 此项是必须设置的//坐标转换完之后的回调函数translateCallback = function (data){var bdpoint = data.points[0];map.centerAndZoom(bdpoint, 12);    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放         function Sample()  //标住更新的位置{ sample.subscribe(function (message) {window.x = message.x;  //更新点坐标window.y = message.y;var gpspoint = new BMap.Point(window.x, window.y); // 创建点坐标translateCallback1 = function (data){  var bdpoint1 = data.points[0]  //创建点坐标var marker = new BMap.Marker(bdpoint1); // 创建标注map.addOverlay(marker); // 将标注添加到地图中}function zbzh1()   //坐标转换{var convertor = new BMap.Convertor();var pointArr = [];pointArr.push(gpspoint);convertor.translate(pointArr, 1, 5, translateCallback1)}      zbzh1();sample.unsubscribe();});}function xh() //无限循环{setTimeout(function(){Sample ();xh();},3000);}setTimeout(xh(),3000);}function zbzh()   //坐标转换{var convertor = new BMap.Convertor();var pointArr = [];pointArr.push(gpspoint);convertor.translate(pointArr, 1, 5, translateCallback)}zbzh();// If desired, we can unsubscribe from the topic as well.carPose.unsubscribe();});</script></body>
</html>

喜欢的话，请关注微信公众号，可好文！

ROS采集GPS/北斗数据在百度地图中可视化位置相关推荐

php 根据位置显示地图,php根据地理名称获取百度地图中的位置
根据获取的地理名称,通过百度api得到经纬度,从而显示在地图中难易:初级下载资源下载积分: 40 积分 $address = $_GET['address'] ? $_GET['address' ...
Qt开发北斗定位系统融合百度地图API及Qt程序打包发布
Qt开发北斗定位系统融合百度地图API及Qt程序打包发布 1.上位机介绍最近有个接了一个小型项目,内容很简单,就是解析北斗GPS的串口数据然后输出经纬度,但接过来觉得太简单,就发挥了主观能动性,增加 ...
在百度地图中叠加CAD图及GIS数据展示踩坑记
前言在之前的几篇博客中分别介绍了在Cesium中实现与CAD的DWG图叠加显示分析 https://www.cnblogs.com/vjmap/p/16541751.html . 高德地图与CAD ...
百度地图实现公司位置的定位，可拖动修改公司位置。
百度地图实现公司位置的定位,可拖动修改公司位置.只需要维护x轴和Y轴的数据到数据库就可以了可拖动,可搜索. <html><head><script src=" ...
百度地图中绘制多个点例子
水平有限,欢迎指正.交流!! <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
根据百度地图经纬度获取位置信息
/*** 根据百度地图经纬度获取位置信息 **/ public class BaiduMapUtils {// 百度地图秘钥static String ak = "此处添加你的百度地图秘钥& ...
android h5调用百度地图,h5页面如何调用百度地图获取当前位置（代码）
本篇文章给大家带来的内容是关于h5页面如何调用百度地图获取当前位置(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在项目中越来越多的用到了手机的GRS定位功能,使用百度地图A ...
vue3调用百度地图标注选择位置并获取经纬度
vue3调用百度地图标注选择位置并获取经纬度参考了很多文章,最终结合百度文档各有采取完成地图选取经纬度. 第一步:引入百度地图,在当前需要地图的页面引入就行. const loadMapScript ...
百度地图获取当前位置街道_轻松查看街道地址位置地图
百度地图获取当前位置街道 Have you found the address for a place that you would like to visit while browsing but ...

ROS采集GPS/北斗数据在百度地图中可视化位置

ROS采集GPS/北斗数据在百度地图中可视化位置相关推荐

最新文章

热门文章