CN104503755A - Dynamic information fusing and presenting method based on HTML5 (hypertext markup language 5) high-definition bitmaps - Google Patents
Dynamic information fusing and presenting method based on HTML5 (hypertext markup language 5) high-definition bitmaps Download PDFInfo
- Publication number
- CN104503755A CN104503755A CN201410798772.4A CN201410798772A CN104503755A CN 104503755 A CN104503755 A CN 104503755A CN 201410798772 A CN201410798772 A CN 201410798772A CN 104503755 A CN104503755 A CN 104503755A
- Authority
- CN
- China
- Prior art keywords
- html5
- websocket
- service
- script
- bitmaps
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 28
- 238000004891 communication Methods 0.000 claims abstract description 10
- 230000001747 exhibiting effect Effects 0.000 claims description 13
- 230000004927 fusion Effects 0.000 claims description 10
- 230000008569 process Effects 0.000 claims description 6
- 238000011161 development Methods 0.000 claims description 2
- 230000002452 interceptive effect Effects 0.000 claims description 2
- 230000003993 interaction Effects 0.000 abstract description 2
- 230000000694 effects Effects 0.000 description 7
- 238000005516 engineering process Methods 0.000 description 6
- 238000010586 diagram Methods 0.000 description 2
- 230000004044 response Effects 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 238000007405 data analysis Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
Landscapes
- Information Transfer Between Computers (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a dynamic information fusing and presenting method based on HTML5 (hypertext markup language 5) high-definition bitmaps. The method employs smooth movement of the high-definition bitmaps, displaying of multiple point positions on the bitmaps, locating of the point positions, real-time displaying of point position information, presentation of an online map by the bitmaps, providing of user interaction events and displaying of information on the bit maps, and solution of online real-time data performance problem by the WebSocket communication protocol. The method includes the steps such as creating a WebSocket service, creating a HTML5 page and server connection, loading a base map, loading hot spots, loading point positions and updating point position information. The method has the advantages that the online map can be presented at low cost, real-time data of corresponding point positions can be presented on the map, online drawing of point positions and hot spots is achieved, and the fact that the server pushes the real-time data to a front end for presentation is also achieved.
Description
Technical field
The present invention relates to a kind of bitmap exhibiting method, specifically a kind of dynamic information fusion exhibiting method based on HTML5 high definition bitmap, belong to the online exhibiting method field of bitmap.
Background technology
In current web application, map application is all adopt GIS, project for low input, little cost needs a kind of Online Map scheme that can substitute GIS, and online bitmap signal map becomes preferred option, but bitmap display and information fusion are mainly adopted front endmost tag to realize the acquisition shown, Ajax technology realizes real time data in HTML4, but this mode has problems in the performance obtaining data, another kind of mode realizes showing and data acquisition by direct Flash technology, but this mode dynamic expansion can not represent assembly.HTML5 is as the next version of HTML standard, and it possesses the characteristics such as online graph drawing, front and back end two-way communication, application extension convenience.Based on the dynamic information fusion exhibiting method of HTML5 high definition bitmap, high definition bitmap is merged the online displaying of real time information data realization and become possibility.
Summary of the invention
The object of the present invention is to provide a kind of dynamic information fusion exhibiting method based on HTML5 high definition bitmap, can low cost Online Map signal, and the displaying of respective point position real time data is provided on schematic diagram, reach online graphical pointv position, hot-zone and service end active push real time data and do the object of showing to front end.
Technical scheme of the present invention is:
Based on the dynamic information fusion exhibiting method of HTML5 high definition bitmap, the method operates on browser Chrome30.0 or Firefox31.0, real time data is provided by the service based on .netFramework platform, or is provided by other development platforms, and concrete steps are as follows:
(1) WebSocket service is developed, for front end provides data supporting based on .net;
(2) create the HTML5 page, front end realizes serving with WebSocket realizing communicating by Javascript;
(3) base map is loaded by CraftMap script bank of increasing income;
(4) realize bitmap hot-zone by mapper script bank of increasing income and show process;
(5) by raphael script bank load(ing) point position of increasing income;
(6) by WebSocket call back function, some position information is upgraded.
Wherein, the .net of described step (1) develops WebSocket service and refers to, develop windows service routine based on .netFramework, program provides the service of WebSocket to serve, and after opening listening port, receives the connection of client.
The establishment HTML5 page of described step (2), calls the API of Html5 by script, obtain communication object, the service end IP imported into, port, realizes the communication with service end.
The CraftMap script bank of described step (3) refers to the script API that increases income, and provides displaying and the operation of base map, can revise the expansion that source code realizes the base map of multilayer.
The mapper script bank of described step (4) provides alternative events function in optional position on base map, provides corresponding coordinate and this zone issue disposal route, completes the interactive function in this region.
The raphael script bank of described step (5) realizes script as basic tool bag to draw SVG point, line, surface isovector figure.
The present invention adopts high definition bitmap multilayer exhibiting method, some position Kinematic Positioning exhibiting method, some position real-time information exhibiting method, realize illustrating online map by bitmap, and user interactions event is provided on map and with the real-time information display of patterned way, utilizes websocket communication protocol to solve online real time data performance issue.
The present invention adopts HTML5, Javascript and SVG graph technology to realize user and can in drafting hot-zone, bitmap optional position, and hot-zone can be linked corresponding to bitmap, realize clicking the effect launching detailed bitmap layer by layer.
The present invention realizes bitmap being put position, position by Javascript and HTML5 technology and can define arbitrarily, with the position, mode collocation point position of finding and gained, and can in random layer bitmap definition point position.After user chooses a position, map locates switching point position automatically to screen centre position.
The present invention is based on the displaying that the WebSocket communication technology realizes the merging point position of real time data, adopt service end active push data to browser end, solve the problem being caused server stress in original HTML4 by repeating query request.
The invention has the advantages that: achieve Online Map schematic diagram not using under huge generalized information system, reduce cost, decrease the communication pressure between front end and backstage, improve entire system performance, make Consumer's Experience better.
Below in conjunction with drawings and Examples, the invention will be further described.
Accompanying drawing explanation
Fig. 1 is the overall flow figure of the embodiment of the present invention.
To be the embodiment of the present invention represent design sketch based on the dynamic information fusion of HTML5 high definition bitmap to Fig. 2.
Fig. 3 is the embodiment of the present invention online hot-zone bandwagon effect figure.
Fig. 4 is that the embodiment of the present invention puts a bandwagon effect figure online.
Fig. 5 is embodiment of the present invention point position details bandwagon effect figure.
Embodiment
Below the preferred embodiments of the present invention are described, should be appreciated that preferred embodiment described herein is only for instruction and explanation of the present invention, is not intended to limit the present invention.
Embodiment 1
As Figure 1-5, a kind of dynamic information fusion exhibiting method based on HTML5 high definition bitmap, the final effect of described method operates on browser Chrome30.0 or Firefox31.0, and real time data is provided by the service based on .netFramework platform, and concrete steps are as follows:
(1) WebSocket service is created: develop WebSocket service, for front end provides data supporting based on .net;
(2) create the HTML5 page to be connected with service end: create the HTML5 page, front end realizes serving with WebSocket realizing communicating by Javascript;
(3) base map is loaded: CraftMap script bank loads base map by increasing income;
(4) hot-zone is loaded: realize bitmap hot-zone by mapper script bank of increasing income and show process;
(5) load(ing) point position: by raphael script bank load(ing) point position of increasing income;
(6) upgrade some position information: by WebSocket call back function, upgrade some position information;
(7) some position customization details page is given.
Wherein, described step (1) develops WebSocket service based on .net, realization and the web application based on socket of this service are very similar, first be that service end will start the request of a socket monitoring from client, difference is that WebSocket server needs to resolve the WebSocket handshaking information of client, and produces corresponding response message according to the requirement of WebSocket specification.Once after interface channel sets up, client and service end mutual just the same with common socket web application.
Described step (2) creates the HTML5 page, creates the client of WebSocket exactly.First can detect current browser during the initialization page whether support WebSocket and provide corresponding information.With regard to automatic Connection Service end after the page loads, initial connection key code is as follows:
Namely specified services end IP, port need the connection that realizes serving with service end WebSocket, after connecting, WebSocket object supports the process of several event, onopen is when connecting the response process function after opening, and onmessage is the function that service end receives data processing after client transmission data.
Described step (3) client realizes the loading of base map by the CraftMap that increases income, after specifying corresponding base map object, CraftMap realizes base map and moves freely, and bitmap is processed into the base map key code that can drag position as follows:
Both specify corresponding object picture, object is carried out mapable process, the wide height of equipment base map, deviation post.
Described step (4) realizes the loading of hot-zone by mapper script bank, need in HTML, create map label, and specify the scope coordinate of area, mapper highlights hot zone region by during map label original upload in the page automatically, and user can be known, and which area attribute hot-zone can be clicked.Map label is added as follows in the concrete page:
Namely need the picture adding hot-zone to need to specify corresponding map, in attribute usemap, specify the name of map label.Such picture just just includes corresponding hot-zone effect, specifically refers to Fig. 3.
Described step (5), by raphael load(ing) point position, mainly utilizes SVG graphical pointv position, graphical pointv, line two kinds of some position forms.Raphael supports the establishment, editor etc. of the various figure of on-line operation SVG.Bandwagon effect refers to Fig. 4.
Described step (6) upgrades some position information by WebSocket call back function, and in WebSocket communication object, onmessage receives service end data, according to classifying, updating point position information after Data Analysis.
Create details page to some position, this page creates with HTML5 standard equally, provides the different detailed pages for different some positions, as humiture information in Fig. 5, is realized, import the corresponding humiture size of corresponding data display into by the picture of signal.Realize the transparent of background by CSS3 pattern, highlight the displaying of body data.All some positions all provide click event, call the detail page ejecting and create during click.
Last it is noted that the foregoing is only the preferred embodiments of the present invention, be not limited to the present invention, although with reference to previous embodiment to invention has been detailed description, for a person skilled in the art, it still can be modified to the technical scheme described in foregoing embodiments, or carries out equivalent replacement to wherein portion of techniques feature.Within the spirit and principles in the present invention all, any amendment done, equivalent replacement, improvement etc., all should be included within protection scope of the present invention.
Claims (2)
1. based on the dynamic information fusion exhibiting method of HTML5 high definition bitmap, it is characterized in that: the method operates on browser Chrome30.0 or Firefox31.0, real time data is provided by the service based on .netFramework platform, or is provided by other development platforms, and concrete steps are as follows:
(1) WebSocket service is developed, for front end provides data supporting based on .net;
(2) create the HTML5 page, front end realizes serving with WebSocket realizing communicating by Javascript;
(3) base map is loaded by CraftMap script bank of increasing income;
(4) realize bitmap hot-zone by mapper script bank of increasing income and show process;
(5) by raphael script bank load(ing) point position of increasing income;
(6) by WebSocket call back function, some position information is upgraded.
2. the dynamic information fusion exhibiting method based on HTML5 high definition bitmap according to claim 1, it is characterized in that: the .net of described step (1) develops WebSocket service and refers to, windows service routine is developed based on .netFramework, program provides the service of WebSocket to serve, after opening listening port, receive the connection of client.
The establishment HTML5 page of described step (2), calls the API of Html5 by script, obtain communication object, the service end IP imported into, port, realizes the communication with service end.
The CraftMap script bank of described step (3) refers to the script API that increases income, and provides displaying and the operation of base map, can revise the expansion that source code realizes the base map of multilayer.
The mapper script bank of described step (4) provides alternative events function in optional position on base map, provides corresponding coordinate and this zone issue disposal route, completes the interactive function in this region.
The raphael script bank of described step (5) realizes as basic tool bag the vector graphics that SVG point, line, surface drawn by script.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410798772.4A CN104503755B (en) | 2014-12-22 | 2014-12-22 | Dynamic information fusion based on HTML5 high definition bitmaps shows method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410798772.4A CN104503755B (en) | 2014-12-22 | 2014-12-22 | Dynamic information fusion based on HTML5 high definition bitmaps shows method |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104503755A true CN104503755A (en) | 2015-04-08 |
| CN104503755B CN104503755B (en) | 2018-02-13 |
Family
ID=52945156
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410798772.4A Active CN104503755B (en) | 2014-12-22 | 2014-12-22 | Dynamic information fusion based on HTML5 high definition bitmaps shows method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104503755B (en) |
Cited By (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104978413A (en) * | 2015-06-24 | 2015-10-14 | 北京超图软件股份有限公司 | Apparatus and method for visualizing GIS line data at browser |
| CN107015974A (en) * | 2016-01-28 | 2017-08-04 | 安徽原力网络科技有限公司 | A kind of parking garage map solution based on html5 |
| CN107241311A (en) * | 2017-05-15 | 2017-10-10 | 北京微影时代科技有限公司 | One kind selects seat method and device in real time |
| WO2018049869A1 (en) * | 2016-09-19 | 2018-03-22 | 华为技术有限公司 | Device and method for displaying extension point in page |
| CN107885538A (en) * | 2016-09-28 | 2018-04-06 | 北京京东尚科信息技术有限公司 | The method and apparatus that hot-zone link is added on picture |
| CN108053458A (en) * | 2017-12-08 | 2018-05-18 | 河海大学 | A kind of watershed generalization figure based on GIS-Geographic Information System makes and methods of exhibiting |
| CN109246389A (en) * | 2018-07-13 | 2019-01-18 | 高新兴科技集团股份有限公司 | A kind of method and apparatus being associated with monitoring point |
| CN110109423A (en) * | 2019-03-20 | 2019-08-09 | 北京中水科水电科技开发有限公司 | A kind of monitoring system of the real time data based on Html5 technology |
| CN110162354A (en) * | 2018-02-13 | 2019-08-23 | 北京嘀嘀无限科技发展有限公司 | Method, system and computer equipment for configuring and displaying components |
| CN111552901A (en) * | 2019-02-11 | 2020-08-18 | 福建省天奕网络科技有限公司 | Method and storage medium for H5 cross-engine client data automation updating |
| CN112836002A (en) * | 2021-02-02 | 2021-05-25 | 长沙市到家悠享网络科技有限公司 | Map application method, device, equipment and storage medium |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7210095B1 (en) * | 2000-10-31 | 2007-04-24 | Cisco Technology, Inc. | Techniques for binding scalable vector graphics to associated information |
| CN101604320A (en) * | 2009-07-08 | 2009-12-16 | 华东师范大学 | Handheld map-based browser |
| CN102708116A (en) * | 2005-09-22 | 2012-10-03 | 谷歌公司 | System and method for image processing |
| CN103955549A (en) * | 2014-05-26 | 2014-07-30 | 重庆大学 | Web GIS system based on SVG and data input and search method thereof |
| CN103970859A (en) * | 2014-04-29 | 2014-08-06 | 杨立法 | Google user map text labeling method based on SVG |
| CN104010039A (en) * | 2014-06-05 | 2014-08-27 | 北京航空航天大学 | A multi-radar remote monitoring system and method based on WebSocket |
-
2014
- 2014-12-22 CN CN201410798772.4A patent/CN104503755B/en active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7210095B1 (en) * | 2000-10-31 | 2007-04-24 | Cisco Technology, Inc. | Techniques for binding scalable vector graphics to associated information |
| CN102708116A (en) * | 2005-09-22 | 2012-10-03 | 谷歌公司 | System and method for image processing |
| CN101604320A (en) * | 2009-07-08 | 2009-12-16 | 华东师范大学 | Handheld map-based browser |
| CN103970859A (en) * | 2014-04-29 | 2014-08-06 | 杨立法 | Google user map text labeling method based on SVG |
| CN103955549A (en) * | 2014-05-26 | 2014-07-30 | 重庆大学 | Web GIS system based on SVG and data input and search method thereof |
| CN104010039A (en) * | 2014-06-05 | 2014-08-27 | 北京航空航天大学 | A multi-radar remote monitoring system and method based on WebSocket |
Non-Patent Citations (2)
| Title |
|---|
| 天方: "HTML5中的WebSocket", 《博客园网站》 * |
| 石宝金: "基于SVG的WEBGIS在决策支持中的研究与应用", 《中国优秀硕士学位论文全文数据库 信息科技辑》 * |
Cited By (15)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104978413A (en) * | 2015-06-24 | 2015-10-14 | 北京超图软件股份有限公司 | Apparatus and method for visualizing GIS line data at browser |
| CN104978413B (en) * | 2015-06-24 | 2018-09-18 | 北京超图软件股份有限公司 | GIS line numbers are according in browser end visible apparatus and method |
| CN107015974A (en) * | 2016-01-28 | 2017-08-04 | 安徽原力网络科技有限公司 | A kind of parking garage map solution based on html5 |
| WO2018049869A1 (en) * | 2016-09-19 | 2018-03-22 | 华为技术有限公司 | Device and method for displaying extension point in page |
| CN107885538A (en) * | 2016-09-28 | 2018-04-06 | 北京京东尚科信息技术有限公司 | The method and apparatus that hot-zone link is added on picture |
| CN107885538B (en) * | 2016-09-28 | 2020-12-22 | 北京京东尚科信息技术有限公司 | Method and device for adding hot area links on picture |
| CN107241311A (en) * | 2017-05-15 | 2017-10-10 | 北京微影时代科技有限公司 | One kind selects seat method and device in real time |
| CN108053458A (en) * | 2017-12-08 | 2018-05-18 | 河海大学 | A kind of watershed generalization figure based on GIS-Geographic Information System makes and methods of exhibiting |
| CN110162354A (en) * | 2018-02-13 | 2019-08-23 | 北京嘀嘀无限科技发展有限公司 | Method, system and computer equipment for configuring and displaying components |
| CN110162354B (en) * | 2018-02-13 | 2022-05-13 | 北京嘀嘀无限科技发展有限公司 | Method, system and computer equipment for configuring and displaying components |
| CN109246389A (en) * | 2018-07-13 | 2019-01-18 | 高新兴科技集团股份有限公司 | A kind of method and apparatus being associated with monitoring point |
| CN111552901A (en) * | 2019-02-11 | 2020-08-18 | 福建省天奕网络科技有限公司 | Method and storage medium for H5 cross-engine client data automation updating |
| CN111552901B (en) * | 2019-02-11 | 2022-09-06 | 福建省天奕网络科技有限公司 | H5 cross-engine client data automation updating method and storage medium |
| CN110109423A (en) * | 2019-03-20 | 2019-08-09 | 北京中水科水电科技开发有限公司 | A kind of monitoring system of the real time data based on Html5 technology |
| CN112836002A (en) * | 2021-02-02 | 2021-05-25 | 长沙市到家悠享网络科技有限公司 | Map application method, device, equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104503755B (en) | 2018-02-13 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104503755A (en) | Dynamic information fusing and presenting method based on HTML5 (hypertext markup language 5) high-definition bitmaps | |
| CN107885848B (en) | Webpage screen capturing method based on web technology | |
| US8887132B1 (en) | Application runtime environment and framework | |
| CN109101425B (en) | Index point burying method and device for dynamic page AB test | |
| CN104216691B (en) | A kind of method and device for creating application | |
| CN101202748B (en) | Method for browsing web of micro browser and micro browser | |
| US20180191798A1 (en) | Methods and systems for server-side rendering of native content for presentation | |
| US20140089786A1 (en) | Automated Processor For Web Content To Mobile-Optimized Content Transformation | |
| CN105068815A (en) | Page editor interaction apparatus and method | |
| US20110167336A1 (en) | Gesture-based web site design | |
| CN104142826A (en) | Method, device and system for constructing page | |
| CN111611518A (en) | Automatic publishing method and system of visual display page based on Html5 | |
| WO2016054549A1 (en) | Application prototyping tool | |
| CN109375914A (en) | Information remote interaction method and system | |
| CN104267947A (en) | Method and device for editing popup picture | |
| CN109558323B (en) | System, method and apparatus for debugging pages | |
| CN104050238A (en) | Map labeling method and map labeling device | |
| US9781065B2 (en) | Lightweight application integration for mobile cloud computing | |
| WO2022048141A1 (en) | Image processing method and apparatus, and computer readable storage medium | |
| AU2014207384B2 (en) | Supporting user interactions with rendered graphical objects | |
| CN108268260A (en) | It is a kind of quick micro- using assemble method based on integrated support technology | |
| US9646362B2 (en) | Algorithm for improved zooming in data visualization components | |
| CN114371838A (en) | A kind of applet canvas rendering method, device, device and storage medium | |
| CN104834715A (en) | Website generating method and system based on components and container | |
| CN103729170A (en) | Method and system for displaying Web page |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |