实验四 车辆定位导航

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6

有想自己动手的同学可在末尾看教程

【实验目的】

       1、了解全球定位导航系统的定位原理和电子地图技术掌握电子地图API使用方法。

       2、了解导航数据报文数据格式解析导航数据并在电子地图上进行导航应用。

【实验性质】

验证性实验。

【实验要求】

       1、相关网站申请电子地图KEY

       2、查阅GPS/BDS等导航报文格式

      

【实验内容】

       1、学习电子地图API的使用方法在浏览器中调用API接口显示地图。

       2、了解GPS/BDS导航报文数据特点解析导航报文并结合地图应用。

      

【实验步骤】

1、数字道路地图的显示

以百度地图为例GPS定位与导航实验要求使用百度地图API在IE浏览器中显示百度地图从百度地图网站下载BMapLib百度地图API分析API的程序结构并在实验中对其结构作简单描述。显示效果如下图

图4-1 百度地图API接口脚本示例

图4-2 地图显示效果图

运行代码并截图

在下面区域填写相关代码某一项功能的关键代码并加以适当的说明

关键代码

代码说明

//读GPS文件

var readFile = {

    init: function() {

        this.getFile();

    },

    getFile: function() {

            var gpsArray = [];  

        //读取GPS文件

        $('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('空的');

            //          }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);

}

读取GPS文件并在百度地图上显示轨迹的。首先定义了一个readFile对象该对象有两个方法init和getFile。init方法调用了getFile方法getFile方法则主要通过点击按钮进行文件读取操作。

在getFile方法中首先使用XMLHttpRequest对象进行文件读取操作。这里使用了异步请求即设置了第三个参数为true。然后通过onreadystatechange方法注册回调函数处理服务器响应信息。如果响应状态码为200说明读取GPS文件成功此时将文件内容解析成字符串数组遍历每一行数据如果该行是GPRMC语句则从中获取经纬度信息并构造包含经纬度信息的对象并将该对象加入到gpsArray数组中。最后调用bdMapFunc方法将GPS坐标转换成百度地图坐标并绘制出轨迹。

bdMapFunc方法中会对GPS坐标进行遍历将每10个坐标点传入huizhi方法。huizhi方法则用BMap.Convertor对象将GPS坐标转换成百度地图坐标并使用回调函数将转换后的坐标添加到地图覆盖物中。

最后在文件读取和地图绘制过程中都使用了layer.load方法展示了loadding动画提升了用户体验。

2、定位数据解析应用

本次实验提供符合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也将被传输

’‘

方式一

由于用了百度api存在跨域的问题可以下载

用vscode打开

代码已经写好了有兴趣可以看一看

右击鼠标使用live Server打开

 

https://pan.baidu.com/s/12T9OH6hTvYwDt3R9T9PRzA?pwd=2222 
提取码2222

想自己动手的可以试一试

方式二使用phpstudy

打开phpstudy配置如图

 启动Apache

打开根目录

按照如图配置 

打开浏览器即可访问 

 这里我访问的是helloWorld.html网页

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6