CN109783177A - A kind of GIS grid data rendering method based on HTML5 Canvas - Google Patents
A kind of GIS grid data rendering method based on HTML5 Canvas Download PDFInfo
- Publication number
- CN109783177A CN109783177A CN201910051463.3A CN201910051463A CN109783177A CN 109783177 A CN109783177 A CN 109783177A CN 201910051463 A CN201910051463 A CN 201910051463A CN 109783177 A CN109783177 A CN 109783177A
- Authority
- CN
- China
- Prior art keywords
- color
- raster data
- array
- typedarray
- coordinate
- 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
Landscapes
- Processing Or Creating Images (AREA)
Abstract
The invention discloses a kind of GIS grid data rendering methods based on HTML5 Canvas, this method uses the pixel operation interface of HTML5 Canvas, GIS raster data is rendered in a browser, can effectively solve the problems, such as under different scale that raster data pixel edge is fuzzy, can Additional Specialty personnel data are accurately visualized in practical business, are analyzed.And the customized symbolism rendering in front end can be carried out, the advanced symbolism rendering effects such as massif shade, classification rendering can be realized in Front End in the case where not depending on server-side rendering.
Description
Technical field
The present invention relates to field of image processing more particularly to a kind of GIS raster data renderings based on HTML5 Canvas
Method.
Background technique
With the development of browser technology and the release of HTML5 technology, the rendering capability of browser is substantially improved, therefore
Many rendering effects that can only be completed in desktop programs in the past can be completed in front end page, and guarantee higher rendering effect
Rate.WebGIS is a kind of GIS component based on browser technology, and the WebGIS component of mainstream is in the browser for supporting HTML at present
In rendered in a manner of Canvas.When carrying out raster data rendering with HTML5 Canvas, mainstream technology is at present with original
Raw picture is drawn API and is rendered, and when zooming in and out, browser underlying graphics API can carry out automatically pixel smooth interpolation and go forward side by side
Row is drawn, and fuzzy rendering effect is caused.Due to the particularity of GIS raster data application mode, in fields such as water conservancy, meteorologies
In, aforesaid way has following defect: fuzzy grid rendering effect will cause boundary judge it is unintelligible, in turn result in observation and
Analytical error；Raster data can only be generated as picture in advance in server-side, be then communicated to front end with browser graphic API
The picture is drawn, symbolism rendering cannot be carried out in front end, lack flexibility.
Summary of the invention
It is an object of the present invention to realize the front end symbolism rendering of browser, flexibility is improved, one kind is provided and is based on
The GIS grid data rendering method of HTML5 Canvas.
A kind of GIS grid data rendering method based on HTML5 Canvas, this method use the picture of HTML5 Canvas
Plain operation interface in a browser renders GIS raster data, comprising the following steps:
S1: judging that raster data georeferencing is referred to identical or whether can be converted mutually with map current spatial, if
Can, then enter S2, as cannot if terminate；
S2: carrying out spatial filtering, i.e. to map changing coordinates range and raster data coordinate range asks friendship, if intersection,
Reading intersection raster data is denoted as raster data TypedArray array to be terminated if non-intersecting；
S3: raster data value and color mapping table are read；
S4: initializing color TypedArray array, raster data obtained in the dimension and step S2 in array
TypedArray array dimension is equal；
S5: traversing the raster data TypedArray array read in step S2, if pixel value is invalid value,
It is mapped as specifying invalid color and color TypedArray array is written, color is otherwise obtained according to color mapping table in step S3
And color TypedArray array is written；
S6: intersected with raster data coordinate range as a result, calculating face according to gained map reference range in the step S2
Matching coordinate of the color TypedArray array under map pixel coordinate system, and color TypedArray array is transferred to
HTML5 Canvas context calls batch pixel graphing API to be drawn；
S7: traversal map All Layers are merged according to rendering result of the Layer Order to each figure layer；
S8: refresh map.
Further, the georeferencing in the step S1 includes that WGS84 geographic coordinate system and Web Mercator projection are sat
Mark system, conversion formula are as follows:
Web Mercator's coordinate system formula is switched to by 84 coordinate system of WGS are as follows:
Switch to the formula of 84 coordinate system of WGS by Web Mercator's coordinate system are as follows:
Wherein x, y are Web Mercator coordinate, and r is earth radius, and lon is longitude, and lat is latitude.
Further, map changing coordinates range and raster data coordinate range seek the formula of handing over to the collective or the state in the step S2
Are as follows:
Fleft=max (MleftRleft)；
Fright=min (MrightRright)；
Fbottom=max (MbottomRbottom)；
Ftop=min (MtopRtop)；
Wherein M is map reference, and R is grid coordinate, and F is intersection coordinate.
Further, amalgamation mode employed in the step S7 is Alpha hybrid mode, Alpha
Mixed formula are as follows:Wherein, C12For mixed color value, C1、C2For color
Value, a1、a2For the corresponding transparency of color.
It further, further include the raster data step read for grid rendering.
The utility model has the advantages that the present invention is rendered using HTML5 Canvas in a browser, can effectively solve not on year-on-year basis
The fuzzy problem of raster data pixel edge under example ruler, can Additional Specialty personnel data are carried out in practical business it is accurate
Visualization, analysis.And front end customized symbolism rendering can be carried out in the case where not depending on server-side rendering, it can be with
The advanced symbolism rendering effects such as massif shade, classification rendering are realized in Front End.
Detailed description of the invention
Fig. 1 is method flow diagram
Fig. 2 is spatial filtering schematic diagram
Specific embodiment
The present invention will be further described with reference to the accompanying drawing, but protection scope of the present invention be not limited to it is as described below
As shown in figure, a kind of GIS grid data rendering method based on HTML5 Canvas, this method use HTML5
The pixel operation interface of Canvas, in a browser renders GIS raster data, comprising the following steps:
S1: judging that raster data georeferencing is referred to identical or whether can be converted mutually with map current spatial, if
Can, then enter S2, as cannot if terminate；
S2: carrying out spatial filtering, i.e. to map changing coordinates range and raster data coordinate range asks friendship, if intersection,
Reading intersection raster data is denoted as raster data TypedArray array to be terminated if non-intersecting；
S3: raster data value and color mapping table are read；
S4: initializing color TypedArray array, raster data obtained in the dimension and step S2 in array
TypedArray array dimension is equal；
S5: traversing the raster data TypedArray array read in step S2, if pixel value is invalid value,
It is mapped as specifying invalid color and color TypedArray array is written, color is otherwise obtained according to color mapping table in step S3
And color TypedArray array is written；
S6: intersected with raster data coordinate range as a result, calculating face according to gained map reference range in the step S2
Matching coordinate of the color TypedArray array under map pixel coordinate system, and color TypedArray array is transferred to
HTML5 Canvas context calls batch pixel graphing API to be drawn；
S7: traversal map All Layers are merged according to rendering result of the Layer Order to each figure layer；
S8: refresh map.
Further, the color TypedArray array is the one piece of memory space newly opened up, and is calculated for storing
The color value of gained color, dimension size is equal with raster data TypedArray array dimension, raster data TypedArray
The element in element and color TypedArray array in array corresponds, in step s 5 one by one to color
Element in TypedArray array carries out assignment.
Further, the georeferencing in the step S1 includes that WGS84 geographic coordinate system and Web Mercator projection are sat
Mark system, conversion formula are as follows:
Web Mercator's coordinate system formula is switched to by 84 coordinate system of WGS are as follows:
Switch to the formula of 84 coordinate system of WGS by Web Mercator's coordinate system are as follows:
Wherein x, y are Web Mercator coordinate, and r is earth radius, and lon is longitude, and lat is latitude.
Further, as shown in Fig. 2, map changing coordinates range and raster data coordinate range in the step S2
Seek the formula of handing over to the collective or the state are as follows:
Fleft=max (MleftRleft)；
Fright=min (MrightRright)；
Fbottom=max (MbottomRbottom)；
Ftop=min (MtopRtop)；
Wherein M is map reference, and R is grid coordinate, and F is intersection coordinate.
Further, amalgamation mode employed in the step S7 is Alpha hybrid mode, Alpha
Mixed formula are as follows:Wherein, C12For mixed color value, C1、C2For color
Value, a1、a2For the corresponding transparency of color.
It further, further include the raster data step read for grid rendering
The utility model has the advantages that the present invention is rendered using HTML5 Canvas in a browser, can effectively solve not on year-on-year basis
The fuzzy problem of raster data pixel edge under example ruler, can Additional Specialty personnel data are carried out in practical business it is accurate
Visualization, analysis.And front end customized symbolism rendering can be carried out in the case where not depending on server-side rendering, it can be with
The advanced symbolism rendering effects such as massif shade, classification rendering are realized in Front End.
The above shows and describes the basic principles and main features of the present invention and the advantages of the present invention.The technology of the industry
Personnel are it should be appreciated that the present invention is not limited to the above embodiments, and the above embodiments and description only describe this
The principle of invention, without departing from the spirit and scope of the present invention, various changes and improvements may be made to the invention, these changes
Change and improvement all fall within the protetion scope of the claimed invention.The claimed scope of the invention by appended claims and its
Equivalent thereof.
Claims (5)
1. a kind of GIS grid data rendering method based on HTML5 Canvas, which is characterized in that this method uses HTML5
The pixel operation interface of Canvas, in a browser renders GIS raster data, comprising the following steps:
S1: judging that raster data georeferencing is referred to identical or whether can be converted mutually with map current spatial, if can,
Into S2, as cannot if terminate；
S2: carrying out spatial filtering, i.e. to map changing coordinates range and raster data coordinate range asks friendship, if intersection, reads
Intersection raster data is denoted as raster data TypedArray array to be terminated if non-intersecting；
S3: raster data value and color mapping table are read；
S4: initializing color TypedArray array, raster data obtained in the dimension and step S2 in array
TypedArray array dimension is equal；
S5: traversing the raster data TypedArray array read in step S2, if pixel value is invalid value, maps
To specify invalid color and color TypedArray array being written, color is otherwise obtained according to color mapping table in step S3 and is write
Enter color TypedArray array；
S6: intersected with raster data coordinate range as a result, calculating color according to gained map reference range in the step S2
Matching coordinate of the TypedArray array under map pixel coordinate system, and color TypedArray array is transferred to HTML5
Canvas context calls batch pixel graphing API to be drawn；
S7: traversal map All Layers are merged according to rendering result of the Layer Order to each figure layer；
S8: refresh map.
2. a kind of GIS grid data rendering method based on HTML5 Canvas as described in claim 1, which is characterized in that
Georeferencing in the step S1 includes WGS84 geographic coordinate system and Web Mercator projection coordinate system, conversion formula
Are as follows:
Web Mercator's coordinate system formula is switched to by 84 coordinate system of WGS are as follows:
Switch to the formula of 84 coordinate system of WGS by Web Mercator's coordinate system are as follows:
Wherein x, y are Web Mercator coordinate, and r is earth radius, and lon is longitude, and lat is latitude.
3. a kind of GIS grid data rendering method based on HTML5 Canvas as described in claim 1, which is characterized in that
Map changing coordinates range and raster data coordinate range seeks the formula of handing over to the collective or the state in the step S2 are as follows:
Fleft=max (MleftRleft)；
Fright=min (MrightRright)；
Fbottom=max (MbottomRbottom)；
Ftop=min (MtopRtop)；
Wherein M is map reference, and R is grid coordinate, and F is intersection coordinate.
4. a kind of GIS grid data rendering method based on HTML5 Canvas as described in claim 1, which is characterized in that
Amalgamation mode employed in the step S7 is Alpha hybrid mode, the formula of Alpha mixing are as follows:
Wherein, C12For mixed color value, C1、C2For color value, a1、a2For the corresponding transparency of color.
5. a kind of GIS grid data rendering method based on HTML5 Canvas as described in claim 1, which is characterized in that
It further include the raster data step read for grid rendering.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910051463.3A CN109783177B (en) | 2019-01-18 | 2019-01-18 | GIS raster data rendering method based on HTML5Canvas |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910051463.3A CN109783177B (en) | 2019-01-18 | 2019-01-18 | GIS raster data rendering method based on HTML5Canvas |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109783177A true CN109783177A (en) | 2019-05-21 |
| CN109783177B CN109783177B (en) | 2022-02-11 |
Family
ID=66501618
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910051463.3A Active CN109783177B (en) | 2019-01-18 | 2019-01-18 | GIS raster data rendering method based on HTML5Canvas |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109783177B (en) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111198975A (en) * | 2019-12-25 | 2020-05-26 | 上海杰狮信息技术有限公司 | Grid-based space-time big data visualization method and visualization system |
| CN111368239A (en) * | 2020-05-27 | 2020-07-03 | 航天宏图信息技术股份有限公司 | Method and system for processing raster data |
| CN112835668A (en) * | 2021-02-05 | 2021-05-25 | 北京恒泰实达科技股份有限公司 | Meteorological data reading and product display visualization system and method |
| CN112836002A (en) * | 2021-02-02 | 2021-05-25 | 长沙市到家悠享网络科技有限公司 | Map application method, device, equipment and storage medium |
| CN113486003A (en) * | 2021-06-02 | 2021-10-08 | 广州数说故事信息科技有限公司 | Enterprise data set processing method and system considering abnormal values during data visualization |
| CN114491351A (en) * | 2022-04-18 | 2022-05-13 | 北京航空航天大学杭州创新研究院 | Lattice point data visualization method and system adaptable to WebGIS platform |
| CN115965752A (en) * | 2022-12-19 | 2023-04-14 | 中科三清科技有限公司 | Method and device for generating environment data distribution diagram, storage medium and electronic equipment |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104240273A (en) * | 2014-09-18 | 2014-12-24 | 百度在线网络技术（北京）有限公司 | Raster image processing method and device |
| CN107085518A (en) * | 2017-04-17 | 2017-08-22 | 南京华苏科技有限公司 | A kind of big data rendering intent |
-
2019
- 2019-01-18 CN CN201910051463.3A patent/CN109783177B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104240273A (en) * | 2014-09-18 | 2014-12-24 | 百度在线网络技术（北京）有限公司 | Raster image processing method and device |
| CN107085518A (en) * | 2017-04-17 | 2017-08-22 | 南京华苏科技有限公司 | A kind of big data rendering intent |
Non-Patent Citations (1)
| Title |
|---|
| 龙云: "基于HTML5的WebGIS研究", 《中国优秀硕士学位论文全文数据库 基础科学辑》 * |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111198975A (en) * | 2019-12-25 | 2020-05-26 | 上海杰狮信息技术有限公司 | Grid-based space-time big data visualization method and visualization system |
| CN111198975B (en) * | 2019-12-25 | 2023-12-01 | 上海杰狮信息技术有限公司 | Grid-based space-time big data visualization method and system |
| CN111368239A (en) * | 2020-05-27 | 2020-07-03 | 航天宏图信息技术股份有限公司 | Method and system for processing raster data |
| CN112836002A (en) * | 2021-02-02 | 2021-05-25 | 长沙市到家悠享网络科技有限公司 | Map application method, device, equipment and storage medium |
| CN112835668A (en) * | 2021-02-05 | 2021-05-25 | 北京恒泰实达科技股份有限公司 | Meteorological data reading and product display visualization system and method |
| CN112835668B (en) * | 2021-02-05 | 2024-02-20 | 北京恒泰实达科技股份有限公司 | Meteorological data reading and product display visualization system and method |
| CN113486003A (en) * | 2021-06-02 | 2021-10-08 | 广州数说故事信息科技有限公司 | Enterprise data set processing method and system considering abnormal values during data visualization |
| CN113486003B (en) * | 2021-06-02 | 2024-03-19 | 广州数说故事信息科技有限公司 | Enterprise data set processing method and system considering abnormal values in data visualization |
| CN114491351A (en) * | 2022-04-18 | 2022-05-13 | 北京航空航天大学杭州创新研究院 | Lattice point data visualization method and system adaptable to WebGIS platform |
| CN114491351B (en) * | 2022-04-18 | 2022-08-23 | 北京航空航天大学杭州创新研究院 | Lattice point data visualization method and system adaptable to WebGIS platform |
| CN115965752A (en) * | 2022-12-19 | 2023-04-14 | 中科三清科技有限公司 | Method and device for generating environment data distribution diagram, storage medium and electronic equipment |
| CN115965752B (en) * | 2022-12-19 | 2023-09-01 | 中科三清科技有限公司 | Method and device for generating environment data distribution map, storage medium and electronic equipment |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109783177B (en) | 2022-02-11 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109783177A (en) | A kind of GIS grid data rendering method based on HTML5 Canvas | |
| CN108052642A (en) | Electronic Chart Display method based on tile technology | |
| CN108573279A (en) | Image labeling method and terminal device | |
| CN110738722B (en) | Thermodynamic diagram texture generation method, device and equipment | |
| CN112380357B (en) | Method for realizing interactive navigation of knowledge graph visualization | |
| CN101908202B (en) | Method for fast displaying electronic chart | |
| DE102015113240A1 (en) | SYSTEM, METHOD AND COMPUTER PROGRAM PRODUCT FOR SHADING USING A DYNAMIC OBJECT ROOM GATE | |
| US11054969B2 (en) | Method and device for displaying page of electronic book, and terminal device | |
| CN103970859B (en) | Google user map text labeling method based on SVG | |
| EA022882B1 (en) | Systems and methods for imaging a three-dimensional volume of geometrically irregular grid data representing a grid volume | |
| CN108734624A (en) | Method and apparatus for handling figure | |
| US9176662B2 (en) | Systems and methods for simulating the effects of liquids on a camera lens | |
| Touya et al. | Clutter and map legibility in automated cartography: A research agenda | |
| CN101887592A (en) | Drawing method for vector graphic map symbols | |
| CN106575429A (en) | High order filtering in a graphics processing unit | |
| CN108133454A (en) | Model space geometric image switching method, device, system and interactive device | |
| CN115439609B (en) | Three-dimensional model rendering method, system, equipment and medium based on map service | |
| CN110516015A (en) | Method based on map graph data and DLG production geography PDF map | |
| CN111091620B (en) | Map dynamic road network processing method and system based on graphics and computer equipment | |
| CN109712225B (en) | Rendering method, device, equipment and storage medium of surface object | |
| CN110428504B (en) | Text image synthesis method, apparatus, computer device and storage medium | |
| CN108537718A (en) | A kind of device and method for realizing some pel anti-aliasings in GPU | |
| CN106575428A (en) | High order filtering in a graphics processing unit | |
| CN108830794B (en) | Cross-map seamless splicing display method for PDF map of Gaussian projection | |
| CN107729511B (en) | Customizable geographic information data rectangular framing method |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |