[发明专利]基于HTML5高清位图的动态信息融合展现方法

摘要

本发明公开了一种基于HTML5高清位图的动态信息融合展现方法，包括高清位图的平滑移动、位图上展示多个点位和点位的定位、点位实时信息展示，利用位图实现在线示意地图，并在位图上提供用户交互事件和信息展示，利用websocket通信协议解决在线实时数据性能问题，包括创建WebSocket服务、创建HTML5页面与服务端连接、加载底图、加载热区、加载点位和更新点位信息等步骤；本发明的优点在于能够低成本的在线地图示意，并在示意图上提供相应点位实时数据的展示，达到在线绘制点位、热区和服务端主动推送实时数据至前端做展示的目的。

主权项

基于HTML5 高清位图的动态信息融合展现方法，其特征在于：该方法运行在浏览器Chrome30.0 或Firefox31.0 上，实时数据由基于.netFramework 平台的服务提供，或通过其他开发平台提供，具体步骤如下：(1) 基于.net 开发WebSocket 服务，为前端提供数据支撑；(2) 创建HTML5 页面，前端通过Javascript 实现与WebSocket 服务实现通信；(3) 通过开源CraftMap 脚本库加载底图；(4) 通过开源mapper 脚本库实现位图热区展示处理；(5) 通过开源raphael 脚本库加载点位；(6) 通过WebSocket 回调函数，更新点位信息；所述步骤(1) 的.net 开发WebSocket 服务是指，基于.netFramework 开发windows 服务程序，程序提供WebSocket 的service 服务，开启监听端口后，接收客户端的连接；所述步骤(2) 的创建HTML5 页面，通过脚本调用Html5 的API，获得通信对象，传入的服务端IP、端口，实现与服务端的通信；所述步骤(3) 的CraftMap 脚本库是指开源脚本API，提供底图的展示与操作，能够修改源码实现多层的底图的扩展；所述步骤(4) 的mapper 脚本库提供底图上任意位置交互事件功能，提供相应的坐标以及该区域事件处理方法，完成该区域的交互功能；所述步骤(5) 的raphael 脚本库是作为基本工具包实现脚本绘制SVG 点、线、面的矢量图形。