智慧旺苍数据可视化方案

1.智慧旺苍数据可视化建设方案

1.1.智慧数据可视化

1.1.1.系统概述

随着信息技术的快速发展，信息显示的要求也越来越高，迫切希望将各种监控系

统的计算机图文信息和视频信号等通过大屏进行集中显示，构建一个高效便捷的可视

化数据可视化平台，满足智慧旺苍综合应急指挥中心三大核心管理功能（城市运行管

理中心、综治中心和应急指挥中心）于一体的全方位需求。

数据可视化系统不仅能够通过数据交换平台有效集成城市各行业相关数据信息，

还可以展示城市旺苍的地理/地型/地貌、经济发展概况、重要生产经营管理数据、城市

运行状态、生产管理场景以及实现突发事件视频直播等业务连接集成，形成一套功能

完善、技术先进的交互式信息显示及管理平台，从而充分体现旺苍城市信息化管理和

精细化管理水平。

整套系统的硬件、软件设计上已充分考虑到系统的安全性、可靠性、可维护性和

可扩展性，存储和处理能力满足远期扩展的要求。

1.1.2.建设现状

信息化是推进经济社会发展和变革的创新动力，加快产业转型升级，建设城市发

展新区重要节点；加快城市更新再造，推动传统城市向新型智慧城市迈进；加快创新政

府、廉洁政府、法治政府建设，促进信息技术成果惠及广大人民群众，不断提升信息化

条件下政府治理能力等具有重大意义。

旺苍县信息化发展现状：

市政基础设施与城市部件信息化管理程度普遍不高，无法实现精确的科学管理、

故障预警和应急处置功能；共享数据建设不够完善，无法实现各部门数据交换与共享。

物联网基础薄弱、城市无线网络建设有待完善，内容资源不够丰富、云计算和大数

据中心尚处于起步阶段，对旺苍县城市治理、创新产业、互联网产业、大数据产业的发

展影响较大。

上述问题和不足，制约着旺苍县经济与社会发展，要有顶层制度保障，更需要在

“十三五”期间通过智慧旺苍专项建设予以支持和解决。

1.1.3.建设需求

智慧旺苍智慧城市整体项目的重点之一，是建设综合应急指挥中心，同时承载城

市运营管理中心和综治中心的功能。与此同时，建设智慧政务、智慧公安、智慧水务、

智慧综治中心、智慧城管、智慧国土、智慧安监、智慧煤管、智慧环保、智慧林业、智

慧农业、智慧交通等智慧城市应用项目。智慧旺苍数据可视化统一展示平台，是在智慧

城市运营管理中心当中，通过物联网、大数据、虚拟现实等技术，集中展现智慧城市整

体运营状况，将智慧城市运行的核心关键数据实现可视化呈现，同时通过丰富的展现

手段，对于城市的二三维地理信息态势，多维度的运行指标体系及报表，各智慧应用的

运行状况及成果进行统一集中化的展现。

作为城市指挥中心数据展示平台，其对图形数据及视频的输出系统具有较高的要

求。显示系统不仅需要较大的显示面积和较高的图分辨率，还需具备多画面同时显示

及切换、视觉感官良好、具备良好的操控性能等条件。因此选择和设计一套成熟稳定、

技术先进的显示系统尤为重要。

1.1.4.建设内容

为城市管理者提供一个全面、动态的城市运行仪表盘，管理者可以清晰直观了解

城市运行情况，通过逐层钻取可以进一步了解各个领域的运行指标。同时，平台提供了

历史数据对比分析，通过同比、环比等图表可以看出城市运行动态变化过程。另外，通

过不同区域的横向对比，可以发现不同区域城市运行特点和规律。而且这些分析结果

都可以直接展现在地图上，让管理者有更好的使用体验。

日常模式根据基础设施、安全、交通、环境生态等主题的运行数据，以仪表盘形

式展现城市各个领域运行的指数情况。仪表盘可以进一步细化挖掘具体业务数据情况。

信息展示模块负责将城市业务数据或信息以可视化的方式呈现在相关设备上，展示设

