实验四 车辆定位导航

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

【实验目的】

       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网页

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/22402.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

自抗扰PID(梯形图源代码)

有关ADRC的详细算法和源代码,请参看专栏的系列文章,这里不再赘述,常用链接如下: ADRC自抗扰控制算法(含梯形图完整源代码和算法公式)_adrc算法_RXXW_Dor的博客-CSDN博客PLC的自抗扰控制(ADRC)算法_RXXW_Dor的博客-CSDN博客_adrc算法1、自抗扰控制算法,网上很多文章有所…

数据仓库漫谈-前世今生

数据仓库的内容非常多&#xff0c;每一个子模块拎出来都能讲很久。这里没法讲太多细节&#xff0c;大致思考了三个备选议题&#xff1a; 数据仓库的前世今生 数据仓库体系知识介绍 数仓开发者的路在何方&#xff1f; 既然是第一次分享&#xff0c;感觉还是跟大家普及下数仓的…

浏览器数据存储方式

浏览器数据存储方式 常用的前端数据存储方法笼统来说有 3 种&#xff1a; local/session storagecookiesindexeddb 3 种方法各有各的优点和使用范围。 local/session storage local/session storage 保存的格式都为键值对&#xff0c;并且用法都是差不多&#xff0c;如下&…

『树莓派云台机器人』02. 电脑连接树莓派 配置开发环境

目录 1. 下载ssh交互工具 Xshell 与XFTP&#xff08;有过相关使用经历的朋友可以跳过这一节内容&#xff09;2. 下载VNC远程控制工具软件3. 连接过程4. Xshell 命令工具5. XFTP 文件传送工具6. 关于联网总结 欢迎关注 『树莓派云台机器人』 博客&#xff0c;持续更新中 欢迎关注…

基于Zynq的雷达10Gbps高速PCIE数据采集卡方案(三)软件设计

4.1 引言 本章基于第二章的分析结论&#xff0c;进行系统软件设计。软件设计包括逻辑设计、嵌入 式软件设计和上位机软件设计。在逻辑设计中&#xff0c;对 ADC 模块、 Aurora 模块、 DDR3 SDRAM 模块和 PCIE 模块进行分析和设计&#xff0c;在 Vivado 软件提供的 …

在 Linux 上使用 yuzu 模拟 Nintendo Switch 试玩王国之泪

王国之泪5月12日发售&#xff0c;DLC 玩家已经造出各种脑洞大开的东西了&#xff0c;但是买的卡带迟迟没有收到&#xff0c;因此&#xff0c;打算使用 yuzu 模拟器先体验一下 yuzu 是一款开源的 Ninetendo Switch 模拟器&#xff0c;支持在 Linux 或者 Windows 平台运行&#…

vue动态class的写法

本文会详细介绍 vue动态 class的写法&#xff0c;并且提供一些我个人的理解&#xff0c;希望对你有所帮助。 如果你是一个新手&#xff0c;或者想了解 vue的源码&#xff0c;那么首先应该学习 vue的基础知识&#xff0c;比如&#xff1a;什么是静态语言&#xff0c;有什么作用等…

JQuery原理剖析——自己手写简易版JQuery

知其一后知其二&#xff1b; 目录 为什么需要JQuery jQuery的概念&#xff1a; 在此之前回顾JavaScript对象知识&#xff1a; 自己手写的简易JQuery&#xff1a; 为什么需要JQuery 在我们之前写的JS代码中经常会遇见document.getElementById等等获取元素的对象&#xff0c…

Apache Kafka - 重识Kafka生产者

文章目录 概述Kafka 生产者Kafka 生产者工作原理如何使用 Kafka 生产者 生产者配置项&#xff08;核心&#xff09;导图总结 概述 Kafka 生产者是 Apache Kafka 中的一个重要组件&#xff0c;它负责将数据发送到 Kafka 集群中。在实时数据处理和流式处理应用程序中&#xff0c…

OKR是什么意思啊

