• 使用HTML5 canvas做地图(1)基础知识


        之前一直想使用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为例,探讨瓦片是如何计算的。

  • 相关阅读:
    深入了解Element Form表单动态验证问题 转载
    使用 Element UI Select 组件的 value-key 属性,让绑定值可以为一个对象
    vue 中 使用 element-ui 发送请求前 校验全部表单,报警告: [Element Warn][Form]model is required for validate to work!
    vue element InfiniteScroll 无限滚动 入坑记录
    nginx实现跨域访问并支持(GET, POST,PUT,DELETE, OPTIONS)
    正则表达式记录
    element ui图片上传方法
    laravel 跨域解决方案
    vagrant的box哪里下?镜像在哪儿找?教你在vagrant官网下载各种最新.box资源
    Saas系统架构的思考,多租户Saas架构设计分析
  • 原文地址:https://www.cnblogs.com/HPhone/p/3426397.html
Copyright © 2020-2023  润新知