从底层谈WebGIS 原理设计与实现(六):WebGIS中地图瓦片在Canvas上的拼接显示原理
从底层谈WebGIS 原理设计与实现(六):WebGIS中地图瓦片在Canvas上的拼接显示原理
1.前言
在之前的五个章节中,我们在第一章节里介绍了WebGIS的基本框架和技术,第二章节里介绍了什么是瓦片行列号以及计算它的原因,第三章节里介绍了如何通过地理范围计算出这个范围内瓦片的行列号,第四和第五章节里介绍了在得到瓦片行列号后如何获得离线和在线地图的URL,这个章节里,我们将介绍在通过URL得到瓦片后,如何将其显示在浏览器相对应的地方,拼接出整块地图。
2.左上角瓦片起始点屏幕坐标的计算
在第三章节中,我介绍了对于左上角瓦片起始点屏幕坐标的换算原理和方法,这里我再次给出这个公式:
offSetX = ((realMinX- minX )/resolution);
offSetY = ((maxY - realMaxY )/resolution);
英文代表如下意思:
realMinX、realMaxY:请求的左上角瓦片对应的真实地理坐标(geoX,geoY)。
minX、maxY:屏幕可视范围的左上角对应的真实地理坐标(geoScreenX,geoScreenY)。
resolution:当前地图级别里屏幕一像素代表的实际地理单位长度。
因为可视范围里,左上角屏幕坐标为(0,0)。
所以offSetX和offSetY便为左上角瓦片的起始点屏幕坐标(offSetX,offSetY)。
这里如果大家对以上参数的换算有不了解之处,请查看此系列中的第三章节——通过地理范围换算出行列号。
3.任意瓦片屏幕坐标的计算
同样,我首先给出相关的公式:
coord.x = offSetX + ( clipX - fixedTileLeftTopNumX)* tileSize;
coord.y = offSetY + ( clipY - fixedTileLeftTopNumY)* tileSize;
英文代表如下意思:
offSetX、offSetY:最左上角瓦片的屏幕坐标
clipX、clipY:目前瓦片的行列号
fixedTileLeftTopNumY、fixedTileLeftTopNumY:最左上角瓦片的行列号
tileSize:瓦片大小(一张瓦片的像素)
coord:目前瓦片的屏幕坐标
这里的fixedTileLeftTopNumY和fixedTileLeftTopNumY,在第三章里我同样介绍了如何获得。
4.瓦片拼接流程
通过流程图可以看到,瓦片的拼接需要通过遍历X轴和Y轴。依次获取瓦片屏幕坐标后拼接。这里涉及到X轴和Y轴时的遍历个数,其实就是请求到的所有瓦片,在X轴上的个数以及Y轴上的个数。同样,在第三章里我对这个个数的换算有比较详细的讲解,这里不再累述。
5.前端地图显示整体流程
得到的地图效果图如下:
6.总结
至此,WebGIS中前端地图显示系列就告一段落了。我相信大家在这个系列里,或多或少都对WebGIS有了新的认识。我们知道图像分为栅格图像和矢量图像,这里我仅仅只是介绍了栅格图像在WebGIS中的加载,那么矢量图像怎么加载呢?同样,有了这些原理知识,我们该如何设计栅格图像类,以及以后的矢量图像类等等呢?在下一个系列里,我们将开始探索WebGIS中核心类的设计。希望大家持续关注。
从底层谈WebGIS 原理设计与实现(六):WebGIS中地图瓦片在Canvas上的拼接显示原理的更多相关文章
- (六)WebGIS中地图瓦片在Canvas上的拼接显示原理
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在之前的五个章节中,我们在第一章节里介绍了WebGIS的基本 ...
- silverlight漂亮的文件上传进度显示原理及示例
silverlight漂亮的文件上传进度显示原理及示例 作者:chenxumi 出处:博客园 2009/11/27 13:37:11 阅读 1219 次 概述:在网站根目录web.config里配 ...
- 从底层谈,WebGIS 原理、设计、实现
留待备用! http://www.cnblogs.com/naaoveGIS/category/600559.html 介绍与WebGIS相关的各种原理知识,以及基于原理知识上的程序设计和实现. (一 ...
- 从底层谈WebGIS 原理设计与实现(三):WebGIS前端地图显示之根据地理范围换算出瓦片行列号的原理(转载)
从底层谈WebGIS 原理设计与实现(三):WebGIS前端地图显示之根据地理范围换算出瓦片行列号的原理 1.前言 在上一节中我们知道了屏幕上一像素等于实际中多少单位长度(米或经纬度)的换算方法, ...
- 从底层谈WebGIS 原理设计与实现(五):WebGIS中通过行列号来换算出多种瓦片的URL 之在线地图
从底层谈WebGIS 原理设计与实现(五):WebGIS中通过行列号来换算出多种瓦片的URL 之在线地图 作者:naaoveGI… 文章来源:naaoveGIS 点击数:2063 更 ...
- 从底层谈WebGIS 原理设计与实现(四):WebGIS中通过行列号来换算出多种瓦片的URL 之离线地图
从底层谈WebGIS 原理设计与实现(四):WebGIS中通过行列号来换算出多种瓦片的URL 之离线地图 作者:naaoveGI… 文章来源:naaoveGIS 点击数:1759 更 ...
- 从底层谈WebGIS 原理设计与实现(二):探究本质,WebGIS前端地图显示之地图比例尺换算原理
从底层谈WebGIS 原理设计与实现(二):探究本质,WebGIS前端地图显示之地图比例尺换算原理 作者:naaoveGI… 文章来源:http://www.cnblogs.com/naaove ...
- 从底层谈WebGIS 原理设计与实现(一):开篇
从底层谈WebGIS 原理设计与实现(一):开篇 作者:naaoveGI… 文章来源:http://www.cnblogs.com/naaoveGIS/ 点击数:4773 更新时间: ...
- 浅谈PHP代码设计结构
浅谈PHP代码设计结构 您的评价: 还行 收藏该经验 coding多年,各种代码日夜相伴,如何跟代码友好的相处,不光成为职业生涯的一种回应,也是编写者功力的直接显露. 如何看 ...
随机推荐
- SQL 存储过程入门(五)
好久没来博客园留下点东西,忙到找工作,最近把工作落实了. 最近公司的业务都是存储过程开发,发现去维护起来相当困难. 由于是维护项目,产品很久前都发布了,然而有一些修改,让我们去修改现在的逻辑,去看懂人 ...
- WebForm使用FileUpload控件上传压缩二进制图片
fuImage 是FileUpload页面控件 ImageHelper.CompressionImage(fuImage.FileBytes, quality); /// <summary> ...
- Arrays、ArrayUtils 区别
Arrays java.util 包提供的静态类:java.util.Arrays 此静态类专门用来操作array ,提供搜索.排序.复制等静态方法. ArrayUtils apache 提供的类:o ...
- java Scanner中的hasNext()方法
hasNext()方法判断输入(文件.字符串.键盘等输入流)是否还有下一个输入项,若有,返回true,反之false. Scanner sc = new Scanner(new File(" ...
- Vue 介绍
1. 条件 效果图. 如果seen为false,文字将消失 2. 循环 script里定义数据 效果 3. 事件处理 效果如下图, hello world被逆转了
- Tomcat 自动化部署
Tomcat 自动化部署脚本 使用方法: ./autodeploy.sh test 其中autodeploy.sh 为脚本的文件名, test为war的文件名. #!/bin/sh now=`date ...
- h5 轻应用
http://www.html5tricks.com/ http://open.weibo.com/wiki/%E8%BD%BB%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91 ...
- 如何检测NFC芯片型号?NFC手机即可!
拿到了NFC标签之后,因为很多项目中的需求,用户需要对自已的NFC芯片进行选型,也就需要判断NFC芯片的类型?芯片是原装进口还是国产兼容的?芯片内存有多少?芯片存储内部结构如何......,而且用户还 ...
- 禁止Grid、TreeGrid列排序和列菜单
Ext的Grid和Treegrid默认提供列菜单的功能,在列菜单中可以进行排序以及控制列显示状态. 在实际项目中,往往有些列是不需要用户看到的,因此就必须屏蔽列菜单的功能. 1.屏蔽Grid,包括Ed ...
- bzoj1293 生日礼物
Description 小西有一条很长的彩带,彩带上挂着各式各样的彩珠.已知彩珠有N个,分为K种.简单的说,可以将彩带考虑为x轴,每一个彩珠有一个对应的坐标(即位置).某些坐标上可以没有彩珠,但多个彩 ...