百度地图坐标系相关学习总结
生活随笔
收集整理的這篇文章主要介紹了
百度地图坐标系相关学习总结
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
百度地圖API詳解之地圖坐標系統
我們都知道地球是圓的,電腦顯示器是平的,要想讓位于球面的形狀顯示在平面的顯示器上就必然需要
一個轉換過程,這個過程就叫做投影(Projection)。在地球上我們通過經緯度來描述某個位置,而經
過投影之后的地圖也有自己的坐標系統,本篇文章就來詳細介紹在百度地圖API中涉及的各種坐標體系。
在百度地圖API中,你需要了解如下坐標系:
經緯度:通過經度(longitude)和緯度(latitude)描述的地球上的某個位置。
平面坐標:投影之后的坐標(用x和y描述),用于在平面上標識某個位置。
像素坐標:描述不同級別下地圖上某點的位置。
圖塊坐標:地圖圖塊編號(用x和y描述)。
可視區域坐標:地圖可視區域的坐標系(用x和y描述)。
覆蓋物坐標:覆蓋物相對于容器的坐標(用x和y描述)。
別被這么多的坐標系嚇著,看完了后面的講解相信你會逐漸理解它們。
經緯度
這個就不多說了,不熟悉的可以翻翻地理書。但需要注意的是即便同是經緯度坐標也可 能屬于不同的坐
標體系。一般GPS設備獲取的經緯度屬于WGS84坐標系,這是一個比較通用的坐標體系。由于某些原因國
內不能直接使用WGS84坐標,因 此百度地圖API的經緯度是經過加密偏移的。
平面坐標
前面說過,球面上的形狀需要經過投影才能變換為平面上的形狀,變換后就需要有一個平面坐標系統來
描述地圖上某個位置。百度地圖API默認使用墨卡托投影(Mercator Projection),同樣需要注意的是
由于投影參數不同,同樣是墨卡托投影也會有所差別。
平面坐標系的原點與經緯度的原點一致,即赤道與0度經線相交的位置:
在百度地圖API中,平面坐標是以最大級別18級為基準的。就是說在18級下,平 面坐標的一個單位就代
表了屏幕上的1個像素。平面坐標與地圖所展示的級別沒有關系,也就是說在1級和18級下,天安門位置
的平面坐標都是一致的。那么如何 知道某個位置的平面坐標呢?可通過BMap.MercatorProjection類來
完成,該類提供經緯度與平面坐標互相轉換的方法。例如天安門的經緯 度大約為116.404, 39.915,經
過轉換即可得到平面坐標:
var projection = new BMap.MercatorProjection();
var point = projection.lngLatToPoint(new BMap.Point(116.404, 39.915));
alert(point.x + ", " + point.y);
結果如下:
百度地圖API詳解之地圖坐標系統(轉)
這個就是平面坐標。你可以這樣理解它的含義:第18級下,天安門距離坐標原點的位置差為:12958175,?
4825923.77,單位為像素。
像素坐標
在第18級下,我們直接將平面坐標向下取整就得到了像素坐標,而在其他級別下可以通過如下公式進行
換算(這里取整為向下取整):
像素坐標 = |平面坐標 × 2 zoom - 18|
比如經過計算,在第4級天安門位置的像素坐標是:790, 294
百度地圖API詳解之地圖坐標系統(轉)
不同級別下,同一個地理位置的像素坐標是不一樣的,它與當前地圖的級別相關。
圖塊坐標
百度地圖API在展示地圖時是將整個地圖圖片切割成若干圖塊來顯示的,當地圖初始化或是地圖級別、中
心點位置發生變化時,地圖API會根據當前像素坐標計算出視野內需要的圖塊坐標(也叫圖塊編號),從
而加載對應的圖塊用以顯示地圖。
百度地圖的圖塊坐標原點與平面坐標一致,從原點向右上方開始編號為0, 0:
百度地圖API詳解之地圖坐標系統(轉)
如何知道某個位置的圖塊坐標呢?通過如下公式計算即可(這里為向下取整):
圖塊坐標 = |像素坐標 ÷ 256|
256實際上是每個圖塊的寬度和高度,我們用像素坐標除以這個數就知道圖塊坐標了。還以天安門為例,
在第4級下天安門所在的圖塊編號為:3, 1,而在第18級下,圖塊編號為:50617, 18851
可視區域坐標
地圖都是顯示在確定大小的矩形框中的,這個矩形框通常是開發者在初始化地圖傳入的某個容器元素。
這個矩形框也有自己的坐標系,在百度地圖API中稱之為可視區域坐標系,它的原點位于矩形的左上角。
百度地圖API詳解之地圖坐標系統(轉)
通過Map類的pointToPixel和pixelToPoint方法可以相互轉換經緯度坐標與可視區域坐標。
覆蓋物坐標
覆蓋物在實現上就是若干DOM元素,這些元素會被放在若干覆蓋物容器內(具體請參 考地圖API開發指南
),那么覆蓋物的坐標實際上就是相對于這些覆蓋物容器的坐標。在地圖初始化完成后,覆蓋物容器的
左上角與地圖可視區域左上角位置相 同,一旦地圖被移動、縮放,覆蓋物容器位置就會發生變化。在自
定義覆蓋物的時候API提供經緯度信息,而開發者需要自行將經緯度轉換為覆蓋物的像素坐標, 從而覆
蓋物才能顯示在正確的位置上。這個轉換過程可以通過Map的pointToOverlayPixel和
overlayPixelToPoint兩個 方法來實現。?
DOCTYPE html> <</span>html> <</span>head> <</span>meta charset="utf-8" /> <</span>title>地圖坐標概念</</span>title> <</span>script src="http://api.map.baidu.com/api?v=1.2"></</span>script> </</span>head> <</span>body> <</span>div id="map_container" style="width:500px;height:320px;"></</span>div> <</span>script> var map = new BMap.Map('map_container', {defaultCursor: 'default'}); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);var TILE_SIZE = 256;map.addEventListener('click', function(e){ var info = new BMap.InfoWindow('', {width: 260}); var projection = this.getMapType().getProjection();var lngLat = e.point; var lngLatStr = "經緯度:" + lngLat.lng + ", " + lngLat.lat;var worldCoordinate = projection.lngLatToPoint(lngLat); var worldCoordStr = " 平面坐標:" + worldCoordinate.x + ", " + worldCoordinate.y;var pixelCoordinate = new BMap.Pixel(Math.floor(worldCoordinate.x * Math.pow(2, this.getZoom() - 18)), Math.floor(worldCoordinate.y * Math.pow(2, this.getZoom() - 18))); var pixelCoordStr = " 像素坐標:" + pixelCoordinate.x + ", " + pixelCoordinate.y;var tileCoordinate = new BMap.Pixel(Math.floor(pixelCoordinate.x / 256), Math.floor(pixelCoordinate.y / 256)); var tileCoordStr = " 圖塊坐標:" + tileCoordinate.x + ", " + tileCoordinate.y;var viewportCoordinate = map.pointToPixel(lngLat); var viewportCoordStr = " 可視區域坐標:" + viewportCoordinate.x + ", " + viewportCoordinate.y;var overlayCoordinate = map.pointToOverlayPixel(lngLat); var overlayCoordStr = " 覆蓋物坐標:" + overlayCoordinate.x + ", " + overlayCoordinate.y;info.setContent(lngLatStr + worldCoordStr + pixelCoordStr + tileCoordStr + viewportCoordStr + overlayCoordStr); map.openInfoWindow(info, lngLat); }); </</span>script> </</span>body> </</span>html>
效果如圖:
百度地圖API詳解之地圖坐標系統(轉)
原文地址:http://www.cnblogs.com/jz1108/archive/2011/07/02/2095376.html
========
關于百度地圖API的地圖坐標轉換問題
http://malagis.com/baidu-maps-api-map-coordinate-conversion.html我在之前的文章利用html5獲取經緯度并且在百度地圖中顯示位置中使用了百度地圖的API來顯示html5獲
取的地理位置,在文中我說過這樣的話,我說百度地圖的準確度不怎么精確,偏差很大。這里我要更正
下:
國際經緯度坐標標準為WGS-84,國內必須至少使用國測局制定的GCJ-02,對地理位置進行首次加密。百度
坐標在此基礎上,進行了BD-09二次加密措施,更加保護了個人隱私。百度對外接口的坐標系并不是GPS采
集的真實經緯度,需要通過坐標轉換接口進行轉換。
由此可以看出小編之前冤枉了百度地圖,所以如果對您有誤導還請見諒。所以寫了篇關于百度地圖API坐
標轉換的文章,并且對之前的模型做了修正。
實現代碼:
//在百度 map中顯示地址
? ? var map = new BMap.Map("map_canvas");
? ? var point = new BMap.Point(longitudeP , latitudeP); ?// 創建點坐標 ?
? ? map.centerAndZoom(point, 15);// 初始化地圖,設置中心點坐標和地圖級別 ?
? ? var marker = new BMap.Marker(point); ? ?
? ? map.addOverlay(marker);?
? ? BMap.Convertor.translate(point,0,translateCallback); ? ? //真實經緯度轉成百度坐標
回調函數代碼:
//坐標轉換完之后的回調函數
function translateCallback(point1){
? ? var marker1 = new BMap.Marker(point1);
? ? map.addOverlay(marker1);
? ? var label = new BMap.Label("轉換后的百度坐標",{offset:new BMap.Size(20,-10)});
? ? marker1.setLabel(label); //添加百度label
? ? map.setCenter(point1);
}
這是新的效果圖:
undefined
可以看出轉換出的效果還是相當精確的,并且從我這里的demo來看要比谷歌地圖精確的多!所以如果也有
像我一樣的用戶發現調用baidu map坐標有偏差的話,很有可能就是沒有進行坐標轉換。
========
總結
以上是生活随笔為你收集整理的百度地图坐标系相关学习总结的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: SQL注入种类
- 下一篇: .net加密解密学习总结