文档章节

百度地图API详解之地图坐标系统

postdep
 postdep
发布于 2016/03/21 14:43
字数 1821
阅读 548
收藏 9

我们都知道地球是圆的,电脑显示器是平的,要想让位于球面的形状显示在平面的显示器上就必然需要一个转换过程,这个过程就叫做投影(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.40439.915));
alert(point.x 
+""+ point.y);

结果如下:

这个就是平面坐标。你可以这样理解它的含义:第18级下,天安门距离坐标原点的位置差为:12958175, 4825923.77,单位为像素。

 

像素坐标

在第18级下,我们直接将平面坐标向下取整就得到了像素坐标,而在其他级别下可以通过如下公式进行换算(这里取整为向下取整):

像素坐标 = |平面坐标 × 2 zoom -18|

比如经过计算,在第4级天安门位置的像素坐标是:790, 294


不同级别下,同一个地理位置的像素坐标是不一样的,它与当前地图的级别相关。

 

图块坐标

百度地图API在展示地图时是将整个地图图片切割成若干图块来显示的,当地图初始化或是地图级别、中心点位置发生变化时,地图API会根据当前像素坐标计算出视野内需要的图块坐标(也叫图块编号),从而加载对应的图块用以显示地图。

百度地图的图块坐标原点与平面坐标一致,从原点向右上方开始编号为0, 0:

如何知道某个位置的图块坐标呢?通过如下公式计算即可(这里为向下取整):

图块坐标 =|像素坐标 ÷ 256|

256实际上是每个图块的宽度和高度,我们用像素坐标除以这个数就知道图块坐标了。还以天安门为例,在第4级下天安门所在的图块编号为:3, 1,而在第18级下,图块编号为:50617, 18851

 

可视区域坐标

地图都是显示在确定大小的矩形框中的,这个矩形框通常是开发者在初始化地图传入的某个容器元素。这个矩形框也有自己的坐标系,在百度地图API中称之为可视区域坐标系,它的原点位于矩形的左上角。

通过Map类的pointToPixel和pixelToPoint方法可以相互转换经纬度坐标与可视区域坐标。

 

覆盖物坐标

覆盖物在实现上就是若干DOM元素,这些元素会被放在若干覆盖物容器内(具体请参考地图API开发指南),那么覆盖物的坐标实际上就是相对于这些覆盖物容器的坐标。在地图初始化完成后,覆盖物容器的左上角与地图可视区域左上角位置相同,一旦地图被移动、缩放,覆盖物容器位置就会发生变化。在自定义覆盖物的时候API提供经纬度信息,而开发者需要自行将经纬度转换为覆盖物的像素坐标,从而覆盖物才能显示在正确的位置上。这个转换过程可以通过Map的pointToOverlayPixel和overlayPixelToPoint两个方法来实现。 

讲这么多都快晕了吧,我们最后通过一个完整的代码示例来回顾上面所提到的坐标系概念:

 

复制代码
<! DOCTYPE html >
< html >
< head >
< meta  charset ="utf-8" />
< title > 地图坐标概念 </ title >
< script  src ="http://api.map.baidu.com/api?v=1.2" ></ script >
</ head >
< body >
< div  id ="map_container"  style ="width:500px;height:320px;" ></ div >
< 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  = " <br />平面坐标: " +  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  = " <br />像素坐标: " +  pixelCoordinate.x  + " " +  pixelCoordinate.y;

var  tileCoordinate  = new  BMap.Pixel(Math.floor(pixelCoordinate.x  / 256 ),
Math.floor(pixelCoordinate.y 
/ 256 ));
var  tileCoordStr  = " <br />图块坐标: " +  tileCoordinate.x  + " " +  tileCoordinate.y;

var  viewportCoordinate  =  map.pointToPixel(lngLat);
var  viewportCoordStr  = " <br />可视区域坐标: " +  viewportCoordinate.x  + " " +  viewportCoordinate.y;

