关注微信公众号“混沌无形”，后台回复：13462F2。免费获取完整工程源码！
基于USB-RS232协议输出UM220-III/3-N/北斗GPS模块定位信息，使用ROS与js的接口包——roslibjs，调用百度地图js API，并可视化数据，笔者测试的效果如下（红点表示经过的路径点，GPS/北斗数据存在误差，所以路径点不连续）
使用者需要先下载安装roslibjs，再注册百度地图或高德地图。
读取GPS/北斗的定位数据代码
import serial
import rospy
from nmea_msgs.msg import Sentence
from libnmea_navsat_driver.driver import RosNMEADriver
if __name__ == '__main__':
rospy.init_node('nmea_topic_serial_reader')
# fine when using 10 Hz
nmea_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_id
frame_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_id
sentence.sentence = data
nmea_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 variant
var 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>喜欢的话，请关注微信公众号，可阅读更多好文！