CN107085518A - 一种大数据渲染方法 - Google Patents

一种大数据渲染方法 Download PDF

Info

Publication number
CN107085518A
CN107085518A CN201710249549.8A CN201710249549A CN107085518A CN 107085518 A CN107085518 A CN 107085518A CN 201710249549 A CN201710249549 A CN 201710249549A CN 107085518 A CN107085518 A CN 107085518A
Authority
CN
China
Prior art keywords
map
javascript
self
key element
layer
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.)
Pending
Application number
CN201710249549.8A
Other languages
English (en)
Inventor
王计斌
余健
侯潞
闫文卿
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Nanjing Hua Su Science And Technology Ltd
Original Assignee
Nanjing Hua Su Science And Technology Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Nanjing Hua Su Science And Technology Ltd filed Critical Nanjing Hua Su Science And Technology Ltd
Priority to CN201710249549.8A priority Critical patent/CN107085518A/zh
Publication of CN107085518A publication Critical patent/CN107085518A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/29—Geographical information databases
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/40—Filling a planar surface by adding surface attributes, e.g. colour or texture
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/00—3D [Three Dimensional] image rendering

Abstract

本发明提供一种基于ArcGIS API for JavaScript的大数据渲染方法，把需要渲染的要素的地理坐标换算成屏幕像素坐标；利用HTML5的CANVAS对百万级的要素进行渲染；放到地图里，跳过地图的接口，利用JavaScript获取地图的DIV，并将自定义图层插入地图所在的DIV中；监听地图的Pan和Extent‑Change，当地图范围变化时重新绘制CANVAS上的要素并渲染。该种基于ArcGIS API for JavaScript的大数据渲染方法，能彻底解决页面卡顿或者卡死的现象，使100万级数据量的渲染没有丝毫卡顿。该方法成功实现百万级要素地图快速渲染，并且可以和ArcGIS API for JavaScript完美集成。

Description

