[置顶] arcgis api for js入门开发系列十九 用HTML5 canvas绘制地图
2017-03-03 02:52
309 查看
之前一直想使用HTML5技术全新做一套地图API,可是苦于时间和精力,迟迟未有行动。后来下定决心,利用下班和周末做出一个大体框架出来,现在和网友分享一下自己的整体的一个思路和想法。欢迎大家提出宝贵建议,希望把这套API做的更好,有人真正利用起来。DEMO访问地址, 猛击这里。
我们看到的电子地图是多个图层叠加之后的效果,每一个图层都至少对应着一个地图服务。我们这样可以理解服务,我们把简单的参数传给后台,后台会把原始数据返回来,前端或者应用就可以根据自己需要,渲染成图。
这里返回的数据,不仅仅是矢量数据,也包括栅格数据。
矢量数据,包括那些点线面的具体坐标、投影或者坐标系。矢量数据使用场景:数据经常更新,需要知道数据属性或坐标。
栅格数据,提前生成好的图片或者动态生成的图片。栅格数据使用场景:底图,计算量较大的渲染图。
一般来说,一个地图,最下面是一个底图,然后在上面叠加一些矢量数据和栅格数据。底图主要是为了在当前比例尺下显示大概地形要素。底图变动周期比较长,数据量比较大,不适合使用矢量数据加载。现在通用的做法,将地图分割成一个个的小图片,然后等到使用的时候拼接起来。我们可以想象一下,之前的屋顶上面的瓦,是怎么一个形态?是不是一个一个拼接成的,然后形成屋顶的,没有谁家的瓦,是一个整体吧。这样做的好处主要有这么几个:
1:可以动态拼接某一范围的底图。
2:可以局部更新瓦片。
坐标系分为投影坐标系和地理坐标系,不多说这个了,因为关于这方面的知识实在是太多了,我对这个不是太擅长,只是说一下常见的就可以了。
地理坐标系,是以经纬度为地图的存储单位的。
投影坐标系参数当中都会包括一个地理坐标系,实质上是一个平面坐标系统,单位通常是米。
WGS84,是为GPS全球定位系统使用而站立的坐标系统,属于地理坐标系。GPS采集到的数据,都是基于WGS84。中国现在使用较多的是西安80或者北京2000,这就需要一个转换过程,不过具体参数是保密,现在转换的工具或者公式,转换都会存在误差的,也就会经常看到一些数据叠加发生了偏移错位(当然不仅仅是因为这一个原因,国内的数据发布到网络上面,都要求做偏移处理的)。WGS84东西方向范围[-180,180],南北方向范围[-90,90]。由于坐标系和投影实在是太多而且名字加参数太长,不容易记,所以就给每一种坐标系定义了一个或多个序列号,WGS84他的wkid是4326。
Web Mercator属于投影坐标系,这是一个正轴等角投影,投影出来之后呈现给我们的是一个正方形。我们都知道地球是一个椭球形,这样肯定会有误差,在大比例尺下面,就可以忽略这个误差了。不过话说回来,无论使用哪一种坐标系都会有误差的。等角投影,保证了对象形状不变,而且也保证了方向和位置的相对性性。这就是在众多的投影当中,我们为什么会选中它的原因(当然不是我选择的,基本上互联网公司底图都是使用这种投影)。三个wkid代表它3857、102100、102133,用的最多的还是102100。东西和南北方向范围都是[-20037508.3427892,20037508.3427892]
下面一节是主要是讲述以谷歌和微软Bing Maps为例,探讨瓦片是如何计算的。
数据 |
这里返回的数据,不仅仅是矢量数据,也包括栅格数据。
矢量数据,包括那些点线面的具体坐标、投影或者坐标系。矢量数据使用场景:数据经常更新,需要知道数据属性或坐标。
栅格数据,提前生成好的图片或者动态生成的图片。栅格数据使用场景:底图,计算量较大的渲染图。
一般来说,一个地图,最下面是一个底图,然后在上面叠加一些矢量数据和栅格数据。底图主要是为了在当前比例尺下显示大概地形要素。底图变动周期比较长,数据量比较大,不适合使用矢量数据加载。现在通用的做法,将地图分割成一个个的小图片,然后等到使用的时候拼接起来。我们可以想象一下,之前的屋顶上面的瓦,是怎么一个形态?是不是一个一个拼接成的,然后形成屋顶的,没有谁家的瓦,是一个整体吧。这样做的好处主要有这么几个:
1:可以动态拼接某一范围的底图。
2:可以局部更新瓦片。
坐标系 |
地理坐标系,是以经纬度为地图的存储单位的。
投影坐标系参数当中都会包括一个地理坐标系,实质上是一个平面坐标系统,单位通常是米。
WGS84,是为GPS全球定位系统使用而站立的坐标系统,属于地理坐标系。GPS采集到的数据,都是基于WGS84。中国现在使用较多的是西安80或者北京2000,这就需要一个转换过程,不过具体参数是保密,现在转换的工具或者公式,转换都会存在误差的,也就会经常看到一些数据叠加发生了偏移错位(当然不仅仅是因为这一个原因,国内的数据发布到网络上面,都要求做偏移处理的)。WGS84东西方向范围[-180,180],南北方向范围[-90,90]。由于坐标系和投影实在是太多而且名字加参数太长,不容易记,所以就给每一种坐标系定义了一个或多个序列号,WGS84他的wkid是4326。
Web Mercator属于投影坐标系,这是一个正轴等角投影,投影出来之后呈现给我们的是一个正方形。我们都知道地球是一个椭球形,这样肯定会有误差,在大比例尺下面,就可以忽略这个误差了。不过话说回来,无论使用哪一种坐标系都会有误差的。等角投影,保证了对象形状不变,而且也保证了方向和位置的相对性性。这就是在众多的投影当中,我们为什么会选中它的原因(当然不是我选择的,基本上互联网公司底图都是使用这种投影)。三个wkid代表它3857、102100、102133,用的最多的还是102100。东西和南北方向范围都是[-20037508.3427892,20037508.3427892]
下面一节是主要是讲述以谷歌和微软Bing Maps为例,探讨瓦片是如何计算的。
相关文章推荐
- [置顶] arcgis api for js入门开发系列二十 用HTML5 canvas绘制地图 瓦片以及如何计算
- [置顶] arcgis api for js入门开发系列二十一 用HTML5 canvas绘制地图 瓦片加载平移缩放
- [Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十九】
- [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)
- [置顶] 微信小程序开发—(八)canvas绘制图形
- [Web Chart系列之一(续)]Web端图形绘制SVG,VML, HTML5 Canvas 简单实例
- [置顶] arcgis api for js入门开发系列二不同地图服务展示(含源代码)
- [置顶] arcgis api for js入门开发系列五地图态势标绘(含源代码)
- HTML5吃豆豆游戏开发实战(一)使用Canvas绘制游戏主角
- HTML5 移动开发 -- Canvas 绘图 9.2 三角形路径绘制, 圆, 圆弧,二元三元抛物线, 渐变
- [置顶] iOS开发系列--地图与定位
- HTML5吃豆豆游戏开发实战(一)使用Canvas绘制游戏主角
- html5的canvas绘制迷宫地图
- HTML5 Canvas:Web浏览器中一个高性能的GIS地图可视化开发标准
- HTML5 移动开发 ------ Canvas 9.3 绘制图片
- html5的canvas绘制迷宫地图
- 基于HTML5 Canvas绘制的支持手势缩放的室内地图
- Html5斜45度地图+3D模型ARPG系列教程(1)-- 搭建开发环境
- [置顶] HTML5原生WebGL开发系列教程