备可以是PC、LED大屏、移动终端等，展示形式可以是文字、图表、地图、音频、视频

等。

紧急状态模式以应急指挥系统为中心，基于二维/三维GIS,结合智慧交通和智慧

公安等专题板块，协同数据资源，展现事发地周围真实状态，评估事态发展走势，为指

挥调度提供一目了然的决策依据。

访客参观模式将在GIS的基础上制作2分钟动画或视频，全屏展示智慧旺苍的建

设成果，特别是大数据对智慧旺苍和旺苍社会发展将带来的影响。

1.1.5.系统设计

系统总体架构

系统采用WPF技术搭建，依赖于WPF支持创建二维和三维矢量图形、提供对界面

动态效果的内置支持、数据绑定等优势，为用户提供丰富的界面展示效果和最佳的用

户体验。其中涉及到大量三维模型、城市BIM模型的部分采用WPF结合三维GIS平台

客户端加载三维沙盘的方式进行呈现。

系统主要分为智慧旺苍大屏可视化展示系统和智慧旺苍管理系统。系统根据实际

需求统一规划，按照不同的层级进行分级划分和管理，以网络资源、计算资源、存储资

源及基础设施等基础资源为基础，依托于GIS平台、开发与计算框架等平台的支撑服

务，建设智慧旺苍数据中心，对智慧旺苍城市管理涉及的空间数据（矢量、影像、三维

模型、BIM等）和业务数据（城市管理、资源监测、应急指挥等）进行数据融合与存储，

并提供相应的数据资源服务，便于大屏可视化系统和管理系统进行调用。总体架构如

下图所示：

应用层大屏可视化展示系统管理系统

■

智慧吐苍数据中心

数据对接数据存储数据整合数据服务

数据层

标

信

准

息

空间数据（矢量、影像、业务数据（交警数据、监测数据、

规

城管数据、其它政府部门相关数安

三维模型、BIM）据）

范

全

体

体

系

GIS平台跨平台开发框架系

平台支撑

分布式存储与索引并行计算框架

资源管理调度基础设施虚拟化

基础资源

计算资源存储资源网络资源

图1软件体系架构图

显示大屏系统接口设计

大屏幕显示系统需要与用户各个专业系统显示信号源有相关的技术接口，主要分

为三类接口类型：视频信号接口、独立计算机RGB接口、网络(IP)接口。在结合了拼

接墙系统的应用特点、接口标准以及本次项目的实际要求后，拼接墙与相关系统的接

口方式详见下文。

可视化系统与大屏显示信号源接口设计：

本方案可视化系统与拼接墙系统与用采用了两种接口方式：网络和RGB,其中网

络应用和RGB接口方式是相互备份的，在常规应用状态拼接墙系统使用网络显示用户

专业系统画面，但出现报警状态或拼接墙的多屏处理器出现故障时，则系统切换为RGB

状态显示用户客户端计算机的画面，保证在拼接墙上完整、高效、安全、方便的显示用

户专业系统提供的画面。

图5信号源接口设计图

RGB接口方式：

大屏显示系统提供了多路RGB接口，用户专业计算机系统的RGB信号通过接口由

RGB线缆传输到RGB矩阵，通过矩阵的分配将RGB信号分别输入到显示屏多屏处理器

和显示单元。RGB信号可以在拼接墙的指定区域或全屏开窗显示，并能够与各专业的高

分辨率图形叠加，窗口可以任意漫游、缩放、跨屏显示。

硬件接口：HD15/DVI

网络接口方式：

大屏显示系统提供了100M/1000M的网络接口，用户专业计算机系统通过网络将需

要显示的画面和数据传输给多屏处理器系统，经过多屏处理器处理后，拼接墙系统将

接收到的信息内容直接在拼接墙上显示。

硬件接口:RJ45

通讯协议：TCP/IP

1.1.5.3可视化数据展示系统设计

信息可视化、互联网络以及多媒体技术的发展推动了城市管理信息化展示技术的

发展，依托大屏幕的硬件展示条件，有效集成智慧城市相关数据信息，能够将城市运行

核心系统的各项关键数据进行可视化呈现，从而对包括应急指挥、城市管理、公共安

全、环境保护、智能交通、基础设施等领域进行管理决策支持,进而实现城市的智慧化、

精细化管理服务与运行。

(1)可视化展示系统流程设计

可视化的设计流程主要有分析数据、匹配图形、优化图形、检查测试。首先，在了

解需求的基础上分析我们要展示哪些数据，包含元数据、数据维度、查看的视角等；其

次，我们利用可视化工具，根据一些已固化的图表类型快速做出各种图表；然后优化细

节，最后检查测试。

优化图形

图6可视化设计工作流程图

想要清楚地展现数据，就要先了解所要绘制的数据，如元数据、维度、元数据间

关系、数据规模等。根据智慧旺苍对于大屏展示的需求规定，我们明确了需要展现的

元数据是智慧旺苍各主要功能板块的运行数据，维度有场景数量、实时指标、指标分

析、排名分析、位置分布、实时视频、预警信息等，查看的视角主要是宏观、微观和

关联。涉及到的视觉元素有形状、色彩、尺寸、位置、方向，结合数据需求及视觉元

素呈现设计，我们通过地图、饼图、直方图、折线图、雷达图、环状图等多种方式对

相关数据进行可视化展示设计，展示效果如下图所示。

大r分市今B骞・实时・报U6安3»*»SS力氏

图7社会经济发展预测统计图

图8智慧旅游大数据统计图

图9智慧医疗大数据展示

匹配图形的同时，还要考虑展示的平台。由于是在指挥中心大屏幕上展示，我们

对大屏幕的特点进行了分析，比如面积较大、深色背景、没有互动等。依据大屏幕的

特点，我们对设计风格进行了定位：它是实时的，有紧张感；需要新颖的图标和动

效，有科技感；信息层次是丰富的；展示的数据是权威的。

图11风格设计涵盖内容

最后根据设计风格进一步确定了深蓝或黑色为标准色，代表科技与创新；橙红蓝

分别代表指标数量的高中低，为辅助色；整体的视觉风格与目前主流的扁平化一致。

最后还需要检查测试，从头到尾检查一遍是否满足需求；实地投放大屏幕后，用

户是否方便阅读；动效能否达到预期，色差是否能接受。

系统总体风格效果图如下图所示:

董事会议事厅实时看板

火出机班状态201807€30956:41风电计划完品

日发电量公

348329358892(^)(^)(£)

发HI・的物

，UViiRJSX

1HJ7J3

494U

自然urn

wiuuft13

36lhl.llhh..lll

■TVEHkdtt

图12数据驾驶舱

智慧城市运营中心

公众・傍时_______

iSMX/r

XitMaa»**®*100%

JHtOB

京电带月统it

»K4»O

MBMiam13

A*nai137

3167Mc

•£•«■CM

"MMMRS

■■•■・am

金■im

图13智慧城市运营中心

图14监狱大数据可视化

图15智慧社区可视化

图16智慧城市可视化

（2）可视化展示关键技术

氏hart3.0前端显示技术是基于html5Canvas,是一个纯Javascript图表库，提供直

观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、

值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

更小体积的文件，满足更轻便的使用需求，更灵活的打包方式，可自由选择你需要

的图表和组件，移动端广泛应用的行业环境下，Echart3.0提供良好的自适应效果，增

强移动端交互体验。更丰富的可视化效果，新增更多图表类型，更好的满足不同数据的

处理需求更多的搭配方案让你的数据呈现方式更个性和完美。

阮准

单图裳类型：

折饯图（面积图）、柱状图（条形图）、散点图、K畿图、饰图（环形图）、雷达图（填充寄达图）、和弦图、力导布属图、地图。

BarILineIScatterIKIPieIRadarIChordIForceIMapIGauge■FunnelH

■柱状图|折线图|散点图|K线陛・饼图|雷达图I和弦图I力导布局陛］地图.仪表盅I漏斗图■

直角坐标系4-1

谡借

乡闻表类型：任意用表混合

图17多种图表类型

跨平台显示技术：HTML5作为一种最广泛的前端语言，现广泛地应用与各种web

的开发中。HTML5本身是由W3C推荐出来的，它的开发是通过谷歌、苹果，诺基亚、

中国移动等几百家公司一起酝酿的技术，这个技术最大的好处在于它是一个公开的技

术。换句话说，每一个公开的标准都可以根据W3C的资料库找寻根源。另一方面，W3C

通过的HTML5标准也就意味着每一个浏览器或每一个平台都会去实现。

♦多设备跨平台

用HTML5的优点主要在于，这个技术可以进行跨平台的使用。比如你开发了一

款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中心、

Facebook应用平台，甚至可以通过封装的技术发放到AppStore或GooglePlay上，所

以它的跨平台性非常强大，这也是大多数项目选择HTML5的主要原因。

♦自适应网页设计

很早就有人设想，能不能“一次设计，普遍适用”，让同一张网页自动适应不同大小

的屏幕，根据屏幕宽度，自动调整布局（layout）。

EthanMarcotte提出了“自适应网页设计”这个名词，指可以自动识别屏幕宽度、并

做出相应调整的网页设计。

这就解决了传统的一种局面——网站为不同的设备提供不同的网页，比如专门提

供一个mobile版本，或者iPhone/iPad版本。这样做固然保证了效果，但是比较麻烦，

同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设

计的复杂度。

这种技术使该平台的功能及用户展现方式保持对大屏幕、PC端、手机端、平板电

脑端的友好性成为可能。

♦GIS技术

地理信息系统是一种特定的十分重要的空间信息系统。它是在计算机硬、软件系

统支持下，对整个或部分地球表层（包括大气层）空间中的有关地理分布数据进行采

集、储存、管理、运算、分析、显示和描述的技术系统。

位置与地理信息既是LBS的核心，也是LBS的基础。一个单纯的经纬度坐标只有

置于特定的地理信息中，代表为某个地点、标志、方位后，才会被用户认识和理解。用

户在通过相关技术获取到位置信息之后，还需要了解所处的地理环境，查询和分析环

境信息，从而为用户活动提供信息支持与服务。

地理信息系统是一门综合性学科，结合地理学与地图学以及遥感和计算机科学，

己经广泛的应用在不同的领域，是用于输入、存储、查询、分析和显示地理数据的计算

机系统，随着GIS的发展，它可以对空间信息进行分析和处理（简而言之，是对地球

上存在的现象和发生的事件进行成图和分析）。GIS技术把地图这种独特的视觉化效

果和地理分析功能与一般的数据库操作（例如查询和统计分析等）集成在一起。

♦WebGIS

WEBGIS是通过互联网对地理空间数据进行发布和应用，以实现空间数据的共享

和互操作，如GIS信息的在线查询和业务处理等。WebGIS客户端采用Web浏览器，

如IE,FireFoxoWebGIS是利用Internet技术来扩展和完善GIS的一项新技术，其核心

是在GIS中嵌入HTTP标准的应用体系，实现Internet环境下的空间信息管理和发布。

WEBGIS可采用多主机、多数据库进行分布式部署，通过Intemet/Intranet实现互联，

是一种浏览器/服务器（B/S）结构，服务器端向客户端提供信息和服务，浏览器（客户

端）具有获得各种空间信息和应用的功能。

WebGIS是Internet技术应用于GIS开发的产物。GIS通过Web功能得以扩展，真

正成为一种大众使用的工具。从Web的任意一个节点，Internet用户可以浏览WebGIS

站点中的空间数据、制作专题图，以及进行各种空间检索和空间分析，从而使GIS进

入千家万户。

WebGIS是利用Web技术来扩展和完善地理信息系统的一项技术。它是基于网络

的客户机/服务器系统；利用因特网来进行客户端和服务器之间的信息交换；它是一个

分布式系统，用户和服务器可以分布在不同的地点和不同的计算机平台上。WebGIS主

要作用是进行空间数据发布、空间查询与检索、空间模型服务、Web资源的组织等。

