WebGIS前端瓦片地图显示原理及实现
来源:互联网 发布:阿里云飞天八部 编辑:程序博客网 时间:2024/05/17 09:27
目前,有很多WebGIS开发包,ArcGIS API for JS、OpenLayers、LeafLetjs等为我们从事WebGIS开发的人封装了很多强大的功能。我们很方便的使用这些库的时候,也让我们忽略了很多原理性的东西。
比如说,我之前一直在被一个问题困扰,就是如何将一个点正确的显示在浏览器屏幕的正确的位置,即经纬度坐标和屏幕坐标的转换问题。直到我看到一位大牛的博客(点击学习),里面对WebGIS的原理进行了深入的讲解。看了他的文章后一直觉得,我写这篇文章是多余的。但是大神的文章里面并没有详细讲解原理的代码实现。个人觉得还是很有必要通过实现相应功能的方式了解其原理,而且实现时还是遇到了不少的问题,所以还是写了这篇文章。
在线地图及参数
以Arcgis online上的瓦片地图为例,服务中有几个比较关键的使用到的参数。
- Height、Weight:每个瓦片的宽度和高度
- Resolution:每一个缩放级别下1像素代表的地图单位(投影坐标)
- Initial Extent:瓦片地图的范围
获取地图瓦片
通过观察arcgis地图的瓦片组织方式,
http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunityOnlyENG/MapServer/tile/缩放等级/行号/列号
通过python程序将一定缩放等级的瓦片保存到本地 我只抓取了0-5级别的瓦片,并按照arcgis瓦片的保存方式存储。
展示页面
展会页面只含有一个canvas元素作为地图容器。
配置信息
在config.js里面保存了相关的配置信息
功能实现 init.js
上面只是把代码列了出来,这一部分才是我要讲的终点(才到重点☺)
① 确定战士的地图中心点坐标,以及缩放级别
② 计算当前窗口显示的地图范围
我们可以根据窗口的中心点坐标,窗口大小,以及当前缩放级别的Resolution可以很容易通过计算得到,当前窗口你可以看到的地图范围。
//当前窗口显示的范围minX=centerGeoPoint.x-(MapConfig.Resolution[level]*MapConfig.ViewWidth/2);maxX=centerGeoPoint.x+(MapConfig.Resolution[level]*MapConfig.ViewWidth/2);minY=centerGeoPoint.y-(MapConfig.Resolution[level]*MapConfig.ViewHeight/2);maxY=centerGeoPoint.y+(MapConfig.Resolution[level]*MapConfig.ViewHeight/2);
此处要注意一下地图的行列号的起点在左上角,但是地图左上角的投影坐标x是最小的,y是最大的。也就会说行列号的起点在左上角,投影坐标的起点在左下角。
③ 计算左上角起始行列号
//左上角开始的行列号leftTopTitleRow = Math.floor(Math.abs(maxY-MapConfig.FullExtent.ymax)/MapConfig.Resolution[level]/MapConfig.TitlePix);leftTopTitleCol = Math.floor(Math.abs(minX-MapConfig.FullExtent.xmin)/MapConfig.Resolution[level]/MapConfig.TitlePix);
④ 计算实际地理范围
//实际地理范围realMinX = MapConfig.FullExtent.xmin+leftTopTitleCol*MapConfig.TitlePix*MapConfig.Resolution[level];realMaxY = MapConfig.FullExtent.ymax-leftTopTitleRow*MapConfig.TitlePix*MapConfig.Resolution[level];
我们都知道,我们获取到的瓦片的范围一定是大于显示窗口的范围。否则在窗口内显示的地图是不完整的
⑤ 计算左上角偏移像素
在将地图瓦片拼接到窗口内是需要考虑到实际地理范围与显示地理范围的偏移
//计算左上角偏移像素offSetX = (realMinX-minX)/MapConfig.Resolution[level];offSetY = (maxY-realMaxY)/MapConfig.Resolution[level];
⑥ 计算瓦片个数
获得瓦片个数后就可以根据瓦片个数以及偏移后的起始瓦片位置,将每一个瓦片拼接到canvas相应的位置上
//计算瓦片个数xClipNum = Math.ceil((MapConfig.ViewHeight+Math.abs(offSetY))/MapConfig.TitlePix);yClipNum = Math.ceil((MapConfig.ViewWidth+Math.abs(offSetX))/MapConfig.TitlePix);
⑦ 前端绘制瓦片
var mapcv = document.getElementById("mapcv"); var myctx = mapcv.getContext("2d"); for(var i=0;i<xClipNum;i++){ for(var j=0;j<yClipNum;j++){ var beauty = new Image(); beauty.src = MapConfig.RootDir+level+"/"+(leftTopTitleRow+i)+"/"+(leftTopTitleCol+j)+".jpg"; var TitleImg={ img:null, x:0, y:0 }; TitleImg.img=beauty; TitleImg.x=offSetX+(j*MapConfig.TitlePix); TitleImg.y=offSetY+(i*MapConfig.TitlePix); TitlesArry.push(TitleImg); myctx.drawImage(TitleImg.img, TitleImg.x, TitleImg.y); } }
全部代码
里面涉及到了一个经纬度换投影坐标的函数,详情参考本人的另一篇关于百度坐标、WGS-84、火星坐标,以及投影坐标与经纬度的转换的文章(点击跳转)
- WebGIS前端瓦片地图显示原理及实现
- 从底层谈WebGIS 原理设计与实现(三):WebGIS前端地图显示之根据地理范围换算出瓦片行列号的原理(核心)
- WebGIS前端地图显示之根据地理范围换算出瓦片行列号的原理(核心)
- WebGIS学习(三)WebGIS前端地图显示之根据地理范围换算出瓦片行列号的原理(核心)
- WebGIS学习(六)WebGIS中地图瓦片在Canvas上的拼接显示原理
- WebGIS中地图瓦片在Canvas上的拼接显示原理(六)
- 探究本质,WebGIS前端地图显示之地图比例尺换算原理
- 瓦片地图原理
- 国内主要地图瓦片坐标系定义及计算原理
- 国内主要地图瓦片坐标系定义及计算原理
- webGIS学习(二)探究本质,WebGIS前端地图显示之地图比例尺换算原理 发布于 3 年前 作者 lzxue 7473 次浏览 来自 技术 1.没有豆浆机怎么办? 喝豆浆是我们早晨中基本
- 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式]
- 采用MapObjects 显示瓦片地图
- Webgis 打印实现原理
- Web(瓦片)地图的工作原理
- Web(瓦片)地图的工作原理
- WebGIS设计与实现原理
- WebGIS学习(四)WebGIS中通过行列号来换算出多种瓦片的URL 之离线地图
- Spring在代码中获取国际化信息
- [ZooKeeper.net] 1 模仿dubbo实现一个简要的http服务的注册 基于webapi
- RxSwift 入坑好多天
- (@WhiteTaken)UGUI中遇到的一些细碎的知识点
- Alamofire源码解读系列(五)之结果封装(Result)
- WebGIS前端瓦片地图显示原理及实现
- Spring框架(6)---AspectJ实现AOP
- 算法笔记_066:Kruskal算法详解(Java)
- Android学习总结(十二)———— BaseAdapter优化
- 《你不知道的JavaScript》整理(五)——值与原生函数
- Visual Studio 2017正式版发布全纪录
- ps快速裁切
- 《Django By Example》第八章 中文 翻译 (个人学习,渣翻)
- Android UI 优化