自分でやってみたい学生は、最後にあるチュートリアルを読んでください。
【目的】
1. 全地球測位ナビゲーションシステムの測位原理と電子地図技術を理解し、電子地図APIの使い方を習得する。
2. ナビゲーションデータメッセージのデータフォーマットを理解し、ナビゲーションデータを分析し、電子地図上にナビゲーションを適用します。
【実験性】
確認実験。
【実験要件】
1. 該当Webサイトから電子地図KEYを申請
2. GPS/BDS およびその他の航法メッセージ形式を参照してください。
【実験内容】
1. 電子地図 API の使用方法を学習し、ブラウザで API インターフェイスを呼び出して地図を表示します。
2. GPS/BDS ナビゲーション メッセージのデータ特性を理解し、ナビゲーション メッセージを分析し、地図アプリケーションと組み合わせます。
【実験手順】
1. デジタル道路地図の表示
百度地図を例に挙げると、GPS 測位およびナビゲーションの実験では、百度地図 API を使用して IE ブラウザに百度地図を表示し、百度地図 Web サイトから BMapLib (百度地図 API) をダウンロードし、API のプログラム構造を分析し、百度地図を比較する必要があります。実験の構造 簡単に説明します。表示効果は次のとおりです。
図 4-1 Baidu 地図 API インターフェース スクリプト (例)
図 4-2 地図表示のレンダリング
コードを実行してスクリーンショットを撮ります。
次の領域に該当するコード(特定の機能のキーコード)を入力し、適切な説明を入力します。
キーコード: |
コードの説明: |
//GPSファイルを読み込む var readFile = { init: function() { this.getFile(); }、 getFile: function() { var gpsArray = []; // GPSファイルを読み込みます $('button#readFile').on('click', function(){ var インデックス = Layer.load(1, { シェード: [0.3, '#333'] }); // $.ajax({ // URL: 'php/getPosition.php', // タイプ: 'get', // データタイプ: 'テキスト', // データ: { // }、 // 成功: function(data) { // コンソール.log(データ); // var strArray = String(data).split(/[\[\]]/g); // var newArray = []; // var j=0; // for(var i=0; i<strArray.length; i++){ // if(strArray[i] == ""){ // //console.log('空'); // }それ以外{ // 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(配列[0] == ''){ false を返します。 } //console.log(parseFloat(firstThree) + (parseFloat(lastTwo + '.' + array[1])) / 60); return (parseFloat(firstThree) + (parseFloat(lastTwo + '.' + array[1])) / 60); } |
GPS ファイルを読み取り、百度地図上に軌跡を表示します。まず、init と getFile という 2 つのメソッドを持つ readFile オブジェクトが定義されます。init メソッドは getFile メソッドを呼び出します。getFile メソッドは主にボタンのクリックによるファイルの読み取り操作を実行します。 getFile メソッドでは、まず XMLHttpRequest オブジェクトを使用してファイルを読み取ります。ここでは非同期リクエストが使用されています。つまり、3 番目のパラメータが true に設定されています。次に、onreadystatechange メソッドを介してコールバック関数を登録し、サーバー応答情報を処理します。応答ステータス コードが 200 の場合、GPS ファイルの読み取りが成功したことを意味します。このとき、ファイルの内容は文字列配列に解析され、データの各行が走査されます。行が GPRMC ステートメントの場合、そこから緯度経度情報を取得し、緯度経度情報を含むオブジェクトを構築し、そのオブジェクトを gpsArray 配列に追加します。最後に、bdMapFunc メソッドを呼び出して GPS 座標を Baidu マップ座標に変換し、軌跡を描画します。 bdMapFunc メソッドでは、GPS 座標がトラバースされ、10 個の座標点ごとに huizhi メソッドに渡されます。huizhi メソッドは、BMap.Convertor オブジェクトを使用して GPS 座標を Baidu 地図座標に変換し、コールバック関数を使用して変換された座標を地図オーバーレイに追加します。 最後に、ファイルの読み取りとマップ描画のプロセスで、layer.load メソッドを使用して読み込みアニメーションが表示され、ユーザー エクスペリエンスが向上します。 |
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网页