♦WebGL

WebGL（WebGraphicsLibrary）是一种3D绘图协议，这种绘图技术标准允许把

JavaScript和OpenGLES2.0结合在一起，通过增力口OpenGLES2.0的一个JavaScript绑

定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以

借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数

据视觉化。WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有

复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

灰色电中的短之支持可济程者包养

WebGl1.0

图18OpenGL、OpenGLES和WebGL关系图

图19采用WEBGL加载倾斜摄影三维模型效果图

图20采用WEBGL加载三维模型效果图

♦WPF

WPF是微软新一代图形系统，运行在.NETFramework3。及以上版本下，为用户

界面、2D/3D图形、文档和媒体提供了统一的描述和操作方法。基于DirectX9/10技术

的WPF不仅带来了前所未有的3D界面，而且其图形向量渲染引擎也大大改进了传统

的2D界面，比如Vista中的半透明效果的窗体等都得益于WPF。程序员在WPF的帮

助下，要开发出媲美Mac程序的酷炫界面已不再是遥不可及的奢望。WPF相对于

Windows客户端的开发来说，向前跨出了巨大的一步，它提供了超丰富的.NETUI框

架，集成了矢量图形，丰富的流动文字支持（flowtextsupport）,3D视觉效果和强大无比

的控件模型框架。

WindowsPresentationFoundation（以前的代号为"Avalon"）是Microsoft用于

Windows的统一显示子系统，它通过WinFX公开。它由显示引擎和托管代码框架组

成。WindowsPresentationFoundation统一了Windows创建、显示和操作文档、媒体和

用户界面（UI）的方式，使开发人员和设计人员可以创建更好的视觉效果、不同的用户

体验。WindowsPresentationFoundation发布后，WindowsXP^WindowsServer2003和

以后所有的Windows操作系统版本都可以使用它。

WPF是.NetFramework3.0里新推出的主打功能之一，加上Vista集成.Net

Framework3.0,改写Winform时代，可谓是影响巨大！WPF是一套API函数库，由.Net

FrameWork3.0以上版本类库运行。

WPF是Windows操作系统中一次重大变革，与早期的GDI+/GDI不同。WPF是基

于DirectX引擎的，支持GPU硬件加速，在不支持硬件加速时也可以使用软件绘制。

高级别的线程绘制可以提高使用者的体验。自动识别显示器分辨率并进行缩放。而Vista

就是一个非常典型的例子。

（3）可视化展示系统管理功能

为了方便用户管理各个展示场景，我方提供可视化展示系统管理功能，实现多用

户操作管理，网络远程遥控管理，并能与集中控制系统一起实现一体化操作管理。

系统采用C/S（浏览器/服务器）架构，任何一台连在网络上的电脑均可以作为大

屏幕的操作管理者，可以根据用户不同的应用场景，自由布局多块屏幕的分布以及显

示内容，既可重点关注专项事件态势，又可全面掌控城市整体态势。

允许多台工作站同时对大屏幕进行操作，并可设定权限分级，按工作性质对每个

用户赋予不同权限等级，监控用户在进行系统操作之前都需进行权限查验；可定义不

同级别的使用人员对包括信号源、模式预案、外围设备等系统资源不同权限的操控权，

也可在大屏上限定不同操作人员的可操作区域，使操作人员只能在经授权的范围及区

域内进行相应操作，确保多用户操作的安全性。

（4）可视化展示场景功能设计

展现信息展现方式展现功能描述

以表格形描述主要水源、河流的水质采样数据，以国家对水质标

表格

准分类来描述，如一类、二类等。

在地图中标识各水样采集点，点击标识点后可呈现此采样点的

水资源监控信息地图最新水质采样分析数据，可根据采样点水质等级的不同以相应

的颜色区加以区别。

图表（走

以走势图的形式表现各水源地、河段近一个月内水质等级变化。

势）

根据河段水位、流量、流速等数据分级在地图上以相应的颜色标

地图注河段，如果超过标准值则在地图中标注警报，点击相应的河段

显示实时监控信息

