基于JavaScript的地理事件可视分析框架设计

张　伟，边长春，李海岗，李　峰

(1.信息工程大学，河南 郑州 450000；2．61175部队，山东 淄博 255000)



基于JavaScript的地理事件可视分析框架设计

张伟1，2，边长春2，李海岗2，李峰1

(1.信息工程大学，河南 郑州 450000；2．61175部队，山东 淄博 255000)

摘要：随着互联网的飞速发展，网络环境下地理信息的可视化表达成为研究的热点。在JavaScript技术和可视分析技术研究基础上，对互联网中地理事件可视分析框架进行设计，目的是探索网络环境下，地理事件可视化的表达方式和可行性分析，搭建适合互联网的地理事件可视分析框架，为基于Web的地理信息可视分析系统的实现打下基础。

关键词：JavaScript；地理事件；可视分析；D3；框架设计

随着科学技术的不断进步，尤其是互联网的飞速发展，人们越来越多的依靠网络来获取各类信息。如何将互联网中各类地理事件快速、直观的展现给用户，让用户获得更多的交互体验，从而分析事件的多维属性，发现事件之间的各种关联，挖掘事件的热点趋势，寻找事件的发展规律等，已成为目前地理事件可视分析研究的重要内容。

可视分析最早在2004年由国家可视化和分析中心(National Visualization and Analytics Center, NVAC)组织的工作小组提出，是交互式可视化界面支持的分析推理学科[1]，其主要内容有认知科学、数据表示与转换、可视化与交互技术、分析推理、决策支持等[2]。地理事件可视分析是在可视化的基础上，利用可视分析技术，对地理事件进行分析。

本文利用JavaScript技术对互联网中地理事件进行可视分析框架设计，目的是探索网络环境下，地理事件可视化的表达方式和可行性分析，搭建适合互联网的地理事件可视分析框架，为基于Web的地理信息可视分析系统提供支撑。

1概念解析

1.1JavaScript技术

JavaScript是一种基于对象的解释型脚本语言，广泛应用于Web应用的开发，是对HTML页面内容进行交互行为操作的技术[3]，具有跨平台、可交互、动态嵌入等特点。JavaScript的核心包括ECMAScript，DOM，BOM 3部分内容[4]。

本文基于JavaScript的地理事件可视分析框架设计主要从应用界面、前端开发、网络传输、后端服务等4部分实现其整体功能，分别应用JavaScript以下4部分内容：

1)界面UI框架。JavaScript界面框架有很多，例如JUI，JqueryUI，LigerUI，Jquery easyUI等，可以轻松实现系统框架的界面布局。

2)前端可视化框架。JavaScript可视化框架有D3，echart，Kartograph，Three.js等，考虑到对地图的支持和交互性的要求，本文采用D3(Data Driven Document)框架。

3)Ajax网络通讯。异步JavaScript和XML技术，通过服务器端少量的数据交换，实现网页内容的快速浏览和异步更新，对于大数据量的地理事件网络传输与更新提供保障。

4)Node.js服务器端框架。其是对Google V8引擎的封装[5]，具有单线程、非阻塞等特点，使得Node在服务器端的功能更强大，满足轻量级系统框架的搭建需求。

1.2可视分析技术

可视分析技术是从科学计算可视化[6]和信息可视化[7]发展而来的，是对大规模、动态、模糊或者不一致的数据集进行分析[8]。可视分析的核心是推理，可视化表达是基础，交互技术为支撑，充分利用人的感知认知能力弥补计算机自动分析的不足，目的是从海量、动态、异构、多层的数据中获取更深层次的信息。

本文利用JavaScript在交互性上有其得天独厚的优势，为可视分析提供很好的技术支撑。可视分析与可视化最大的区别在于其交互分析的过程，传统的可视化是被动的显示，将结果以单一固定的形式展现出来，而可视分析注重用户的交互，是对数据的多方面的动态展示，通过分析比较得到推理结果，如图1所示。

图1　可视分析流程[8]

1.3地理事件可视分析

地理事件的分析，概括的分为两类方法：一种是依靠计算机或机器，以人工智能、数据挖掘、机器学习等技术为支撑，研究计算机性能、挖掘算法及智能处理等，分析客观存在的地理事件；另一种是依靠人机交互，以人为主体，可视化、人机交互等技术为支撑，研究认知理论、协同可视化、人机交互等，分析符合人的需求和认知规律的地理事件，如图2所示。

图2　地理事件分析方法流程

本文地理事件可视分析以人为主体，人机交互、协同可视化等技术为支撑，充分利用人与机器的各自优势，对地理事件进行分析。地理事件可视分析是“分析-可视化-分析”的一个循环过程。地理事件可视分析主要研究内容包括：地理事件网络关系可视分析、地理事件多维属性可视分析、时空数据实时态势可视分析、时序数据的事件过程可视分析等。

2地理事件可视分析的框架设计

地理事件可视分析框架设计的基本原则如下[9-11]：

1)以用户为中心，提供丰富、灵活的交互体验；

2)以事件为驱动，提供快速、准确的内容更新；

3)以技术为支撑，提供稳定、高效的运行环境；

4)以数据为基础，提供大规模、动态、多样数据集。

2.1模型架构设计

基于JavaScript的地理事件可视分析框架采用B/S架构设计，客户端采用MVC的传统设计模式，可视化层负责图形的渲染和更新，业务逻辑层负责交互事件的请求和响应，数据处理层负责数据的调度和管理，如图3所示。

图3　模型架构设计

本文采用传统的B/S架构实现基于互联网的地理事件可视分析框架设计，充分考虑到用户的频繁交互和实时响应的需求，通过D3.js数据驱动文档，采用AJAX异步通信技术按需下载数据，对页面进行局部刷新，减少服务器的负担；客户端通过JavaScript向服务器发出请求，用户不必等到响应完即可进行其他操作，提高用户体验。

2.2逻辑流程设计

基于JavaScript的地理事件可视分析框架设计，目的是实现基于互联网的地理事件的可视化及用户交互分析，其逻辑流程可分为表现层、中间层、数据层3层结构，如图4所示。

图4　逻辑流程设计

表现层：包括Web浏览器和HTML元素插件，浏览器负责接收用户的交互请求，将任务分发给中间层的数据驱动文档模型，HTML元素插件将数据驱动文档模型生成或者更新的元素可视化，并将结果展现给用户。

中间层：主要负责数据驱动文档，即将数据和HTML元素绑定，根据用户任务分配向服务器端发送HTTP请求，接收到返回的数据后，在前端进行数据的绘制，驱动HTML文档元素的可视化。

数据层：主要负责数据的管理和分发，包括数据库管理和服务器管理。富客户端的框架设计，减少服务器端的计算负担，服务器端更多的任务是数据的管理，基于Ajax的数据请求可以减少服务器的频繁访问。

2.3功能模块设计

地理事件可视分析的内容可分为网络关系可视分析、多维属性可视分析、时空数据可视分析、时序事件可视分析等4部分，其功能模块设计也可以按照地理事件可视分析的内容划分，如图5所示。

图5　功能模块设计

关系分析图，是指地理事件的主体之间的实体关系表达，是地理事件分析中主体分析的重要组成部分；属性分析图，是指地理事件的客体的多维属性表达，是地理事件分析中客体属性分析的重要内容；时空数据分析图，重点分析地理事件的态势分布和热点分布，是地理事件依托基础地理信息框架进行分析的重要内容；时序事件分析，是对地理事件的过程进行分析，按照时间序列回顾事件的发展过程和探索事件的发展规律。

地理事件的功能模块的实现，首先，需要有基本组件的支撑，例如基础地理信息平台、数据查询组件、数据分析组件、人机交互组件等。其次，也需要JavaScript技术的支持，例如Ajax异步通信技术、D3.js数据驱动文档、Node.js的服务器端管理以及LigerUI的界面框架等。最后，是基础数据的管理，包括矢量数据、栅格数据、属性数据、管理数据等，为可视分析提供数据服务。

3基于JavaScript的地理事件可视分析框架搭建

3.1环境搭建

3.1.1开发环境

1)操作系统：Windows XP；

2)Web服务器：WAMP搭建的本地服务器；

3)开发语言：JavaScript；

4)开发工具：Sublime脚本编辑器、Chrome浏览器；

3.1.2运行环境

1)客户端。基于JavaScript的地理事件可视分析是基于B/S架构设计，因此客户端不需要安装插件，只需要支持IE8以上的浏览器，例如Chrome、Firefox等。

操作系统：支持跨平台运行，例如Window、Linux、OSX等操作系统。

2)服务器端。操作系统：Linux；数据库：MongoDB；服务器管理：Express.js(基于Node.js)；数据库管理：Mongoose.js(基于Node.js)。

3.2框架实现

3.2.1数据格式

JavaScript支持的数据格式很多，其中适合地理事件表达的有JSON，CSV，GeoJSON等。JSON(JavaScript Object Notation)是一种轻量级数据交换格式，具有可扩展、互操作、面向对象的特点，是JavaScript的标准格式。GeoJSON是基于JSON的一种专门为地理坐标存储设计的数据交互格式，是Web网络中对地理数据结构进行编码的格式。CSV(Comma Separated Value)是以字符分隔符划分的纯文本数据格式，以行为单位，每行记录具有相同的字段序列。本文支持以上3种数据格式，GeoJSON存储基础地理信息数据，CSV存储事件的多维属性数据，JSON存储地理事件描述数据集。

GeoJSON数据格式示例(中国地图)：