var  overlayCoordinate  =  map.pointToOverlayPixel(lngLat);
var  overlayCoordStr  = " <br />覆盖物坐标: " +  overlayCoordinate.x  + " " +  overlayCoordinate.y;

info.setContent(lngLatStr 
+  worldCoordStr  +  pixelCoordStr  +  tileCoordStr  +  
viewportCoordStr 
+  overlayCoordStr);
map.openInfoWindow(info, lngLat);
});
</ script >
</ body >
</ html >
复制代码

效果如图:

本文转载自:http://www.cnblogs.com/jz1108/archive/2011/07/02/2095376.html

共有 人打赏支持
postdep

postdep

粉丝 80
博文 254
码字总数 261672
作品 0
武汉
高级程序员
关于lbs(各地图系统)的一些基本信息

第一部分 各种坐标系详解 1、大地坐标系统 WGS-84 用来表述地球上点的位置的一种地区坐标系统。它采用一个十分近似于地球自然形状的参考椭球作为描述和推算地面点位置和相互关系的基准面。一...

lele1953
2016/07/04
35
0
【高德地图API】从零开始学高德JS API(六)坐标转换

摘要:如何从GPS转到谷歌?如何从百度转到高德?这些都是小case。我们还提供,如何将基站cell_id转换为GPS坐标? ----------------------------------------------------------------------...

酸奶小妹GIS
2014/06/18
0
0
去百度API的百度地图准确叠加和坐标转换的解决方案研究

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/。 1.背景 目前项目上如果要使用百度地图,得加载百度的开发包,然后通过百度提供的接口来...

李晓晖
2015/02/07
0
0
百度地图新手教程6(转载自百度)

地图图层 1.地图图层概念 2.添加和移除图层 3.自定义图层 地图图层概念 地图可以包含一个或多个图层,每个图层在每个级别都是由若干张图块组成的,它们覆盖了地球的整个表面。例如您所看到包...

长平狐
2013/01/06
1K
0
iOS开发中的火星坐标系及各种坐标系转换算法

其原理是这样的:保密局开发了一个系统,能将实际的坐标转换成虚拟的坐标。所有在中国销售的数字地图必须使用这个系统进行坐标转换之后方可上市。这是生产环节,这种电子地图被称为火星地图。...

刀客445
2016/02/23
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

idea新建springCloud项目(5)- 订单服务

1.创建订单api,如下: 2.创建订单实现逻辑 3.新建订单、订单商品表 -- 订单 create table `order_master` ( `order_id` varchar(32) not null, `buyer_name` varchar(32) not null comment......

monroeCode
9分钟前
0
0
游戏开发经验谈(二):对战类全球服游戏的设计与实现

上篇文章《游戏开发经验谈(一):游戏架构里隐藏的五个坑及其应对方案》,我们主要讲解了游戏架构设计当中隐藏的一些坑及其应对方案,错过的小伙伴可以回溯之前的内容。本期内容,将会重点介...

UCloudTech
19分钟前
0
0
Mysql基本语法

一.联合主键 drop table CONTENT_AND_CATALOG;CREATE TABLE `tobebetter`.`CONTENT_AND_CATALOG` ( `ID` VARCHAR(120) NOT NULL , `CONTENT_ID` VARCHAR(120) , `CA......

我是菜鸟我骄傲
20分钟前
0
0
179. centos7 安装mariadb

1. centos7 中安装mariadb 1.1 执行安装 centos7 自带了mariadb yum -y install mariadb mariadb-server 1.2 启动mariadb systemctl start mariadb 1.3 设置开机启动 systemctl enable maria......

Lucky_Me
27分钟前
0
0
【AI实战】动手训练自己的目标检测模型(YOLO篇)

在前面的文章中,已经介绍了基于SSD使用自己的数据训练目标检测模型(见文章:手把手教你训练自己的目标检测模型),本文将基于另一个目标检测模型YOLO,介绍如何使用自己的数据进行训练。 ...

雪饼
33分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部