一种大数据渲染方法
技术领域
本发明涉及一种基于ArcGIS API for JavaScript的大数据渲染方法。
背景技术
目前WEB-GIS(网络地理信息系统)可视化技术研究已取得了一定的成果，但在提高海量数据的展示渲染方面仍有待进一步研究。
ArcGIS API for JavaScript是当前主流的WEB-GIS应用，ArcGIS API forJavaScript的地图控件中加载的图层为一个CANVAS，图层上每个要素为一个SVG(指可伸缩矢量图形)，这样的方式方便ArcGIS统一管理、监控、展示，但同时带来另一个问题就是海量数据渲染展示时将导致卡顿，当数据量超过4千的时候对客户端带来非常大的压力渲染延时非常严重，数量再增加至4万条的时候，地图上每次操作，都有可能引起浏览器的无法响应，极大的影响了展示效果和用户体验。
发明内容
基于此，有必要针对WEB-GIS海量数据渲染速度比较慢的问题，提供一种高效率的WEB-GIS海量数据渲染方法。
为了实现上述目标，本发明采用如下技术方案：
一种基于ArcGIS API for JavaScript的大数据渲染方法，包括以下步骤，
S1、创建HTML5中CANVAS对象作为自定义图层；
S2、将自定义图层插入ArcGIS API for JavaScript地图控件所在的DIV中；
S3、获取地图控件显示范围，并范围过滤需要展示和渲染的要素；
S4、将需要渲染要素的地理坐标换算成屏幕像素坐标；
S5、先清除自定义图层上的旧数据，再将新要素渲染到自定义图层上；
S6、监听地图控件的Pan和Extent-Change事件，地图范围发生变化重复S3、S4、S5、S6步骤。
进一步地，所述步骤S2将CANVAS作为自定义图层插入到地图控件所在DIV中，且插入的自定义图层不会影响地图控件的事件触发，包括单击、双击、移动。
进一步地，所述步骤S2中，像素转换是通过地图控件的显示范围与地图控件的比例尺，计算出真实坐标点在对应在自定义图层上的像素位置。
进一步地，所述步骤S5将需要渲染的新要素通过HTML5渲染在一个自定义图层CANVAS内。
本发明的有益效果是：将需要渲染的要素转换为屏幕坐标后一次性绘制在HTML5的CANVAS中渲染，然后将此CANVAS插入ArcGIS API for JavaScript地图所在DIV中，没有海量的SVG要素渲染过程，让渲染在瞬间完成，所以此发明彻底解决了ArcGIS API forJavaScript地图中加载海量数数据的问题。经过实测百万级要素的渲染时间不超过1秒，并且插入的CANVAS不影响ArcGIS API for JavaScript地图控件的事件触发，此发明与ArcGIS API for JavaScript完美集成。
附图说明
图1是本发明实施例基于ArcGIS API for JavaScript的大数据渲染方法的流程示意图。
图2是本发明实施例对102万条栅格数据的渲染效果示意图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
名词注释：
HTML5：万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言。
CANVAS：是元素用于在网页上绘制图形。
DIV：是用来为HTML文档内大块的内容提供结构和背景的元素。
SVG：可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集)，用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。
JavaScript：一种直译式脚本语言
ArcGIS API for JavaScript：ESRI根据JavaScript技术实现的调用ArcGISServer REST API接口的一组脚本。
Pan：地图控件移动事件，当地图移动的时候触发该事件。
Extent-Change：地图控件范围变化事件，当地图范围发生变化的时候触发该事件。
参见图1所示，一种基于ArcGIS API for JavaScript的大数据渲染方法，包括以下步骤：
步骤S1，创建HTML5中CANVAS对象作为自定义图层，然后进入步骤S2。
步骤S2，将步骤S1自定义图层插入ArcGIS API for JavaScript地图控件所在的DIV中，可以用html中DIV添加子元素的办法进行添加，注意的是不能通过ArcGIS API forJavaScript地图控件map添加图层的办法。
步骤S3，获取地图控件范围，并通过地图控件范围过滤需要展示和渲染的要素。地图控件范围是地图控件的自带函数。
步骤S4，将步骤S3中获取的要素的地理坐标转换为屏幕的像素坐标，此步骤像素转换，是通过地图控件的显示范围与地图控件的比例尺，计算出真实坐标点在对应在自定义图层上的像素位置。
步骤S5，先清除自定义图层上的旧数据，再将新要素渲染到自定义图层上。渲染的是将矢量数据，通过符号可视化展示出来，因为渲染方式不是本发明的重点，所以不做详细阐述。值得注意的是，将海量要素一次性渲染在一个CANVAS上，而ArcGIS API forJavaScript地图控件的渲染原理则是每个要素为一个SVG，可以理解成每个要素为一个CANVAS，在系统中就会有海量的CANVAS导致渲染效率低，延时严重。
步骤S6，监听地图控件的Pan和Extent-Change事件，地图范围或等级发生变化进入步骤S3，为了保证自定义图层中渲染的数据与地图控件的范围保持一致，所以当地图范围变化是需要重新筛选数据并在自定义图层上进行渲染。
步骤S6中，监听Pan和Extent-Change事件这两个事件是为了在地图范围或等级发生变化时重新绘制需要展示的要素，达到展示的要素与地图范围一致的目的。
图2是运用本发明将102万个栅格数据在地图控件中的渲染效果示意图，如果采用传统的数据渲染方式102万个栅格很可能直接导致浏览器无响应，正因为采用了本发明102万条数据渲染在1秒内完成，极大地提高了海量数据的渲染速度和效率。
通过以上方案可以看出，实施例的该种基于ArcGIS API for JavaScript的大数据渲染方法，通过对海量数据放在一个CANVAS上渲染，避免了传统方法中每个要素对应一个SVG(类似CANVAS)，渲染所带来的消耗时间长、渲染速度慢的问题，能够实时渲染出海量数据，极大地提高了海量数据的渲染速度和效率。
以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (4)

1.一种基于ArcGIS API for JavaScript的大数据渲染方法，其特征在于，包括以下步骤，
S1、创建HTML5中CANVAS对象作为自定义图层；
S2、将自定义图层插入ArcGIS API for JavaScript地图控件所在的DIV中；
S3、获取地图控件显示范围，并范围过滤需要展示和渲染的要素；
S4、将需要渲染要素的地理坐标换算成屏幕像素坐标；
S5、先清除自定义图层上的旧要素，再将新要素渲染到自定义图层上；
S6、监听地图控件的Pan和Extent-Change事件，地图范围或等级发生变化重复步骤S3、S4、S5、S6。
2.根据权利要求1所述的基于ArcGIS API for JavaScript的大数据渲染方法，其特征在于：所述步骤S2将CANVAS作为自定义图层插入到地图控件所在DIV中，且插入的自定义图层不会影响地图控件的事件触发，包括单击、双击、移动。
3.根据权利要求1所述的基于ArcGIS API for JavaScript的大数据渲染方法，其特征在于：所述步骤S2中，像素转换是通过地图控件的显示范围与地图控件的比例尺，计算出真实坐标点在对应在自定义图层上的像素位置。
4.根据权利要求1所述的基于ArcGIS API for JavaScript的大数据渲染方法，其特征在于：所述步骤S5将需要渲染的新要素通过HTML5渲染在一个自定义图层CANVAS内。
CN201710249549.8A 2017-04-17 2017-04-17 一种大数据渲染方法 Pending CN107085518A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710249549.8A CN107085518A (zh) 2017-04-17 2017-04-17 一种大数据渲染方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710249549.8A CN107085518A (zh) 2017-04-17 2017-04-17 一种大数据渲染方法

Publications (1)

Publication Number Publication Date
CN107085518A true CN107085518A (zh) 2017-08-22

Family

ID=59612627

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710249549.8A Pending CN107085518A (zh) 2017-04-17 2017-04-17 一种大数据渲染方法

Country Status (1)