{

"type": "FeatureCollection",

"features": [

{ "type": "Feature",

"properties": { "id": 1 , "name": "甘肃" },

"geometry": { "type": "Polygon", "coordinates": [ [ [ 104.358, 37.401 ],……]]},

……]

}

CSV数据格式示例(机场信息)：

Airport,longitude,latitude,Heading,Tilt,Range

Yantai,121.369,37.386,2.8278,4.00E-11,27522.85603

……

JSON数据格式示例(IP关系描述)：

{

"nodes":[

{"name":"10.59.223.31"},

……]

"links":[

{"source":1,"target":246,"uplen":32216660,"downlen":28069527,"visitNum":89890},

……]

}

3.2.2框架成果

基于JavaScript的地理事件可视分析基础平台，是对地理事件可视分析框架设计的具体实现，验证基于JavaScript技术搭建地理事件可视分析平台的可行性和可靠性。该平台可以在跨操作系统的客户端浏览器中运行，客户端不需要安装任何插件，支持Http访问协议，通过Ajax异步网络通信技术获取服务器端基础数据，确保用户的良好体验，减少服务器的访问次数，在客户端实现流畅的基础地理信息可视化、良好的人机交互和跟踪查询等功能，如图6所示。

(a) 地理事件可视分析基础地理信息可视化

(b) 地理事件可视分析力导向人机交互

(c) 地理事件可视分析属性信息查询图6

4结束语

随着互联网与人们的生活工作结合越来越紧密，人们通过互联网获取信息的需求也与日俱增，尤其是灵活交互、简单直观的用户体验已成为人们不断追求的目标。本文从JavaScript技术和可视分析技术入手，研究互联网环境下地理事件可视分析

的框架设计；以D3.js和Node.js等类库为基础，分别从客户端和服务器端进行环境的搭建，实现基于JavaScript的地理事件可视分析基础平台。结果表明，基于JavaScript技术进行地理事件可视分析框架设计是可行的，为地理信息可视分析系统的实现和功能完善打下基础。

参考文献：

[1]THOMAS J J, COOK C A. Illuminating the Path: The Research and Development Agenda for Visual Analytics[J]. Los Alamitos: IEEE Computer Society, 2005. 1-180.

[2]华一新，曹亚妮，李响.地理空间可视分析及其研究方向综述[J].测绘科学技术学报,2012,29(4):235-239.

[3]龙云.基于HTML5的WebGIS研究[D].赣州：江西理工大学,2013.

[4]李松峰，曹力.JavaScript高级程序设计[M].北京：人民邮电出版社，2012.

[5]张辰.B_S模式下的数据可视化技术研究及其应用[D].北京：北京邮电大学,2013.

[6]CHEN M, EBERT D, HAGEN H, et al. Data, information, and knowledge in visualization [J]. IEEE Computer Graphics and Applications, 2009,29(1):12-19.

[7]CHEN C M. CiteSpace II: Detecting and visualizing emerging trends and transient patterns in scientific literature [J]. Journal of the American Society for Information Science and Technology,2006,57(3):359-377.

[8]KEIM D, KONLHAMMER J, ELLIS G, et al. Mastering the Information Age: Solving Problems with Visual Analytics. Goslar:Eruographics Association, 2010：1-168.

[9]张运良,张兆锋,张晓丹，等.使用D3_js的知识组织系统Web动态交互可视化功能实现[J]. 现代图书情报技术,2013(2):127-131.

[10] 徐良燕.基于SVG的电力系统WEBGIS方案的研究[D].保定：华北电力大学,2005.

[11] 周炤，肖强，赵国成，等.基础地理空间数据持续更新模式分析[J].测绘工程,2014，23(1):12-16.

[12] 李小琦.三维场景可视化中的模型匹配方法研究[J].测绘科学，2015，40(8)：144-146.

[13] 赫春晓，吕志慧，陈超.露采矿山三维可视化分析应用[J].测绘科学，2015，40(7)：131-135.

[责任编辑：路晓鸽]

Visual analysis framework design of geographical event based on JavaScript

ZHANG Wei1,2,BIAN Changchun2,LI Haigang2, LI Feng1

(1.Information Engineering University，Zhengzhou 450000，China；2.Troops 61175，Zibo 255000,China)

Abstract：With the rapid development of the Internet, the visualization of geographic information in the network environment has become a hot study. Based on the study of the JavaScript and visual analysis technology, this paper designs the geographical event visual analysis framework on the Internet. The purpose is to explore the expression and feasibility of the geographical event visualization in the network environment, to set up a suitable Internet geographical event visual analysis framework, and to lay the foundation the realization of Web geographic information visual analysis system.

Key words：JavaScript; geographical event; visual analysis; Data-Driven Document; Framework Design

中图分类号：P208

文献标识码：A

文章编号：1006-7949(2016)03-0041-05

作者简介：张伟(1982-), 男,工程师,博士研究生.

基金项目：国家自然科学基金资助项目(41301428)

收稿日期：2015-08-01；修回日期：2015-08-31