CN116385610A - 地理信息系统中动态目标及标签的高性能渲染方法 - Google Patents

地理信息系统中动态目标及标签的高性能渲染方法 Download PDF

Info

Publication number
CN116385610A
CN116385610A CN202310105469.0A CN202310105469A CN116385610A CN 116385610 A CN116385610 A CN 116385610A CN 202310105469 A CN202310105469 A CN 202310105469A CN 116385610 A CN116385610 A CN 116385610A
Authority
CN
China
Prior art keywords
canvas
labels
information system
geographic information
custom
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
CN202310105469.0A
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 Hongsong Information Technology Co ltd
Original Assignee
Nanjing Hongsong Information Technology Co 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 Hongsong Information Technology Co ltd filed Critical Nanjing Hongsong Information Technology Co ltd
Priority to CN202310105469.0A priority Critical patent/CN116385610A/zh
Publication of CN116385610A publication Critical patent/CN116385610A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/00—3D [Three Dimensional] image rendering
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/60—Editing figures and text; Combining figures or text
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Theoretical Computer Science (AREA)
  • Computer Graphics (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明公开了一种地理信息系统中动态目标及标签的高性能渲染方法，步骤为：S1：通过canvas方法创建一个canvas画布；S2：在canvas画布上制作自定义标签；S3：制作svg格式矢量图片；S4：通过自定义标签进行重新编码，制作svg格式矢量图片；S5：在场景中插入svg格式矢量图片；S6：在地理信息系统的业务层获取生成的svg矢量图片，并放入地图中；S7：清空canvas画布的所有元素，完成一个动态目标的自定义标签；S8：重复步骤S1～步骤S7直至绘入与动态目标数量相对应的自定义标签。该方法实现了在不丢失任何样式、展示完全相同的前提下，用矢量图片大幅度提高了二三维地理信息系统的展示性能。

Description

地理信息系统中动态目标及标签的高性能渲染方法
技术领域
本发明涉及地理信息系统技术领域，具体涉及一种地理信息系统中动态目标及标签的高性能渲染方法。
背景技术
随着时代发展，二维地理信息系统中枯燥、简单的地理标签已经满足不了用户的要求，三维地理信息系统已经运用到生活中的方方面面。
特别是借助于三维展示技术和B/S架构相关技术的发展，在浏览器中进行三维地理信息系统展示的需求已经十分广泛，但是当需要在三维信息系统、整屏展示千级动态目标、并且每个动态目标均需对应展示目标标签的场景下，如动态航班场景、人口迁移场景、卫星轨迹场景、航天态势等场景下，已调研百度bmap地图开放平台、高德amap地图开放平台、Cesium三维地球引擎、MapBox地图开发平台等主流WebGIS框架中，使用框架自带的方法添加自定义标签时，普通的台式电脑中页面的渲染帧数低于5FPS，卡顿感十分明显、甚至出现页面崩溃等情况，用户体验极差。
中国专利申请(公开号：CN112269575A)公开了一种canvas绘制动态二维场景的方法，该方法具体包括下述步骤；步骤1：确定绘制原点center，设定center.X和center.Y；步骤2：利用JavaScript获取当前浏览器的文档宽度和高度所占像素大小，即宽度winWidth和高度winHeight，然后根据需要设置画布的宽高canvasWidth和canvasHeight；步骤3：将div作为canvas的父容器，通过动态的方式将canvas元素添加到div中；步骤4：设置多个画布，其中一个画布设置为可视画布_realCanvas，其他画布设置为不可视画布_notVisibleCanvas1、_notVisibleCanvas2,……_notVisibleCanvasN。但该技术方案侧重的是多个画布集中到一个画布中，做动画的2d运行动画，不能在gis上运用。
中国专利申请(公开号：CN112991508A)公开了一种基于WebGL的3D渲染系统及方法，包括场景对象库、特效库、动画框架库、矩形计算库、图形用户界面库和辅助模块库，其中，场景对象库包括场景对象模块、灯光对象模块、相机对象模块、材质对象模块、粒子对象模块、模型对象模块和纹理对象模块；动画框架库包括蒙皮动画模块和骨骼动画模块；矩形计算库包括向量计算模块和模型包围盒计算模块。但该技术方案侧重的是3d模型重新优化，给于webgl本身，优化模型的材质、色彩、纹理等3d模型的基本属性；和优化动态目标性能，无任何关系。
中国专利申请(公开号：CN113313799A)公开了一种动态图像处理方法、动态图像处理装置、终端应用及电子设备，该动态图像处理方法应用于终端，包括：将获取的初始动态图像进行拆帧以得到所述初始动态图像的每一帧初始图像的元数据；响应于针对所述初始图像的图像编辑操作，基于所述初始图像的元数据及所述图像编辑操作指示的图像渲染信息，在画布上对所述初始图像进行渲染以获得所述初始图像的目标图像；以及，按照每一帧初始图像在所述初始动态图像中的顺序，保存每一帧初始图像对应的目标图像，或者无图像编辑操作的初始图像和有图像编辑操作的初始图像对应的目标图像。这样，用户能够在终端基于自身的需求调整动态图像，提高了图像的处理速度和质量，并改善了用户便利。但该技术方案侧重gif这里动态图片进行拆帧，获取每一帧的图片，然后对每一张图片做处理。主要作用对动态图片的修改。
中国专利申请(公开号：CN114549720A)公开了一种实时渲染管线多目标优化方法，将功耗目标改为帧延时目标，从帧延时产生的负载原因着手，基于绘制命令、顶点着色器、片段着色器的相关数据，对实时渲染程序的帧延时及图形质量用线性模型、神经网络模型进行更准确的数值预测，并在原方法的基础上，针对帧延时对时间敏感的特性对线性模型做了必要的改进，引入着色器的相关参数对神经网络模型进行了优化。但该技术方案是应用在游戏引擎中，环境光贴图，阴影算法、抗锯齿等都是目前gis中不支持的功能。
因此，为了能顺利渲染千级的动态目标及其标签，保证三维地理信息系统背景正常使用，并且渲染帧数可以达到肉眼无法察觉到卡顿的25FPS以上，本发明提供了一种地理信息系统中动态目标及标签的高性能渲染方法。
发明内容
本发明要解决的技术问题是，提出一种地理信息系统中动态目标及标签的高性能渲染方法，即使在3D GIS中渲染大量动目标，如目标数量较多(参考超过2000及以上)、目标对应的标签较复杂(参考图标、文字描述等)、并且显示所有动目标对应的移动轨迹时，浏览器不会出现肉眼可见的卡顿，页面帧数能保持在25FPS以上。
为了解决上述技术问题，本发明采用的技术方案是：该地理信息系统中动态目标及标签的高性能渲染方法，具体包括以下步骤：
S1：通过canvas方法创建一个canvas画布，将后续的操作限制在所述canvas画布中；
S2：在canvas画布上制作自定义标签；
S3：在canvas画布上制作svg格式矢量图片；
S4：通过步骤S2中自定义标签进行重新编码，在canvas画布上制作svg格式矢量图片；
S5：使用二、三维场景绘制工具，在场景中插入svg格式矢量图片；
S6：在地理信息系统的业务层获取生成的svg矢量图片，并放入地图中；
S7：清空canvas画布的所有元素，完成一个动态目标的自定义标签；
S8：重复步骤S1～步骤S7直至绘入与动态目标数量相对应的自定义标签。
采用上述技术方案，使用WebGL提供的基础API在地图中插入动态目标、并加上文字类型标签，本质上是在浏览器中插入与之对应的多个DOM元素用于展示，但当动目标数量达到千级及以上时，由于浏览器渲染DOM元素的特性，浏览器势必会出现卡顿、帧数会下降等情况；通过类似的展示方式替代DOM元素插入，从而减少插入DOM元素的次数；矢量由于其特性在地理信息系统中的应用已经很广泛，包括地图背景瓦片的渲染等，矢量图形是良好的替代方案；将文字和图标等进行自定义绘制、制作矢量图片、再通过常规的技术框架API插入矢量图片；实现了在不丢失任何样式、展示完全相同的前提下，用矢量图片大幅度提高了二、三维地理信息系统的展示性能。
优选地，在所述步骤S1中通过canvas中创建2D画布的方法创建一个2D的canvas画布；创建2D画布的方法采用本领域技术人员常规现有的即可。
优选地，所述步骤S2中进行制作自定义标签，具体步骤为：
S21：使用canvas画布中用于填充属性颜色的方法fillStyle设置文字的大小和颜色属性；
S22：使用canvas画布中用于绘制一个矩形的方法fillReact设置文字的区域大小和位置；
S23：使用canvas画布中用于填充文字的方法fillText设置文字内容将所需要的文字放入canvas画布中；
S24：使用canvas画布中用于描绘矩形的边框的方法strokeRect设置文字区域的边框；
S25：使用canvas画布中用于设置边框的颜色属性的方法strokeStyle设置文字区域的边框的颜色属性；
S26：使用canvas画布中用于添加元素到固定容器的方法add将绘制好的自定义标签暂存在canvas画布中；
S27：使用canvas画布中控制元素样式的方法style进行标签的自定义样式设置并且给出明确的位置，获得自定义标签。
优选地，所述步骤S3的具体步骤为：
S31：将步骤S2中制作好的自定义标签使用svg的方法将自定义标签进行重新编码，获取路径；
S32：运用canvas画布中构建一个2D路径的构建函数path2D提取步骤S31中的获得的路径中的svg路径；
S33：使用canvas画布中将画布转为格式为base64位编码的方法toDataUrl获取图片路径，并重新放回canvas画布；
S34：使用canvas画布中绘制原图或者截取图片的方法DrawImage截图，并以svg格式导出svg矢量图片。
优选地，所述步骤S31中使用svg的foreginObject将自定义标签进行重新编码。
优选地，所述步骤S5中使用用于显示三维地球和地图的引擎Cesium自带的目标点插入应用程序编程接口API，使用用于显示三维地球和地图的引擎中插入文字和图片的方法Cesium.Resource.fetchImage插入svg矢量图片。
优选地，所述步骤S6中通过异步请求的方式Promise在地理信息系统的业务层获取生成的svg矢量图片。
优选地，在所述步骤S7中运用canvas画布中清除2D路径的函数clearPath清空canvas画布的所有元素。
与现有技术相比，该地理信息系统中动态目标及标签的高性能渲染方法具有的有益效果是：
(1)减少DOM元素插入：通过类似的展示方式替代DOM元素插入，从而减少插入DOM元素的次数；
(2)采用矢量图片替代展示；矢量由于其特性在地理信息系统中的应用已经很广泛，包括地图背景瓦片的渲染等，矢量图形是良好的替代方案；
(3)将文字和图标等进行自定义绘制、制作矢量图片、再通过常规的技术框架API插入矢量图片，实现了在不丢失任何样式、展示完全相同的前提下，用矢量图片大幅度提高了二、三维地理信息系统的展示性能。
附图说明
图1是本发明的地理信息系统中动态目标及标签的高性能渲染方法的流程图；
图2是本发明的地理信息系统中动态目标及标签的高性能渲染方法的基于地理信息系统的二、三维地图场景大数量级动态目标转为矢量的总体效果图和帧数展示图一；
图3是本发明的地理信息系统中动态目标及标签的高性能渲染方法的基于地理信息系统的二、三维地图场景大数量级动态目标转为矢量的细节效果图和帧数展示图二。
具体实施方式
下面将结合本发明的实施例图中的附图，对本发明实施例中的技术方案进行清楚、完整的描述。
实施例：Canvas是html5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，它是一个可以用JavaScript操作的位图，同时也是WebGL的主要承载体。
如图1所示，该地理信息系统中动态目标及标签的高性能渲染方法，具体包括以下步骤：
S1：通过canvas方法创建一个canvas画布，将后续的操作限制在所述canvas画布中；在所述步骤S1中通过canvas中创建2D画布的方法canvas.getContext("2d")创建一个2D的canvas画布
S2：在canvas画布上制作自定义标签；
所述步骤S2中使用canvas提供的方法进行制作自定义标签，具体步骤为：
S21：使用canvas画布中用于填充属性颜色的方法fillStyle设置文字的大小和颜色属性；
S22：使用canvas画布中用于绘制一个矩形的方法fillReact设置文字的区域大小和位置；
S23：使用canvas画布中用于填充文字的方法fillText设置文字内容将所需要的文字放入canvas画布中；
S24：使用canvas画布中用于描绘矩形的边框的方法strokeRect设置文字区域的边框；
S25：使用canvas画布中用于设置边框的颜色属性的方法strokeStyle设置文字区域的边框的颜色属性；
S26：使用canvas画布中用于添加元素到固定容器的方法add将绘制好的自定义标签暂存在canvas画布中；
S27：使用canvas画布中控制元素样式的方法style进行标签的自定义样式设置并且给出明确的位置，获得自定义标签；
S3：在canvas画布上制作svg格式矢量图片；
所述步骤S3的具体步骤为：
S31：将步骤S2中制作好的自定义标签使用svg的方法将自定义标签进行重新编码，获取路径；
S32：运用canvas画布中构建一个2D路径的构建函数path2D提取步骤S31中的获得的路径中的svg路径；
S33：使用canvas画布中将画布转为格式为base64位编码的方法toDataUrl获取图片路径，并重新放回canvas画布；
S34：使用canvas画布中绘制原图或者截取图片的方法DrawImage截图，并以svg格式导出svg矢量图片；
S4：通过步骤S2中自定义标签进行重新编码，在canvas画布上制作svg格式矢量图片；
S5：所述步骤S5中使用用于显示三维地球和地图的引擎Cesium自带的目标点插入应用程序编程接口API，使用用于显示三维地球和地图的引擎中插入文字和图片的方法Cesium.Resource.fetchImage插入svg矢量图片；
S6：在地理信息系统的业务层获取生成的svg矢量图片，并放入地图中；所述步骤S6中通过异步请求的方式Promise在地理信息系统的业务层获取生成的svg矢量图片；
S7：清空canvas画布的所有元素，完成一个动态目标的自定义标签；在所述步骤S7中运用canvas画布中清除2D路径的函数clearPath清空canvas画布的所有元素；
S8：重复步骤S1～步骤S7直至绘入与动态目标数量相对应的自定义标签。
如图2～3所示，采用上述地理信息系统中动态目标及标签的高性能渲染方法，基于地理信息系统二、三维地图场景大数量级动目标转为矢量的总体效果图和帧数展示图，在不丢失任何样式、展示完全相同的前提下，用矢量图片大幅度提高了二、三维地理信息系统的展示性能。
以上所述仅为本发明的较佳实施例而已，并不用于限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (8)

1.一种地理信息系统中动态目标及标签的高性能渲染方法，其特征在于，具体包括以下步骤：
S1：通过canvas方法创建一个canvas画布，将后续的操作限制在所述canvas画布中；
S2：在canvas画布上制作自定义标签；
S3：在canvas画布上制作svg格式矢量图片；
S4：通过步骤S2中自定义标签进行重新编码，在canvas画布上制作svg格式矢量图片；
S5：使用二、三维场景绘制工具，在场景中插入svg格式矢量图片；
S6：在地理信息系统的业务层获取生成的svg矢量图片，并放入地图中；
S7：清空canvas画布的所有元素，完成一个动态目标的自定义标签；
S8：重复步骤S1～步骤S7直至绘入与动态目标数量相对应的自定义标签。
2.根据权利要求1所述的地理信息系统中动态目标及标签的高性能渲染方法，其特征在于，在所述步骤S1中通过canvas中创建2D画布的方法创建一个2D的canvas画布。
3.根据权利要求1所述的地理信息系统中动态目标及标签的高性能渲染方法，其特征在于，所述步骤S2中进行制作自定义标签，具体步骤为：
S21：使用canvas画布中用于填充属性颜色的方法fillStyle设置文字的大小和颜色属性；
S22：使用canvas画布中用于绘制一个矩形的方法fillReact设置文字的区域大小和位置；
S23：使用canvas画布中用于填充文字的方法fillText设置文字内容将所需要的文字放入canvas画布中；
S24：使用canvas画布中用于描绘矩形的边框的方法strokeRect设置文字区域的边框；
S25：使用canvas画布中用于设置边框的颜色属性的方法strokeStyle设置文字区域的边框的颜色属性；
S26：使用canvas画布中用于添加元素到固定容器的方法add方法将绘制好的自定义标签暂存在canvas画布中；
S27：使用canvas画布中控制元素样式的方法style进行标签的自定义样式设置并且给出明确的位置，获得自定义标签。
4.根据权利要求3所述的地理信息系统中动态目标及标签的高性能渲染方法，其特征在于，所述步骤S3的具体步骤为：
S31：将步骤S2中制作好的自定义标签使用svg的方法将自定义标签进行重新编码，获取路径；
S32：运用canvas画布中构建一个2D路径的构建函数path2D提取步骤S31中的获得的路径中的svg路径；
S33：使用canvas画布中将画布转为格式为base64位编码的方法toDataUrl获取图片路径，并重新放回canvas画布；
S34：使用canvas画布中绘制原图或者截取图片的方法DrawImage截图，并以svg格式导出svg矢量图片。
5.根据权利要求4所述的地理信息系统中动态目标及标签的高性能渲染方法，其特征在于，所述步骤S31中使用svg格式中使矢量元素中间放入超文本标记语言的方法foreginObject将自定义标签进行重新编码。
6.根据权利要求4所述的地理信息系统中动态目标及标签的高性能渲染方法，其特征在于，所述步骤S5中使用用于显示三维地球和地图的引擎Cesium自带的目标点插入应用程序编程接口API，使用用于显示三维地球和地图的引擎中插入文字和图片的方法Cesium.Resource.fetchImage插入svg矢量图片。
7.根据权利要求4所述的地理信息系统中动态目标及标签的高性能渲染方法，其特征在于，所述步骤S6中通过异步请求的方式Promise在地理信息系统的业务层获取生成的svg矢量图片。
8.根据权利要求4所述的地理信息系统中动态目标及标签的高性能渲染方法，其特征在于，在所述步骤S7中运用canvas画布中清除2D路径的函数clearPath清空canvas画布的所有元素。
CN202310105469.0A 2023-02-13 2023-02-13 地理信息系统中动态目标及标签的高性能渲染方法 Pending CN116385610A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310105469.0A CN116385610A (zh) 2023-02-13 2023-02-13 地理信息系统中动态目标及标签的高性能渲染方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310105469.0A CN116385610A (zh) 2023-02-13 2023-02-13 地理信息系统中动态目标及标签的高性能渲染方法

Publications (1)

Publication Number Publication Date
CN116385610A true CN116385610A (zh) 2023-07-04

Family

ID=86970094

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310105469.0A Pending CN116385610A (zh) 2023-02-13 2023-02-13 地理信息系统中动态目标及标签的高性能渲染方法

Country Status (1)

Country Link
CN (1) CN116385610A (zh)

Similar Documents

Publication Publication Date Title
US10984177B2 (en) System and method providing responsive editing and viewing, integrating hierarchical fluid components and dynamic layout
CN110956673A (zh) 一种地图绘制方法及装置
CN107832108A (zh) 3D canvas网页元素的渲染方法、装置及电子设备
JP5037574B2 (ja) 画像ファイル生成装置、画像処理装置、画像ファイル生成方法、および画像処理方法
US10789770B1 (en) Displaying rich text on 3D models
CN109636885B (zh) 一种用于h5页面的序列帧动画制作方法和系统
CN112070864A (zh) 动画渲染方法、装置、计算机可读存储介质和计算机设备
CN112073794B (zh) 动画处理方法、装置、计算机可读存储介质和计算机设备
CN111221596B (zh) 字体渲染方法、装置及计算机可读存储介质
CN112102422B (zh) 图像处理方法及装置
CN113516666A (zh) 图像裁剪方法、装置、计算机设备及存储介质
CN115439609B (zh) 基于地图服务的三维模型渲染方法、系统、设备及介质
CN109118556A (zh) 一种实现ui界面动画过渡效果的方法、系统及存储介质
CN107707965A (zh) 一种弹幕的生成方法和装置
CN108830794B (zh) 高斯投影的pdf地图跨图幅无缝拼接显示方法
CN116954605A (zh) 页面生成方法、装置及电子设备
CN111179390B (zh) 高效预览cg资产的方法和装置
CN116385610A (zh) 地理信息系统中动态目标及标签的高性能渲染方法
CN111402369A (zh) 互动广告的处理方法、装置、终端设备及存储介质
CN113691835B (zh) 视频植入方法、装置、设备及计算机可读存储介质
CN115391692A (zh) 视频处理方法和装置
JP4260747B2 (ja) 動画像構成方法及びシーン構成方法
CN114625990A (zh) 用于对网页端网格数据渲染的方法、装置、设备和介质
CN110662099B (zh) 用于显示弹幕的方法和装置
CN112184874A (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