基于html5高清位图的动态信息融合展现方法
【专利摘要】本发明公开了一种基于HTML5高清位图的动态信息融合展现方法，包括高清位图的平滑移动、位图上展示多个点位和点位的定位、点位实时信息展示，利用位图实现在线示意地图，并在位图上提供用户交互事件和信息展示，利用websocket通信协议解决在线实时数据性能问题，包括创建WebSocket服务、创建HTML5页面与服务端连接、加载底图、加载热区、加载点位和更新点位信息等步骤；本发明的优点在于：能够低成本的在线地图示意，并在示意图上提供相应点位实时数据的展示，达到在线绘制点位、热区和服务端主动推送实时数据至前端做展示的目的。
【专利说明】基于HTML5高清位图的动态信息融合展现方法
【技术领域】
[0001] 本发明设及一种位图展现方法，具体地说是一种基于HTML5高清位图的动态信息 融合展现方法，属于位图在线展现方法领域。
【背景技术】
[0002] 目前web应用中地图应用都是采用GIS，对于低投入、小成本的项目需要有一种可 W替代GIS的在线地图方案，而在线位图示意地图成为首选方案，但HTML4中将位图展示与 信息融合主要采用前端标签实现展示、Ajax技术实现实时数据的获取，但该种方式在获取 数据的性能上存在问题，另一种方式是通过直接Flash技术实现展示与数据获取，但该种 方式不能动态扩展展现组件。HTML5作为HTML标准的下一个版本，其具备在线绘图、前后端 双向通信、应用扩展方便等特性。基于HTML5高清位图的动态信息融合展现方法，将高清位 图融合实时信息数据实现在线展示成为可能。
【发明内容】
[0003] 本发明的目的在于提供了一种基于HTML5高清位图的动态信息融合展现方法，能 够低成本的在线地图示意，并在示意图上提供相应点位实时数据的展示，达到在线绘制点 位、热区和服务端主动推送实时数据至前端做展示的目的。
[0004] 本发明的技术方案为；
[0005] 基于HTML5高清位图的动态信息融合展现方法，该方法运行在浏览器化rome30. 0 或Fire化x31. 0上，实时数据由基于.net化amework平台的服务提供，或通过其他开发平台 提供，具体步骤如下；
[0006] (1)基于.net开发WebSocket服务，为前端提供数据支撑；
[0007] (2)创建HTML5页面，前端通过化vascript实现与WebSocket服务实现通信；
[000引 （3)通过开源化aftMap脚本库加载底图；
[0009] (4)通过开源mapper脚本库实现位图热区展示处理；
[0010] (5)通过开源raphael脚本库加载点位；
[0011] (6)通过WebSocket回调函数，更新点位信息。
[0012] 其中，所述步骤（1)的.net开发WebSocket服务是指，基于.net化amework开发 windows服务程序，程序提供WebSocket的service服务，开启监听端口后，接收客户端的连 接。
[0013] 所述步骤（2)的创建HTML5页面，通过脚本调用化ml5的API,获得通信对象，传入 的服务端IP、端口，实现与服务端的通信。
[0014] 所述步骤做的化aftMap脚本库是指开源脚本API,提供底图的展示与操作，能够 修改源码实现多层的底图的扩展。
[0015] 所述步骤（4)的mapper脚本库提供底图上任意位置交互事件功能，提供相应的坐 标W及该区域事件处理方法，完成该区域的交互功能。
[0016] 所述步骤（5)的raphael脚本库是作为基本工具包实现脚本绘制SVG点、线、面等 矢量图形。
[0017] 本发明采用高清位图多层展现方法、点位动态定位展现方法、点位实时信息展现 方法，通过位图实现在线示意地图，并在地图上提供用户交互事件和W图形化方式的实时 信息展示，利用websocket通信协议解决在线实时数据性能问题。
[0018] 本发明采用HTML5、化vascript和SVG图形技术实现用户可在位图任意位置绘制 热区，并可将热区链接相应到位图，实现层层点击展开详细位图的效果。
[0019] 本发明通过化vascript和HTML5技术实现位图上点位位置可任意定义，W所见及 所得的方式配置点位位置，并可在任意层位图定义点位。用户选中点位后地图自动定位切 换点位到屏幕中屯、位置。
[0020] 本发明基于WebSocket通信技术实现实时数据的融合点位的展示，采用服务端主 动推送数据到浏览器端，解决原有HTML4中通过轮循请求而导致服务器压力的问题。
[0021] 本发明的优点在于；在不使用庞大的GIS系统下实现了在线地图示意图，降低了 成本，减少了前端与后台之间的通信压力，提高了系统整体性能，使用户体验更好。
[0022] 下面结合附图和实施例对本发明作进一步说明。
【专利附图】
【附图说明】
[0023] 图1为本发明实施例的整体流程图。
[0024] 图2为本发明实施例基于HTML5高清位图的动态信息融合展现效果图。
[0025] 图3为本发明实施例在线热区展示效果图。
[0026] 图4为本发明实施例在线点位展示效果图。
[0027] 图5为本发明实施例点位详细信息展示效果图。
【具体实施方式】
[002引 W下对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用 于说明和解释本发明，并不用于限定本发明。
[0029] 实施例1
[0030] 如图1-5所示，一种基于HTML5高清位图的动态信息融合展现方法，所述方法的最 终效果是运行在浏览器化rome30. 0或Fire化x31. 0上，实时数据由基于.net化amework平 台的服务提供，具体步骤如下：
[0031] (1)创建WebSocket服务；基于.net开发WebSocket服务，为前端提供数据支撑；
[0032] (2)创建HTML5页面与服务端连接；创建HTML5页面，前端通过化vascript实现 与WebSocket服务实现通信；
[0033] (3)加载底图；通过开源化aftMap脚本库加载底图；
[0034] (4)加载热区：通过开源mapper脚本库实现位图热区展示处理；
[0035] (5)加载点位：通过开源raphael脚本库加载点位；
[0036] 做更新点位信息述过Websocket回调函数，更新点位信息；
[0037] (7)给点位定制详细信息页面。
[003引其中，所述步骤（1)基于.net开发Websocket服务，该个服务的实现和基于套接 字的网络应用程序非常类似，首先是服务端要启动一个套接字监听来自客户端的请求，区 别在于WebSocket服务器需要解析客户端的WebSocket握手信息，并根据WebSocket规范 的要求产生相应的应答信息。一旦连接通道建立W后，客户端和服务端的交互就和普通的 套接字网络应用程序一样的了。
[0039] 所述步骤（2)创建HTML5页面，就是创建WebSocket的客户端。初始化页面时首 先会检测当前的浏览器是否支持WebSocket并给出相应的提示信息。在页面加载后就自动 连接服务端，初始连接关键代码如下：
[0040]
【权利要求】
1. 基于HTML5高清位图的动态信息融合展现方法，其特征在于：该方法运行在浏览器 Chrome30. 0或Firefox31. 0上，实时数据由基于? netFramework平台的服务提供，或通过其 他开发平台提供，具体步骤如下： (1) 基于.net开发WebSocket服务，为前端提供数据支撑； (2) 创建HTML5页面，前端通过Javascript实现与WebSocket服务实现通信； (3) 通过开源CraftMap脚本库加载底图； (4) 通过开源mapper脚本库实现位图热区展示处理； (5) 通过开源raphael脚本库加载点位； (6) 通过WebSocket回调函数，更新点位信息。
2. 根据权利要求1所述的基于HTML5高清位图的动态信息融合展现方法，其特征在于： 所述步骤（1)的? net开发WebSocket服务是指，基于? netFramework开发windows服务程 序，程序提供WebSocket的service服务，开启监听端口后，接收客户端的连接。 所述步骤（2)的创建HTML5页面，通过脚本调用Html5的API，获得通信对象，传入的服 务端IP、端口，实现与服务端的通信。 所述步骤（3)的CraftMap脚本库是指开源脚本API，提供底图的展示与操作，能够修改 源码实现多层的底图的扩展。 所述步骤（4)的mapper脚本库提供底图上任意位置交互事件功能，提供相应的坐标以 及该区域事件处理方法，完成该区域的交互功能。 所述步骤（5)的raphael脚本库是作为基本工具包实现脚本绘制SVG点、线、面的矢量 图形。
【文档编号】G06F9/44GK104503755SQ201410798772
【公开日】2015年4月8日 申请日期:2014年12月22日 优先权日:2014年12月22日
【发明者】陈鲁, 符兴斌, 李锁在, 韩鹏, 孙树刚, 刘涛, 王伟, 谢乐鸣, 张志刚, 张建波, 陈景华, 张跃鹏 申请人:中软信息系统工程有限公司