水位监控信息

以折线走势图的形式实时展示河道或河段水位、流量及流速监

走势图

控与标准信息

地图在地图上标识需要进行交通管制的道路

表格在表格中实时反映安全事件的发生、处置信息

统计城市近期（一个月或其他）内发生的公共安全事件，包括数

图表

公共安全信息量、地点（区域）、分类等。

以闪烁醒目的形式展现新发生的安全事件，警示信息可以文字、

报警提示

声光及在地图中提示。

展现信息展现方式展现功能描述

视频以实时视频的方式查看监控地实际情况。

在地图上标注事件发生地点，点击显示事件简要描述，如果此地

地图点有视频监控设施，则可观看实地实时实景视频。结合定位系统

显示实时警力部署。

在地图上标识各个道路的交通情况，根据其畅通程度以不同颜

色区分，点击道路显示详细交通监控数据：公共交通运营车辆

地图（公交车、长途大巴、出租车及网约车）定位数据与轨迹查询；

标识公共停车场位置与空车位数据显示；交通道路信号灯实施

状态展示。

交通拥堵、事故、运输安全事件等以闪烁醒目的形式展现新发生

报警提示

的交通事件，警示信息可以文字、声光及在地图中提示。

城市交通

通过监控视频实时查看道路交通实景；公共交通运营车辆内部、

视频

公交站台及客运站的实时视频查看。

以折线走势图的形式实时展示某一道路或进出城车流、车速数

走势图

据，交通事故数据统计、公共交通载客人次统计

公共交通载客人次记录与查询、交通事故数据记录与查询、进出

图表

城车辆（车型识别、车牌识别）数量统计与查询

市政基础设施状态监控（含井盖、路灯、智能垃圾桶等）及环卫

地图

车辆运行数据

城市管理

以闪烁醒目的形式展现新发生的城管事件，警示信息可以文字、

报警提示

声光及在地图中提示。

展现信息展现方式展现功能描述

视频关键区域实时视频

图表城市网格化管理、事件管理历史记录与统计数据

报警提示以闪烁醒目的形式展现警报信息

应急指挥图标应急预案与流程、应急事件统计、查询、应急资源储备数据展示

地图避难场所、关键设施、应急物质储备仓库等重要区域状态

地图空气、噪音、土壤等污染检测站点标注并展示实时数据

走势图历史空气、噪音、土壤污染记录

城市环境以闪烁醒目的形式展现新发生的环境事件，警示信息可以文字、

报警提示

声光及在地图中提示。

视频重点排污点位实时视频数据

地图人口、法人数据定位展示、区域人口热度分析

人口及法人

走势图人口、法人历史统计

在地图中展现事件发地位置，参与处置事件的相关人员、车辆、

地图

设备的实时位置或移动轨迹。

事件处理信息

呈现事件展现状态，目前处于何种环节，参与处置事件的资源

图表

（人、财、物）的工作状态。

展现信息展现方式展现功能描述

事件处理过程中下达的指令及反馈的信息通过文字、仪表盘、地

实时提示

图等方式及时提示。

......

（5）大屏显示分区设计

应急指挥中心大屏为16米长*2.4米高小点距高分辨率大屏，总面积为38.4平米。

大屏显示模式主要分为日常管理模式、应急指挥模式、访客参观模式，具体内容如下：

日常管理模式：设计5个显示分区，分别为城市运行状态板块（显示比例为16:9）、

交通板块（显示比例为4:3）、公共安全板块（显示比例为4:3）、环境生态板块（显示比例为

4:3）和机动轮巡板块（其它智慧系统数据轮巡，显示比例为4:3）；

图21日常管理模式示意图

应急指挥模式：设计3个显示分区（均为16:9显示模式），分别为应急决策指挥

板块、交通板块和公共安全板块;

图22应急指挥模式示意图

访客参观模式：制作宣传动画视频全屏或分区展示旺苍智慧城市建设和社会经济

发展成果，主要包含基于GIS的3D城市仿真展示、城市精细化治理与智慧化服务展

示和基于大数据的统计分析与决策展