一、OKR是什么意思&#xff1f; OKR是"Objective and Key Results"的缩写&#xff0c;即目标和关键结果。它是一种目标管理框架&#xff0c;旨在帮助组织和团队设定明确的目标&#xff0c;并通过关键结果来衡量和追踪目标的实现情况。 为了让大家快速了解什么是OKR…

Doxygen 源码分析: QCString类

2023-05-20 23:41:56 ChrisZZ imzhuofoxmailcom Hompage https://github.com/zchrissirhcz 文章目录 1. Doxygen 版本2. QCString 类概览3. QCString 特殊成员函数3.1 default 方式的构造函数3.2 单个参数和两个参数的构造函数 4. inline方式实现的成员函数4.1 operator 函数4.…

SQL执行过程

1. select 语句执行过程 一条 select 语句的执行过程如上图所示 1、建立连接 连接器会校验你输入的用户名和密码是否正确&#xff0c;如果错误会返回提示&#xff0c;如果正确&#xff0c;连接器会查询当前用户对于的权限。连接器的作用就是校验用户权限 2、查询缓存 MySQL…

面试字节,过关斩将直接干到 3 面,结果被吊打了?

人人都有大厂梦&#xff0c;对于软件测试员来说&#xff0c;BAT 为首的一线互联网公司肯定是自己的心仪对象&#xff0c;毕竟能到这些大厂工作&#xff0c;不仅薪资高待遇好&#xff0c;而且能力技术都能够得到提升&#xff0c;最关键的是还能够给自己镀上一层金&#xff0c;让…

【自然语言处理】 - 作业1: Word2Vec及TransE实现

课程链接: 清华大学驭风计划 代码仓库&#xff1a;Victor94-king/MachineLearning: MachineLearning basic introduction (github.com) 驭风计划是由清华大学老师教授的&#xff0c;其分为四门课&#xff0c;包括: 机器学习(张敏教授) &#xff0c; 深度学习(胡晓林教授), 计算…

[CTF/网络安全] 攻防世界 view_source 解题详析

[CTF/网络安全] 攻防世界 view_source 解题详析 查看页面源代码方式归类总结 题目描述&#xff1a;X老师让小宁同学查看一个网页的源代码&#xff0c;但小宁同学发现鼠标右键好像不管用了。 查看页面源代码方式归类 单击鼠标右键&#xff0c;点击查看页面源代码&#xff1a; …

国外顶尖高校、企业分享人工智能自学课程英文原课程分享

人工智能无疑已经是当下最火热的方向&#xff0c;在很多领域已经融入我们生活&#xff0c;ChatGPT,Midjourney只是其中一个细分热点。目前这个领域&#xff0c;虽说国内也有不少课程&#xff0c;但是大部分源头还得从英文资料中找。如何学到最新最强得人工智能技能&#xff0c;…

MybatisPlus--基础入门!真滴方便

目录 一、简介 2.特性 二、入门 1.创建springboot 项目(点击查看如何创建 ) 注意&#xff1a;引入 MyBatis-Plus 之后请不要再次引入 MyBatis 以及 MyBatis-Spring&#xff0c;以避免因版本差异导致的问题 2.数据准备 3.配置application.yml 4.代码 BaseMapper<>…

nacos注册中心源码分析一之服务注册、服务心跳

源码分析 nacos客户端注册分析 依赖包 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId></dependency>Nacos的客户端是基于SpringBoot的自动装配实现的 看下依…

Java多线程基础

目录 一、线程的基本使用 &#xff08;一&#xff09;创建线程的两种方式 &#xff08;二&#xff09;线程简单案例&#xff08;Thread&#xff09; 问题&#xff1a;main函数与开启的线程是否是阻塞的&#xff0c;即线程运行时&#xff0c;main函数等待线程运行结束&#…

DOUBLETROUBLE 1

文章目录 DOUBLETROUBLE: 1实战演练一、前期准备1、相关信息 二、信息收集1、nmap探测目标靶机端口2、扫描目标网址目录3、访问网站&#xff0c;发现secret下有个图片4、将图片下载5、查看图片所含内容6、破解密码并查看7、登陆邮箱8、创建反弹shell9、上传反弹shell10、监听11…
最新文章