WebGIS学习(六)WebGIS中地图瓦片在Canvas上的拼接显示原理
来源:互联网 发布:windows可以用keynote 编辑:程序博客网 时间:2024/04/30 02:16
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上的拼接显示原理(六)
- WebGIS学习(三)WebGIS前端地图显示之根据地理范围换算出瓦片行列号的原理(核心)
- WebGIS学习(四)WebGIS中通过行列号来换算出多种瓦片的URL 之离线地图
- WebGIS前端瓦片地图显示原理及实现
- WebGIS前端地图显示之根据地理范围换算出瓦片行列号的原理(核心)
- WebGIS学习(五)-WebGIS中通过行列号来换算出多种瓦片的URL 之在线地图
- 从底层谈WebGIS 原理设计与实现(三):WebGIS前端地图显示之根据地理范围换算出瓦片行列号的原理(核心)
- webGIS学习(二)探究本质,WebGIS前端地图显示之地图比例尺换算原理 发布于 3 年前 作者 lzxue 7473 次浏览 来自 技术 1.没有豆浆机怎么办? 喝豆浆是我们早晨中基本
- WebGIS学习(七)WebGIS中栅格、矢量图层设计之栅格、矢量图层的本质
- WebGIS学习(八)WebGIS中栅格图层的设计
- 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式]
- WebGIS小结之六(查询地图图层)
- WebGIS在行业中应用的演变
- Leaflet的插件在WebGIS中作用
- 带你剖析WebGis的世界奥秘----瓦片式加载地图
- WebGIS 学习(-)
- WebGIS小结之五(控制地图显示)
- github+hexo搭建免费博客
- [模板]
- 欢迎使用CSDN-markdown编辑器
- MovieLens 思路
- 评分卡模型开发-用户数据异常值处理
- WebGIS学习(六)WebGIS中地图瓦片在Canvas上的拼接显示原理
- windows安装mysql教程2017最新
- jquery学习二
- 350. Intersection of Two Arrays II
- 高通推出支持蓝牙MESH网络的SoC
- sklearn文档 — 1.6. 最近邻
- 如何查找论文是否被SCI,EI检索
- 【LeetCode】11. Container With Most Water
- extract uri key and value