Country Link
CN (1) CN107085518A (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109783177A (zh) * 2019-01-18 2019-05-21 成都新橙北斗智联有限公司 一种基于HTML5 Canvas的GIS栅格数据渲染方法
CN110032614A (zh) * 2019-04-18 2019-07-19 成都四方伟业软件股份有限公司 基于wasm的地图矢量渲染方法和装置
CN110930857A (zh) * 2019-05-31 2020-03-27 上海华兴数字科技有限公司 绘制散点的方法及装置
WO2021063169A1 (zh) * 2019-09-30 2021-04-08 中国科学院国家天文台南京天文光学技术研究所 基于半球正交函数的渲染方法

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104572107A (zh) * 2015-01-12 2015-04-29 浪潮软件股份有限公司 一种基于DOJOJavaScript的WebGIS开发框架构建方法及装置

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104572107A (zh) * 2015-01-12 2015-04-29 浪潮软件股份有限公司 一种基于DOJOJavaScript的WebGIS开发框架构建方法及装置

Non-Patent Citations (9)

* Cited by examiner, † Cited by third party
Title
CHENGQUAN223: "arcgis for js 4.0能不能添加自定义的canvas图层？", 《HTTP://ZHIHU.ESRICHINA.COM.CN/QUESTION/12847》 *
REXBRADFORD: "Is HTML5 canvas-driven layers part of the ArcGIS javascript toolkit"s future", 《HTTPS://COMMUNITY.ESRI.COM/THREAD/43802#COMMENTS》 *
WEBGIS开发: "ArcGIS API for JavaScript地图实现Toorbar功能", 《HTTPS://BLOG.CSDN.NET/ALLGIS/ARTICLE/DETAILS/9097173》 *
XIAOTIAN_小天: "ArcGIS api for javascript——加入地图并显示当前地图范围", 《HTTPS://WWW.CNBLOGS.COM/XIAOTIAN-222/P/6514434.HTML》 *
吥哩吥哩左卫门: "用Canvas打造高强度渲染SVG", 《HTTPS://BLOG.CSDN.NET/LBXX1984/ARTICLE/DETAILS/40988337》 *
周玲芳: "基于HTML5的WebGIS实时客户端设计", 《技术与方法》 *
张暑君: "《基于HTML 5的APP开发教程》", 30 November 2016 *
授之以渔: "Map学习(arcgis api for javascript3.18)", 《HTTPS://WWW.CNBLOGS.COM/Z964166725/P/6027506.HTML》 *
胡荣明: "《城市地铁测量安全技术》", 31 August 2013 *

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109783177A (zh) * 2019-01-18 2019-05-21 成都新橙北斗智联有限公司 一种基于HTML5 Canvas的GIS栅格数据渲染方法
CN109783177B (zh) * 2019-01-18 2022-02-11 成都新橙北斗智联有限公司 一种基于HTML5 Canvas的GIS栅格数据渲染方法
CN110032614A (zh) * 2019-04-18 2019-07-19 成都四方伟业软件股份有限公司 基于wasm的地图矢量渲染方法和装置
CN110930857A (zh) * 2019-05-31 2020-03-27 上海华兴数字科技有限公司 绘制散点的方法及装置
CN110930857B (zh) * 2019-05-31 2022-04-15 上海华兴数字科技有限公司 绘制散点的方法及装置
WO2021063169A1 (zh) * 2019-09-30 2021-04-08 中国科学院国家天文台南京天文光学技术研究所 基于半球正交函数的渲染方法

Similar Documents

Publication Publication Date Title
AU2017251816B2 (en) Rendering map images using modifications of non-raster map data
CN107085518A (zh) 一种大数据渲染方法
CN103853417B (zh) 网络动态图片的滚动分页显示方法和装置
US9424673B2 (en) Efficient composition and rendering of graphical elements
US20140340419A1 (en) Use of Map Data Difference Tiles to Iteratively Provide Map Data to a Client Device
CN105975576B (zh) 终端内容适配显示方法、装置和终端
CN104050185B (zh) 一种页面内容缩放显示处理方法及装置
CN105260170B (zh) 一种基于案例的突发事件态势推演方法及系统
CN106095437B (zh) 用户界面从右到左rtl的布局方式的实现方法及装置
CN104050238A (zh) 一种地图标注方法和装置
CN107992589B (zh) 一种svg地图数据的加载方法、装置及系统
CN110489943A (zh) 页面水印防篡改方法和系统
CN107450906A (zh) 一种用能信息采集系统配电接线图的绘制方法
CN105389167A (zh) 一种Web端实时船舶目标显示方法
CN107707965A (zh) 一种弹幕的生成方法和装置
CN105989166A (zh) 瀑布流式显示对象的方法、装置、系统及电子设备
CN101256595A (zh) 基于soa架构的多维空间数据展现方法
CN106488298B (zh) 一种在ui中图像绘制的方法及装置和电视
CN111063010A (zh) 地图运动轨迹动画实现方法、装置、电子设备及存储介质
CN114791988A (zh) 一种基于浏览器的pdf文件解析方法、系统、存储介质
CN103559342B (zh) 一种继电保护装置中液晶屏的仿真方法
CN102279854A (zh) 显示网页内容的方法和装置
CN102663137B (zh) 一种应用于移动终端中显示网页的方法及系统
US20130159889A1 (en) Obtaining Rendering Co-ordinates Of Visible Text Elements
CN111192339B (zh) 地理位置数据的渲染方法及装置

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
RJ01 Rejection of invention patent application after publication

Application publication date: 20170822

RJ01 Rejection of invention patent application after publication