基本概念:

现在就是要将一张张这类的地图瓦片,在客户端拼接成一幅完整的地图。

瓦片大小为:256×256。

url中关键参数解析:

参数 描述
mt2.google.cn Google瓦片服务服务器,可以尝试mt1.google.cn依然有效。Google提供多台瓦片服务器,减轻服务器负载,提高网络访问效率。
x 瓦片的横向索引,起始位置为最左边,数值为0,向右+1递增。
y 瓦片的纵向索引,起始位置为最上面,数值为0,向下+1递增。
z 地图的级别,以Google为例,最上一级为0,向下依次递增。
  • 地图投影:Web墨卡托——互联网地图通用的地图投影方式,将椭圆形地图投影成平面上的正文形,欲了解详情请baidu之,如无特殊说明本文所指均为Web墨卡托投影下。
  • Bounds(地图范围):[ -20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892],单位为米,20037508.3427892表示地图周长的一半,以地图中心点做为(0,0)坐标。
  • Levels:地图的级别,例如:0……22。
  • Resolutions:分辨率数组,与级别相对应,即一个级别对应一个分辨率,分辨率表示当前级别下单个像素代表的地理长度。
Resolutions[n] = 20037508.3427892 * 2 / 256 / (2^n)
  • Center:地图显示中心点。
  • Level:地图显示级别。
  • viewSize:地图控件窗口的大小。

根据已知地图中心点、显示级别可以将地图显示范围计算出来:

viewBounds = [Center.x - Resolutions[l]*viewSize.width/2, Center.y - Resolutions[l]*viewSize.height/2, Center.x + Resolutions[l].viewSize.width/w, Center.y + Resolutions[l].viewSize.height/h]

地图切图方式:

一幅地图由4^n个256的正方形组成,n为级别

例如:第0级为4^0个,即世界地图由一个256图片表示。

第1级世界地图应由4^1(4)个256图片组成,也就是将世界地图(上一级的单个图片)等分成4块256图片。

往下每一级依此类推……

拼图算法剖析:

 1、计算瓦片url

要想出图就发须知道地图控件可视范围起始点瓦片索引、末尾瓦片索引,中间区域的瓦片索引循环遍历即可得出。

下面看看如果计算出起始点、末尾瓦片url索引:

已知:l(缩放级别)、bounds(地图范围——[ -20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892])、viewBounds(地图控件可视范围)、分辨率(Resolutions[l])、瓦片像素宽高(256)。

未知:startX(视图起始瓦片X方向索引)、startY(视图起始瓦片Y方向索引)、endX(视图未尾瓦片x方向索引)、endY(视图未尾瓦片y方向索引)。

求解:

startX = floor(((viewBounds.leftBottom.x - bounds.leftBottom.x) / Resolutions[l]) / 256);
startY = floor(((viewBounds.leftBottom.y - bounds.leftBottom.y) / Resolutions[l]) / 256);
endX = floor(((viewBounds.rightTop.x - bounds.rightTop.x) / Resolutions[l]) / 256);
endY = floor(((viewBounds.rightTop.y - bounds.rightTop.y) / Resolutions[l]) / 256);

firstTileUrl(起始瓦片Url) = http://**********?x=startX&y=startY&z=l;

endTileUrl(末尾瓦片Url) = http://**********?x=endX&y=startY&z=l;

中间部分的url循环遍历即可得出。

好啦!组成视图所有瓦片的url都已得出。下面就是要解决将这些瓦片放到哪的问题。

 2、计算瓦片放在地图控件上的位置

先分析一下:其实只要将起始位置的瓦片像素位置算出来就可以了,由于瓦片像素大小为256,后面的各瓦片位置也就明了了。

所以这里只探讨一下起始瓦片的像素位置。

已知:startX(视图起始瓦片X方向索引)、startY(视图起始瓦片Y方向索引)、分辨率(Resolutions[l])、瓦片像素宽高(256)、bounds(地图范围——[ -20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892])、viewBounds(地图控件可视范围)。

未知:startTileX(起始瓦片左上角X方向地理坐标)、startTileY(起始瓦片左上角Y方向地理坐标)、distanceX(瓦片左边与地图控件左边相距的像素距离)、distanceY(瓦片上边与地图控件上边相距的像素距离)。

求解:

startTileX = bounds.leftBottom.x + (startX * 256 * Resolutions[l]);
startTileY = bounds.rightTop.y - (startY * 256 * Resolutions[l]);
distanceX = (viewBounds.leftBottom.x - startTileX) / Resolutions[l];
distanceY = (startTileY - viewBounds.rightTop.y) / Resolutions[l]

公式不是最简,以方便理解,相信看官此时已经知道起始瓦片在地图控件中的摆放位置了——设地图控件起始像素位置为(0,0),那么此瓦片的像素的位置就是(-distanceX、-distanceY)。其它瓦片依据256像素宽高的关系依次而出。

到此已经算出了各瓦片的url以及它们应该摆放的位置,准备工作已完成,直接帖图即可完成出图工作。

算法可应用于Google、Baidu、Yahoo、Bing等web墨卡托投影的地图瓦片。

