Web前端地理数据可视化技术研究与实践
摘要：随着互联网技术的不断发展，移动设备、传感设备的普及范围也在逐步扩大，在大多数行业领域中，随着海量数据的涌现，呈现出爆炸式的增长模式，且大量数据中涵盖了与地理位置相关的信息。在研究地理数据可视化技术时，其主要目的是实现对数据空间信息的解读，挖掘数据中隐含的位置信息，探究地理事物和地理现象的发展变化等规律，掌握实际的空间分布状况。本文主要探讨Web前端地理数据可视化技术相关研究，总结相应的时间对策，在一系列项目开发当中，确保该项技术得到成功利用，以供参考。
关键词：Web前端；地理数据；可视化技术；实践与应用
引言：作为互联网主流中的技术类型之一，采用Web前端技术实现数据的可视化发展，已经成为当前的主流趋势。随着数据的可视化转变，能够促进数据解释能力的全面提升，利用可视化功能，在海量数据中，便于用户更好地发现背后蕴含的信息。能够在数据与数据之间，或者数据与地理位置之间，建立起紧密的联系，促进文字信息的转化，用一种生动的图表来表现，并且具有可交互性，能够从中发现有价值性的规律或结论，能够在相关领域或决策活动的开设期间，提供充足、有效的参考依据。
1.地理数据及其可视化相关概述
1.1地理数据
在地理信息行业发展期间，突出了数据的核心作用，围绕数据全面做好采集、检查、处理、分析等任务。以测绘行业为例，积累的地理信息数据类型多种多样。比如，全国大地测量数据，卫星影像数据，大地控制点数据，航拍数据，Dem数据等等。主要是对不同类型的光栅资料、不同类型的向量型资料进行分类。对于地理信息行业相关的数据，具有种类丰富、结构复杂的特点，且数据的总体存储量普遍较大，数据的容量呈现出逐年增加的趋势。在获得传统地理数据时，通常会运用实地测量、图片扫描、格式转换等多种方式获得。在互联网、物联网的发展过程中，涌现出更为多样的地理数据，并且具有创新性的特点。
在网络时代的到来，数据的创作主体的范围越来越大，各种个人都可以担当起创作数据的角，并且还可以利用数据来满足自己的需要。在此基础上，使用者可以在共享了资料后，再使用该资料，重新获得所需资料。在这个时候，用户扮演着数据中转者的角，可以迅速地生成更多的数据，加速了数据的流动、产生、创造与更新。地理空间信息数据属
于大数据的范畴，在互联网时代背景下，数据形式多种多样。如何充分发挥现有技术的优势，从海量的地理数据中发掘出具有重要意义的信息，并以之为中心进行可视化。
svg canvas
1.2地理数据可视化
要实现数据可视化，不仅要了解数据，还要把握其特定意义，还应根据数据的背景信息，提取有用的背景信息，进而转变对数据的传统认知。例如，在将某些数据可视化处理之后，在此基础上，结合地理位置信息，帮助使用者从地理视角对数据进行分析，并寻导致已有研究成果产生的原因。在地理信息可视化的应用中，已逐步表现出了广泛性。比如，在对城市空气质量进行检测时，可以将监测数据和预测数据进行可视化，以每个城市的空气质量状况为出发点，得到相应的分布效应图。基于可视化技术的转换，可以用简洁明晰的方法来凸显数据的地理学特征。同时，也能帮助使用者到其背后的空间规律，从而实现对数据的全面解读[1]。
2.Web前端地理数据可视化技术相关类型
2.1基于插件方式的技术类型
就拿浏览器内的矢量绘制技术来说，以 Flash为代表，要在客户机上安装一个插件，当加载到外部的代码时，可以使用 html选项卡。例如，电子、对象、小程序等。当一个外部的代码被执行时，它会受到一个特殊的执行环境的影响。为了达到这个目的，在浏览器里，如果对一些外挂程式进行停用，就会限制外挂程式的执行，造成外挂程式的功能性失效。在手机上，IPhone、iPad等设备逐渐将Flash舍弃，且Android也逐渐抛弃对Flash的应用，WindowsPhone从未支持对Flash的运用。所以，在网站当中，导致其中的部分功能无法在移动端正常运行。如，视频、图表、动画效果等等。
2.2基于浏览器原生支持技术
在多数浏览器的开发过程中，开发商均在浏览器当中，对一些绘图技术给予了原生支持，让浏览器在画图时，能够减少对插件的依赖性。在早期的浏览器绘制技术中，以 IE中的 VML为代表，也就是 VictorMarkupLanguage （矢量可标记语言），之后又出现了SVG，与W3C标准相符合。另外，还包括其他两种技术。即，HTML5canvas绘图技术、WebGL3D绘图技术等。
2.2.1VML
对于最早的浏览器端绘图技术VML，将XML作为基本标准，在拓展过程中比较容易，对高质量的图形显示给予了支持，并且能够做到交互性，有着动画显示的功能。但在VML中，只有 IE支持，而且在IE10中， VML也有减弱的趋势。随着IE9+的普及，以及HTML5 canvas渲染技术的整合， VML在将来的开发过程中将会变得更少。
2.2.2SVG
在2003年，SVG成为W3C的推荐标准，将XML作为基础，用于对图形矢量的绘制，可以达到任意缩放的效果，并且不容易失真。在高精度图形的绘制和打印过程中，均可以运用SVG来完成。另外，SVG还具有良好的交互性，能够完全支持Dom早期的IE。如，IE8以下的规格。对于无法做到原生支持SVG，一般情况下需要安装AdobeSVG插件才能够运行。
2.2.3HTML5canvas
对于HTML5canvas而言，该类绘图技术符合W3C的标准，与SVG矢量绘图方式有着本质上的不同。HTML5canvas是将像素级别的绘图技术作为基础，在缩放操作期间会出现失真
的情况，并呈现出锯齿状。在高精度绘图过程中，一般不运用HTML5canvas来操作。但是，对于canvas而言，绘图过程中的效率比较高，当绘图任务比较繁重时，或者图斑比较零碎，呈现出数据量较大的情况下，可以运用HTML5canvas实施绘图，此时的效率比SVG更高。在绘制作业完成之后，其对象能够对像素级的操作给予支持，并且可以转换成为base64编码，再将其存为图片。
2.2.4WebGL
作为跨平台的Web标准，WebGL属于3D绘图API的范畴，将Javascript和OPENGLES2.0结合之后，提供硬件3D，便于HTML5canvas使用，加速渲染速度。在不依赖渲染插件的情况下，可以运用WebGL对网页上的三维图形实时渲染，促进复杂数据的转变，具有三维可视化的功能。
2.2.5综合对比
在绘制矢量地图时，综合对比上述几种技术，在像素绘制期间，通常会运用canvas，在绘制矢量图形时，一般运用SVG和VML，并且具有高保真的特点。其中，VML的浏览器并不
具备良好的兼容性能，仅有IE的支持，所以逐渐被废弃。在绘制三维图形时，一般运用WebGL技术来完成。上述几种技术均属于浏览器原生绘图技术。在满足W3C标准的技术类型上，已经逐步形成了一个比较统一的标准，并得到了所有主要的浏览器厂商的支持，成为未来Web前端地理数据可视化技术的主要发展方向[2]。
3.Web前端地理数据可视化技术的方法和实现流程
3.1可视化方法
从海量数据当中，为探寻数据之间的关联性，其难度系数相对较高。若利用形象化的图形或者图表，可以促进数据解释能力大幅度提升，帮助用户迅速发现内在信息，更快、更好的理解数据。在应用可视化方法时，所面临的数据种类丰富多样，并且均有着各自适合的表达方式。在每一种图表中，有着特定的适用性场景和适应性数据。因此，在可视化操作期间，应结合数据对比和分析，以便寻最为合适的图表类型。
按照数据的特征，可以分成几大类。即，一维数据，二维度数据，多维数据，网络数据，时序数据，空间数据等等，为更好地了解各种类型的数据所用的图表（见表1）提供了便利。对于一维、二维等简单型维的资料，使用普通的传统可视化图，就能达到要求。
表1各类数据所使用的图表类型
对于多维数据的可视化，通常需要基于二维平面，思考怎样才能使多维度的资讯被有效的呈现出来。基于可视化原则，在多维数据可视化过程中可以分为三类技术。具体来说，就是以几何为基础的技术，以像素为基础的技术，以图标为基础的技术等等。例如，在以几何为基础的技术中，一般采用平行坐标方法，可以很好地表现出多维数据的二维形式，使用多个平行坐标轴，表现出数据的多维性。该方法将多个属性组合成一条曲线，通过大样本的方式，能够较好地反映出每个属性的变化趋势。
对于具有网状结构的数据，比如，在网络环境下的传播网络、社会网络等，为了更清晰地表达出它们之间的关系，可以用网络节点和连接来表示。如：力引导式排版、弦线图、树形图等。以和弦图为例，其通过定义节点和边的权重，基于相关信息，来产生节点之间的
关联、关系，突出对象之间的关联性，所呈现的关系比较简单，仅针对对象之间的关联、关系，与力导向布局图不同，并不需要进行聚类。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。