从底层谈WebGIS 原理设计与实现(六):WebGIS中地图瓦片在Canvas上的拼接显示原理

作者:naaoveGI…    文章来源:naaoveGIS    点击数:1145    更新时间:2014-9-14
摘要:在之前的五个章节中,我们在第一章节里介绍了WebGIS的基本框架和技术,第二章节里介绍了什么是瓦片行列号以及计算它的原因,第三章节里介绍了如何通过地理范围计算出这个范围内瓦片的行列号,第四和第五章节里介绍了在得到瓦片行列号后如何获得离线和在线地图的URL,这个章节里,我们将介绍在通过URL得到瓦片后,如何将其显示在浏览器相对应的地方,拼接出整块地图。

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中核心类的设计。希望大家持续关注。

转自:http://www.cnblogs.com/naaoveGIS

从底层谈WebGIS 原理设计与实现(六):WebGIS中地图瓦片在Canvas上的拼接显示原理的更多相关文章

  1. (六)WebGIS中地图瓦片在Canvas上的拼接显示原理

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在之前的五个章节中,我们在第一章节里介绍了WebGIS的基本 ...

  2. silverlight漂亮的文件上传进度显示原理及示例

    silverlight漂亮的文件上传进度显示原理及示例 作者:chenxumi 出处:博客园  2009/11/27 13:37:11 阅读 1219  次 概述:在网站根目录web.config里配 ...

  3. 从底层谈,WebGIS 原理、设计、实现

    留待备用! http://www.cnblogs.com/naaoveGIS/category/600559.html 介绍与WebGIS相关的各种原理知识,以及基于原理知识上的程序设计和实现. (一 ...

  4. 从底层谈WebGIS 原理设计与实现(三):WebGIS前端地图显示之根据地理范围换算出瓦片行列号的原理(转载)

    从底层谈WebGIS 原理设计与实现(三):WebGIS前端地图显示之根据地理范围换算出瓦片行列号的原理 1.前言   在上一节中我们知道了屏幕上一像素等于实际中多少单位长度(米或经纬度)的换算方法, ...

  5. 从底层谈WebGIS 原理设计与实现(五):WebGIS中通过行列号来换算出多种瓦片的URL 之在线地图

    从底层谈WebGIS 原理设计与实现(五):WebGIS中通过行列号来换算出多种瓦片的URL 之在线地图 作者:naaoveGI…    文章来源:naaoveGIS    点击数:2063    更 ...

  6. 从底层谈WebGIS 原理设计与实现(四):WebGIS中通过行列号来换算出多种瓦片的URL 之离线地图

    从底层谈WebGIS 原理设计与实现(四):WebGIS中通过行列号来换算出多种瓦片的URL 之离线地图 作者:naaoveGI…    文章来源:naaoveGIS    点击数:1759    更 ...

  7. 从底层谈WebGIS 原理设计与实现(二):探究本质,WebGIS前端地图显示之地图比例尺换算原理

    从底层谈WebGIS 原理设计与实现(二):探究本质,WebGIS前端地图显示之地图比例尺换算原理 作者:naaoveGI…    文章来源:http://www.cnblogs.com/naaove ...

  8. 从底层谈WebGIS 原理设计与实现(一):开篇

    从底层谈WebGIS 原理设计与实现(一):开篇 作者:naaoveGI…    文章来源:http://www.cnblogs.com/naaoveGIS/    点击数:4773    更新时间: ...

  9. 浅谈PHP代码设计结构

    浅谈PHP代码设计结构 您的评价:       还行  收藏该经验       coding多年,各种代码日夜相伴,如何跟代码友好的相处,不光成为职业生涯的一种回应,也是编写者功力的直接显露. 如何看 ...

随机推荐

  1. Linux下编译安装nginx并且监控

    一.安装Nginx 使用源码编译安装,包括具体的编译参数信息. 正式开始前,编译环境gcc g++ 开发库之类的需要提前装好. 安装make: yum -y install gcc automake ...

  2. tomcat源码阅读之单点登录

    一.SSO概念: 单点登录,Single Sign-On,简写为 SSO,是一个用户认证的过程,允许用户一次性进行认证后,就可访问系统中不同的应用:而无需要访问每个应用时,都重新输入用户和密码. 实现 ...

  3. 如何生成SPFILE文件

    1.spfile是Oracle9i之后引入的,目的是提高系统安全性.在Oracle8i下初始化参数文件为文本文件,可以使用文本编辑器进行编辑,当需要修改初始化参数时,需要在init.ora文件中修改, ...

  4. centos7 安装Zabbix3.0

    1 安装Mariadb数据库(代替MySQL)yum -y install mariadb*systemctl start mariadbsystemctl enable mariadb #自启动 2 ...

  5. scala的hello world出现的问题

    build出现: Error:scalac: Error: org.jetbrains.jps.incremental.scala.remote.ServerExceptionError compil ...

  6. openwrt设置默认登陆密码

    1.修改dropbear配置文件 找到package/network/services/dropbear/files/dropbear.config 修改如下: config dropbear opt ...

  7. 【python】实例-创建文件并通过键盘输入字符

    import os lnend=os.linesep ##windows行结束符号是“\r\n” FileName=raw_input("please input filename:&quo ...

  8. Python的数据库连接池DBUtils

    DBUtils是Python的一个用于实现数据库连接池的模块. 此连接池有两种连接模式: 模式一:为每个线程创建一个连接,线程即使调用了close方法,也不会关闭,只是把连接重新放到连接池,供自己线程 ...

  9. 全选,反选,获取值ajax提交

    //必须先加载jquery //加载 弹出框插件 artdialog http://www.planeart.cn/demo/artDialog/ /****全选反选*开始**/ $(document ...

  10. maven学习(1)-简介与安装

    一.Maven 简介 Maven 官网:http://maven.apache.org/ 二.Maven 安装与配置 Maven 下载:http://maven.apache.org/download ...