Google瓦片地图算法解析的更多相关文章

  1. Google瓦片地图URL

    http://mt2.google.cn/vt/lyrs=y&scale=2&hl=zh-CN&gl=cn&x=6891&y=3040&z=13 //含 ...

  2. OpenStreetMap/Google/百度/Bing瓦片地图服务(TMS)

    开源与成熟商业的瓦片地图服务(TMS  2  WMTS),都有如下共同的特性,基本成为了标准: (1) 坐标系:WGS84 (2) 投影:墨卡托投影(Marcator,正轴等角圆柱投影) ------ ...

  3. [转]OpenStreetMap/Google/百度/Bing瓦片地图服务(TMS)

    转自:https://blog.csdn.net/youngkingyj/article/details/23365849 开源与成熟商业的瓦片地图服务(TMS  2  WMTS),都有如下共同的特性 ...

  4. Google Map API V3调用arcgis发布的瓦片地图服务

    由于最近项目需要用到CAD制作的地图,但之前一直使用的是用谷歌离线瓦片地图的方式,怎么样把CAD图像地图一样有缩放,移动的功能放到网页显示成了难题, 原先的谷歌地图的代码难道就不能用了?重新写一套代码 ...

  5. Leaflet 调用百度瓦片地图服务

    在使用 leaflet 调用第三方瓦片地图服务的项目,主要谷歌地图.高德地图.百度地图和 OSM 地图,与其他三种地图对比,百度地图的瓦片组织方式是不同的.百度从中心点经纬度(0,0)度开始计算瓦片, ...

  6. 谷歌地图地理解析和反解析geocode.geocoder详解

    地址解析就是将地址(如:贵州省贵阳市)转换为地理坐标(如经度:106.71,纬度:26.57)的过程. 地理反解析和上面的过程相反是将地理坐标(如纬度:26.57,经度:106.71)转换为地址(中国 ...

  7. 地理围栏算法解析(Geo-fencing)

    地理围栏算法解析 http://www.cnblogs.com/LBSer/p/4471742.html 地理围栏(Geo-fencing)是LBS的一种应用,就是用一个虚拟的栅栏围出一个虚拟地理边界 ...

  8. .NET破解之google瓦片下载及拼接

    由于最近一些其他事忙,加之电脑显卡坏了,所以,好长一段时间没有更新博客了,感觉对不注关注我的朋友.从本文开始,博客更新频率将会大大降低,但每周都会更新的. 在上帝之眼论坛看到了新出来了一个google ...

  9. cocos creator主程入门教程(九)—— 瓦片地图

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 这一篇介绍瓦片地图,在开发模拟经营类游戏.SLG类游戏.RPG游戏,都会使用到瓦片地图.瓦片地图地面是通 ...

随机推荐

  1. 使用 system.io.filesysteminfo 来查找文件。

    如何快速搜索你想找到文件呢.大家知道Windows系统自带了搜索,很方便,下面介绍自己编写的也可以达到同样的效果.注意.有些文件的访问需要更高的权限.这里暂且去掉那些文件目录的搜索.不然会出现erro ...

  2. 一次搞懂 Assets Pipeline 转载自http://gogojimmy.net/2012/07/03/understand-assets-pipline/

    Assets Pipeline 是 Rails 3.1 一個重要的功能,一直並沒有很去了解其特性,但因為最近都在寫前端的東西在 assets pipeline 的東西上跌跌撞撞了不少次(尤其在 dep ...

  3. SQL中 and or优先级问题

    资源来源:http://www.linuxidc.com/Linux/2012-03/56267.htm 刚刚在项目中遇到这样一个问题,SQL语句如下: select * from LOAN_BACK ...

  4. tomcat远程debug端口开启

    declare -x CATALINA_OPTS="-server -Xdebug -Xnoagent -Djava.compiler=NONE -Xrunjdwp:transport=dt ...

  5. 【LeetCode题意分析&解答】33. Search in Rotated Sorted Array

    Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...

  6. HTML+CSS笔记 CSS进阶

    文字排版 字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性. 语法: body{font-family:"宋体";} 这里注意不要设置不常用的字体,因为如果 ...

  7. poj 3304 计算几何

    大意: 是否存在一条直线,使所有线段在直线上的投影至少交与一点 思路: 转换为是否存在一条直线与所有的线段相交,做这条直线的垂线,那么垂线即为所求 **/ #include <iostream& ...

  8. ie浏览器css中的行为expression详解

    CSS中的行为——expression (ie only) 最近对CSS中的行为比较感兴趣,虽然是不符合标准的也只有ie才能识别,但是他确实给css的功能扩展了不少.下面是摘自互联网上的文字和例子,因 ...

  9. Struts2学习笔记(二) 使用通配符动态调用方法

    <package name="other" extends="struts-default"> <action name="xxx_ ...

  10. golang语法学习(一):变量,常量以及数据类型

    学习一门新的语言肯定是要从他的主要的语法開始,语法构成了整个程序设计的基础,从语法中我们也能够看到这门语言的一些特性.可是话说回来.语法这东西,不同的语言大同小异,所以这也对语法的记忆造成了一定的难度 ...