Students who want to do it themselves can read the tutorial at the end

【Purpose】

1. Understand the positioning principle of the global positioning navigation system and electronic map technology, and master the use of electronic map API.

2. Understand the data format of the navigation data message, analyze the navigation data and apply the navigation on the electronic map.

【Experimental nature】

Confirmatory experiment.

【Experimental Requirements】

1. Relevant websites apply for electronic map KEY

2. Consult GPS/BDS and other navigation message formats

【Experimental content】

1. Learn how to use the electronic map API, and call the API interface in the browser to display the map.

2. Understand the data characteristics of GPS/BDS navigation messages, analyze the navigation messages and combine them with map applications.

【Experimental steps】

1. Display of digital road map

Taking Baidu map as an example, the GPS positioning and navigation experiment requires the use of Baidu map API to display Baidu map in IE browser, download BMapLib (Baidu map API) from Baidu map website, analyze the program structure of API, and compare the structure in the experiment Give a brief description. The display effect is as follows:

Figure 4-1 Baidu map API interface script (example)

Figure 4-2 Map display rendering

Run the code and take a screenshot:

Fill in the relevant code (the key code of a certain function) in the following area, and give an appropriate description:

key code:

Code description:

//read GPS file

var readFile = {

init: function() {

this.getFile();

getFile: function() {

var gpsArray = [];

// read GPS file

$('button#readFile').on('click', function(){

var index = layer.load(1, {

shade: [0.3, '#333']

});

// $.ajax({

// url: 'php/getPosition.php',

// type: 'get',

// dataType: 'text',

// data: {

// },

// success: function(data) {

// console.log(data);

// var strArray = String(data).split(/[\[\]]/g);

// var newArray = [];

// var j=0;

// for(var i=0; i<strArray.length; i++){

// if(strArray[i] == ""){

// //console.log('empty');

// }else{

// newArray[j] = strArray[i];

// j++;

// }

// var str = '[';

// str += newArray.join(',');

// str += ']';

// var jsonObj = eval('(' + str + ')');

// var pointArray = [];

// for(var i=0; i<jsonObj.length; i++){

// pointArray[i] = new BMap.Point(jsonObj[i].lon, jsonObj[i].lat);

// }

// //console.log(pointArray);

// //map.setCenter(pointArray[pointArray.legnth]);

// map.centerAndZoom(pointArray[0], 12);

// map.clearOverlays();

// var polyline = new BMap.Polyline(pointArray, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建折线

// map.addOverlay(polyline); //增加折线

// layer.close(index);

// }

// });

var xhr = new XMLHttpRequest();

xhr.open("GET", "21111020103105.gps", true); // 配置请求属性：方法、URL、是否异步

xhr.onreadystatechange = function() { // 注册回调函数处理响应数据

if (this.readyState === 4 && this.status === 200) {

// console.log(this.responseText); // 输出文件内容到控制台

var strArray = String(this.responseText).split("\n");

// console.log(strArray);

// 假设 data 是一个包含 NMEA GPS 数据的字符串数组

strArray.forEach(function(str){// 遍历每一行数据

console.log(str);

var arr = str.split(',');

if (arr[0] === '$GPRMC'){// 如果该行是 GPRMC 语句，则

var lat = arr[3];// 获取纬度信息

var lon = arr[5];// 获取经度信息

var obj = {lat: lat, lon: lon}; // 构造包含经纬度信息的对象

gpsArray.push(obj);// 将该对象加入到 gpsArray 数组中

}

)

bdMapFunc(gpsArray);

map.centerAndZoom(gpsArray[0],12);

map.clearOverlays();

var polyline = new BMap.Polyline(gpsArray,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建折线

map.addOverlay(polyline); //增加折线

layer.close(index);

}

};

xhr.send();

});

}

};

//百度地图转换数据

function bdMapFunc(obj){

//GPS坐标

var j=0;

for(var i=0; i<obj.length; i++){

if(!MMToDD(obj[i].lat)){

break;

}else{

points.push(new BMap.Point(MMToDD(obj[i].lon), MMToDD(obj[i].lat)));

j++;

}

if(j == 10){

huizhi(points);

points.splice(0, points.length);

//i = 10000;

j=0;

}

var points = [];

//绘制方法

function huizhi(points) {

//坐标转换完之后的回调函数

translateCallback = function (data){

console.log(data);

if(data.status === 0) {

for (var i = 0; i < data.points.length; i++) {

map.addOverlay(new BMap.Marker(data.points[i]));

map.setCenter(data.points[i]);

}

setTimeout(function(){

var convertor = new BMap.Convertor();

convertor.translate(points, 1, 5, translateCallback);

}, 1000);

}

//ddmm.mmmmmm转为dd.dddddd格式

function MMToDD(data) {

//console.log(data1);

var array = String(data).split('.');

var lastTwo = array[0].substring(array[0].length-2, array[0].length);

var firstThree = array[0].substring(0, array[0].length-2);

if(array[0] == ''){

return false;

}

//console.log(parseFloat(firstThree) + (parseFloat(lastTwo + '.' + array[1])) / 60);

return (parseFloat(firstThree) + (parseFloat(lastTwo + '.' + array[1])) / 60);

}

Read the GPS file and display the track on the Baidu map. First, a readFile object is defined, which has two methods: init and getFile. The init method calls the getFile method, and the getFile method mainly performs file reading operations by clicking the button.

In the getFile method, first use the XMLHttpRequest object to read the file. An asynchronous request is used here, that is, the third parameter is set to true. Then register the callback function through the onreadystatechange method to process the server response information. If the response status code is 200, it means that the reading of the GPS file is successful. At this time, the file content is parsed into a string array, and each row of data is traversed. If the row is a GPRMC statement, the latitude and longitude information is obtained from it and an object containing the latitude and longitude information is constructed. And add the object to the gpsArray array. Finally, call the bdMapFunc method to convert the GPS coordinates into Baidu map coordinates, and draw the trajectory.

In the bdMapFunc method, the GPS coordinates will be traversed, and every 10 coordinate points will be passed into the huizhi method. The huizhi method uses the BMap.Convertor object to convert GPS coordinates to Baidu map coordinates, and uses the callback function to add the converted coordinates to the map overlay.

Finally, in the process of file reading and map drawing, the layer.load method is used to display the loading animation, which improves the user experience.

2. Positioning data analysis application

本次实验提供符合NMEA0183协议的GPS定位数据，要求必须解析GPRMC格式的GPS报文，其他格式报文可自选，在实验报告中要求对相关报文格式进行描述和对报文解析过程进行分析。

GPRMC报文格式：

$GPRMC,<1>,<2>,<3>,<4>,<5>,<6>,<7>,<8>,<9>,<10>,<11>,<12>*hh

<1> UTC时间，hhmmss（时分秒）格式

　　<2> 定位状态，A=有效定位，V=无效定位

　　<3> 纬度ddmm.mmmm（度分）格式（前面的0也将被传输）

　　<4> 纬度半球N（北半球）或S（南半球）

　　<5> 经度dddmm.mmmm（度分）格式（前面的0也将被传输）

　　<6> 经度半球E（东经）或W（西经）

　　<7> 地面速率（000.0~999.9节，前面的0也将被传输）

　　<8> 地面航向（000.0~359.9度，以真北为参考基准，前面的0也将被传输）

　　<9> UTC日期，ddmmyy（日月年）格式

<10> 磁偏角（000.0~180.0度，前面的0也将被传输）

　　<11> 磁偏角方向，E（东）或W（西）

　　<12> 模式指示（仅NMEA0183 3.00版本输出，A=自主定位，D=差分，E=估算，N=数据无效）

hh 校验值（不处理）

试从数据记录中找出一条数据记录，并解析出数据字段值（不限于GPRMC）：

数据记录：

$GPRMC,022134.001,A,3239.2328,N,11044.1251,E,0.00,0.00,201111,,*01

数据字段：

字段名称	字段值	单位
UTC时间，hhmmss（时分秒）格式	022134.001	s
定位状态	A	byte
纬度ddmm.mmmm	3239.2328	度
纬度半球N（北半球）或S（南半球）	N
经度dddmm.mmmm（度分）格式（前面的0也将被传输）	11044.1251	度
经度半球E（东经）或W（西经）	E	Byte
地面速率（000.0~999.9节，前面的0也将被传输）	0.00	节
地面航向（000.0~359.9度，以真北为参考基准，前面的0也将被传输）	0.00	度
UTC日期，ddmmyy（日月年）格式	201111
磁偏角（000.0~180.0度，前面的0也将被传输）	’‘	度