谷歌离线地图 教程

地图投影

编辑时间:2017-03-06

投影

地球是一个三维球体(近似说法),而地图则是一个二维平面。您在 Google Maps API 中看到的地图与其他的

地球平面地图一样,都是地球在平面上的投影。简单来说,投影可定义为纬度/经度值在投影地图的坐标上的映

射。

Google Maps API 中的投影必须实现 Projection 接口。Projection 实现必须能提供坐标系之间的单向映射

和双向映射。也就是说,您必须定义地球坐标 (LatLng) 和 Projection 的世界坐标系之间双向转换的方法。

Google Maps 使用墨卡托投影法来根据地理数据创建地图,并将地图上的事件转换为地理坐标。您可以通过

 Map(或任何标准的基本 MapType)上调用 getProjection() 以获取该投影。对于大部分用途来说,该标

 Projection 已经足够,不过您也可以定义和使用您自己的自定义投影。


实现投影

在实现自定义投影时,您需要定义以下内容:

  • 用于实现纬度和经度坐标与笛卡尔平面之间双向映射的公式。(Projection 接口仅支持向直线坐标的转换)。


  • 基本图块大小。所有图块必须为矩形。


  • 缩放级别为 0 且使用基本图块集的地图的“世界大小”。请注意:对于缩放级别为 0 且仅由一个图块构

    成的地图,其世界大小和基本图块大小是相同的。

投影中的坐标转换

每个投影都提供了两种方法,让您可以在地理坐标和世界坐标这两个坐标系之间进行转换:

  • Projection.fromLatLngToPoint() 方法将 LatLng 值转换为世界坐标。此方法用于在地图上定位叠层(同


  • 时定位地图本身)。


  • Projection.fromPointToLatLng() 方法将世界坐标转换为 LatLng 值。此方法用于将地图上发生的事(如



    点击)转换为地理坐标。


Google Maps 假设投影是直线的。


    通常,您可以在两种情况下使用投影:创建世界地图或创建局部区域地图。在前一种情况下,您应确保

投影在所有经度上都为直线且与经度垂直。某些投影(尤其是圆锥投影)可能为“局部垂直”(即指向北方),

例如,当该地图定位相对于某些参考经度较远时就会偏离正北。您可以在局部区域使用此类投影,但请注意,该

投影肯定是不精确的,且越偏离参考经度,转换误差就会越明显。

投影中的地图图块选择

    投影不仅可用于确定位置或叠层的位置,还可用于定位地图图块本身。Maps API 使用 MapType 接口

来呈现基本地图,该接口必须同时声明 projection 属性(用于识别地图的投影)和 getTile() 方法(用于

根据图块坐标值检索地图图块)。图块坐标以您的基本图块大小(必须为矩形)和地图的“世界大小”(缩放级

别为 0 时的地图世界的像素大小)为基础。(对于缩放级别为 0 且仅由一个图块构成的地图,其图块大小和世

界大小是相等的)。

您可以在 MapType  tileSize 属性内定义基本图块大小。在投影的 fromLatLngToPoint() 

fromPointToLatLng() 方法中隐式定义世界大小。

由于需要根据这些传递的值选择图像,因此,为图像命名可方便系统基于给定的传递值以编程方式选择图像,如

map_zoom_tileX_tileY.png

常见投影 墨卡托  经纬直投,由于谷歌地图API本身就是墨卡托投影,所以此处给出加载 经纬直投 方式

的加载瓦片算法(加载天地图的经纬直投瓦片)


function BigeMap() {

}
BigeMap.prototype.tileSize = new google.maps.Size(256, 256);
BigeMap.prototype.maxZoom = 19;
BigeMap.prototype.minZoom = 1;
BigeMap.prototype.name = "本地地图";
BigeMap.prototype.getTile = function (coord, zoom, ownerDocument) {
   
var img = ownerDocument.createElement("img"),url='',server = Math.floor(Math.random() * 8);
   
img.style.width = 256 + "px";
   
img.style.height = 256 + "px";
   
url='http://t' + server + '.tianditu.cn/cva_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix=' + zoom + '&TileRow=' + coord.y + '&TileCol=' +coord.x + '&style=default&format=tiles';
   
img.src=url;
   
var bg='http://t' + server + '.tianditu.cn/vec_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix=' + zoom + '&TileRow=' + coord.y + '&TileCol=' + coord.x + '&style=default&format=tiles';
   
img.style.backgroundImage='url('+bg+')';
   
return img;
};

BigeMap.prototype.projection ={
   
fromLatLngToPoint: function(latLng) {
     
return new google.maps.Point(
          256
* (0.5 + latLng.lng() / 360),
          128
*(90 - latLng.lat()) / 180
          );
   
},
   
fromPointToLatLng: function(point, noWrap) {
     
return new google.maps.LatLng(
        90
- point.y / 128  * 180 ,
       
-180 + point.x / 256 * 360,
        noWrap);
   
}
}
;