CN111324837B - web前端基于GIS系统的三维图表可视化方法及装置 - Google Patents

web前端基于GIS系统的三维图表可视化方法及装置 Download PDF

Info

Publication number
CN111324837B
CN111324837B CN202010097400.4A CN202010097400A CN111324837B CN 111324837 B CN111324837 B CN 111324837B CN 202010097400 A CN202010097400 A CN 202010097400A CN 111324837 B CN111324837 B CN 111324837B
Authority
CN
China
Prior art keywords
chart
dimensional
canvas
dimensional chart
gis system
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.)
Active
Application number
CN202010097400.4A
Other languages
English (en)
Other versions
CN111324837A (zh
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.)
Shenzhen Genew Technologies Co Ltd
Original Assignee
Shenzhen Genew Technologies 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 Shenzhen Genew Technologies Co Ltd filed Critical Shenzhen Genew Technologies Co Ltd
Priority to CN202010097400.4A priority Critical patent/CN111324837B/zh
Publication of CN111324837A publication Critical patent/CN111324837A/zh
Application granted granted Critical
Publication of CN111324837B publication Critical patent/CN111324837B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • 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
    • 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)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Remote Sensing (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本申请涉及web前端基于GIS系统的三维图表可视化方法及装置，所述方法包括：通过echarts绘制出二维图表并得到canvas画布；通过three.js加载所述二维图表的canvas画布并做渲染，连接canvas图表与GIS系统；并通过THREE.PlaneGeometry搭载三维图表；通过mapboxgl.js加载three.js场景到地图中，生成三维图表；开发三维图片的旋转平移缩放功能，让成型的三维图表自由以任意角度附着在三维体表面呈现效果。本发明提供了一种在web前端基于GIS系统的三维图表可视化方法，更加直观地展示真实业务的图表数据，为用户的使用提供了方便，并且实现简单，可靠性高。

Description

web前端基于GIS系统的三维图表可视化方法及装置
技术领域
本申请涉及web前端图表可视化数据处理技术领域，特别是涉及一种web前端基于GIS系统的三维图表可视化方法及装置、计算机设备、可读存储介质。
背景技术
在web前端使用图表可视化数据早已是成熟技术。各大开源的图表库已很好地支持了数据图表的可视化，例如echarts、highcharts等。目前也常常可以在各种可视化系统、管理系统中看到漂亮的折线图、饼图。但如果想要在GIS系统中绘制并应用图表，只是将已有的开源图表整合进去是不够的，已有图表都只是使用html5标准，绘制在canvas标签上的元素，一般只应用在扁平显示的网页中才有很好地效果，并不能直接立体呈现在GIS系统中。
而在GIS系统中有大量数据需要依托图表去呈现，但现有技术中有没有一种可以将已有开源图表库结合GIS系统立体呈现使用，不方便用户使用。
因此，现有技术有待改进。
发明内容
本发明针对上述现有技术中的技术问题，提供一种web前端基于GIS系统的三维图表可视化方法及装置、计算机设备、可读存储介质，本发明提供了一种在web前端基于GIS系统的三维图表可视化方法，可将已有开源图表库结合GIS系统立体呈现使用，使立体起来的图表直接呈现在GIS系统的建筑上、三维模型表面，结合GIS系统能够明确可视化真实物体地理位置模型形状的特色，更加直观地展示真实业务的图表数据，为用户的使用提供了方便，并且实现简单，可靠性高。
本发明的技术方案如下：
一种web前端基于GIS系统的三维图表可视化方法，其中，所述方法包括：
选用指定的开源开发环境工具，采用开源技术搭建webgis系统；
通过echarts绘制出二维图表并得到canvas画布；
通过three.js加载所述二维图表的canvas画布并做渲染，连接canvas图表与GIS系统；并通过THREE.PlaneGeometry搭载三维图表；
通过mapboxgl.js加载three.js场景到地图中，生成三维图表；
开发三维图片的旋转平移缩放功能，让成型的三维图表自由以任意角度附着在三维体表面呈现效果。
所述web前端基于GIS系统的三维图表可视化方法，其中，所述采用开源技术搭建webgis系统的步骤包括：
选用指定的开源开发环境工具，选择mapboxgl.js和three.js、echarts作为开发工具；
通过mapboxgl.js将three.js作为一个图层单独渲染在地图中，通过three.js的接口把echarts图表渲染到对应的实体中；通过echarts图表库的资源完成三维图表功能；
采用开源技术搭建webgis系统。
所述web前端基于GIS系统的三维图表可视化方法，其中，所述通过echarts绘制出二维图表并得到canvas画布的步骤包括：
通过echarts绘制出二维图表；
通过echarts实例自带的方法获取canvas画布，将canvas画布作为数据源在three.js中进行加载，为后续的三维图表做基础。
所述web前端基于GIS系统的三维图表可视化方法，其中，所述通过three.js加载所述二维图表的canvas画布并做渲染，连接canvas图表与GIS系统；并通过THREE.PlaneGeometry搭载三维图表的步骤包括：
在three.js中通过THREE.PlaneGeometry创造空间平面实体；
用THREE.PlaneGeometry创造的平面实体承载canvas绘制的图表；
将材质应用于平面实体上，得到最终承载了图表内容的三维平面meshplane并在地图上得到渲染结果；得到一绘制正确canvas图表内容的three.js场景。
所述web前端基于GIS系统的三维图表可视化方法，其中，所述通过mapboxgl.js加载three.js场景到地图中，生成三维图表的步骤包括：
通过mapboxgl.js加载three.js场景到地图中；
利用将three.js产生的场景作为mapboxgl.js的一个图层加入其中，完成渲染；
完成从three.js场景到webgis系统的转移，实现由charts绘制canvas容器图表到three.js场景加载图表，再到mapboxgl.js加载three.js场景的整条工作流，实现了三维图表的创造。
所述web前端基于GIS系统的三维图表可视化方法，其中，所述开发三维图片的旋转平移缩放功能，让成型的三维图表自由以任意角度附着在三维体表面呈现效果的步骤包括：
开设沿x、y、z进行平移的接口；
对进行绘制了图表的平面实体进行位移，分别调用three.js的平移方法translateX，translateY，translateZ；并设置沿x、y、z进行旋转的接口。
一种web前端基于GIS系统的三维图表可视化装置，其中，所述装置包括：
选择模块，用于控制选用指定的开源开发环境工具，采用开源技术搭建webgis系统；
绘制模块，用于通过echarts绘制出二维图表并得到canvas画布；
加载与渲染模块，用于通过three.js加载所述二维图表的canvas画布并做渲染，连接canvas图表与GIS系统；并通过THREE.PlaneGeometry搭载三维图表；
三维图表生成模块，用于通过mapboxgl.js加载three.js场景到地图中，生成三维图表；
功能开发与效果展示模块，用于控制开发三维图片的旋转平移缩放功能，让成型的三维图表自由以任意角度附着在三维体表面呈现效果。
所述web前端基于GIS系统的三维图表可视化装置，其中，所述选择模块包括：
选择单元，用于选用指定的开源开发环境工具，选择mapboxgl.js和three.js、echarts作为开发工具；
渲染单元，用于通过mapboxgl.js将three.js作为一个图层单独渲染在地图中，通过three.js的接口把echarts图表渲染到对应的实体中；通过echarts图表库的资源完成三维图表功能；
搭建单元，用于采用开源技术搭建webgis系统。
一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其中，所述处理器执行所述计算机程序时实现任一项所述web前端基于GIS系统的三维图表可视化方法的步骤。
一种计算机可读存储介质，其上存储有计算机程序，其中，所述计算机程序被处理器执行时实现权任一项所述的web前端基于GIS系统的三维图表可视化方法的步骤。
与现有技术相比，本发明实施例具有以下优点：
提供一种web前端基于GIS系统的三维图表可视化方法及装置、计算机设备、可读存储介质，本发明可将已有开源图表库结合GIS系统立体呈现通过，使立体起来的图表直接呈现在GIS系统的建筑上、三维模型表面，结合GIS系统能够明确可视化真实物体地理位置模型形状的特色，更加直观地展示真实业务的图表数据，为用户的使用提供了方便，并且实现简单，可靠性高。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例的一种web前端基于GIS系统的三维图表可视化方法的流程示意图。
图2为本发明实施例的一种web前端基于GIS系统的三维图表可视化方法的使用echarts绘制一个简单的图表示意图。
图3为本发明实施例的一种web前端基于GIS系统的三维图表可视化方法的承载了图表内容的三维平面示意图。
图4为本发明实施例的一种web前端基于GIS系统的三维图表可视化方法的三维图表可视化效果示意图。
图5为本发明实施例中一种web前端基于GIS系统的三维图表可视化装置的结构示意图。
图6为本发明实施例中计算机设备的内部结构图。
具体实施方式
为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
发明人经过研究发现，现有技术中而在GIS系统中有大量数据需要依托图表去呈现，但现有技术中有没有一种可以将已有开源图表库结合GIS系统立体呈现使用，不方便用户使用的技术问题。
为了解决上述问题，在本发明实施例中，下面结合附图，详细说明本发明的各种非限制性实施方式。
请参阅图1，图1示出了本发明实施例一种web前端基于GIS系统的三维图表可视化方法，所述方法包括以下步骤：
步骤S1、选用指定的开源开发环境工具，采用开源技术搭建webgis系统。
例如，本发明中选用指定的开源开发环境工具，选择mapboxgl.js和three.js、echarts作为开发工具；通过mapboxgl.js将three.js作为一个图层单独渲染在地图中，通过three.js的接口把echarts图表渲染到对应的实体中；使用echarts图表库的资源完成三维图表功能；采用开源技术搭建webgis系统。
具体地，mapboxgl.js和three.js均是世界级开源图形引擎。mapboxgl.js是webgis领域的地图开源引擎，用作地理信系统。three.js是web端通用引擎，有丰富的社区开发组件和积累，高度抽象的图形绘制和拓展丰富的接口。echarts作为web前端界最出名的开源图表库，多年开发积累出配置丰富、种类繁多的各类图表。
本步骤的好处是:采用开源技术能够在最短时间内搭建webgis系统，具备相当的成熟度和扩展性。其中mapboxgl.js可以将three.js作为一个图层单独渲染在地图中，而three.js丰富的接口又支持把echarts图表渲染到自己的实体中，相互之间配合完整，效果出色。echarts多年的积累可以让三维图表功能不需要额外的开发成本，直接使用echarts图表库的资源即可，大大节约了开发成本。
步骤S2、通过echarts绘制出二维图表并得到canvas画布；
本发明中，使用echarts绘制出二维图表；
使用echarts实例自带的方法获取canvas画布，将canvas画布作为数据源在three.js中进行加载，为后续的三维图表做基础；
例如，要绘制出一个传统的二维图表，使用echarts绘制一个简单的图表，如图2所示，可得到图表；
将图表绘制在DOM元素(web前端绘图的基本单位容器，通常用来渲染所有的可见交互组件，例如按钮，输入框等的容器都是DOM元素)之后，可以发现echarts所使用的绘图技术是html5标准的canvas标签(一种基于DOM结构的画布)。
使用echarts实例自带的方法获取到这个canvas画布，将canvas画布作为数据源在three.js中进行加载，为后续的三维图表做基础。
获取canvas画布的代码示例:
//其中this.myChart是echarts图表实例。
this.myChart.getDom().getElementsByTagName('canvas')[0]
本步骤的好处是:绘制图表并得到canvas画布，将canvas画布作为数据源在three.js中进行加载，为下一步绘制三维表格做数据准备。
步骤S3、通过three.js加载所述二维图表的canvas画布并做渲染，连接canvas图表与GIS系统；并通过THREE.PlaneGeometry搭载完成三维图表；
具体为：在three.js中使用THREE.PlaneGeometry创造空间平面实体；
用THREE.PlaneGeometry创造的平面实体承载canvas绘制的图表；
将材质应用于平面实体上，得到最终承载了图表内容的三维平面meshplane并在地图上得到渲染结果；得到一绘制正确canvas图表内容的three.js场。
举例如下：使用three.js加载步骤S2制造的绘制了图表的canvas画布并做渲染。
首先，在three.js中使用THREE.PlaneGeometry创造空间平面实体，本实施例中将用THREE.PlaneGeometry创造的平面实体承载canvas绘制的图表。
PlaneGeometry函数是开发工具three.js的用于二维平面几何体。
下面是代码示例，创造一个100个单位长和宽的平面
let geometry＝new this.THREE.PlaneGeometry(100，100)；
其次，使用绘制了canvas的图表做材质渲染到这个平面上。
最后，将该材质应用于平面实体上，得到最终承载了图表内容的三维平面meshplane并在地图上得到渲染结果；如图3所示；
this.meshplane＝new this.THREE.Mesh(geometry,material)。
本步骤S3的好处是:使用three.js这一通用引擎作为桥梁，连接起了canvas图表与GIS系统。经过这步之后得到了一个绘制了正确canvas图表内容的three.js场景，目前该场景是独立存在的。
并且有一个额外的好处是，使用了three.js材质进行canvas渲染后，图表数据更新变化导致的图表可视化变更时，材质会自动同步渲染，其性能非常高并且省去了手动更新动画控制的工作流程，非常高效。
步骤S4、通过mapboxgl.js加载three.js场景到地图中，生成三维图表；
使用mapboxgl.js加载three.js场景到地图中。
利用将three.js产生的场景作为mapboxgl.js的一个图层加入其中，完成渲染。
该步骤的好处是:完成了从three.js场景到webgis系统的转移，实现了最初由charts绘制canvas容器图表到three.js场景加载图表，再到mapboxgl.js加载three.js场景的整条工作流，实现了三维图表的创造。
步骤S5、开发三维图片的旋转平移缩放功能，让成型的三维图表自由以任意角度附着在三维体表面呈现效果；
具体地，本发明中开发旋转、平移、缩放的功能让成型的三维图表可以自由以任意角度附着在三维体表面。
例如:开发了可以沿x、y、z进行平移的接口；
translateX,translateY,translateZ
本发明方法的本质是对进行绘制了图表的平面实体进行位移，分别调用了three.js的平移方法translateX，translateY，translateZ。同理还有可以沿x、y、z进行旋转的接口；
rotateX,rotateY,rotateZ
该步骤的好处是:如下图所示，利用上述接口，最终的开发效果可以将一个图表从不同方向、位移进行设置，从而达到直接贴合webgis系统中地理位置、楼宇、模型等物体上，达到非常好的三维图表可视化效果，如图4所示。
本发明提供一种web前端基于GIS系统的三维图表可视化方法，可将已有开源图表库结合GIS系统立体呈现使用，使立体起来的图表直接呈现在GIS系统的建筑上、三维模型表面，结合GIS系统能够明确可视化真实物体地理位置模型形状的特色，更加直观地展示真实业务的图表数据，为用户的使用提供了方便，并且实现简单，可靠性高。
在一个实施例中，本发明提供了一种web前端基于GIS系统的三维图表可视化装置，如图5所示，所述装置包括：
选择模块41，用于控制选用指定的开源开发环境工具，采用开源技术搭建webgis系统；
绘制模块42，用于通过echarts绘制出二维图表并得到canvas画布；
加载与渲染模块43，用于通过three.js加载所述二维图表的canvas画布并做渲染，连接canvas图表与GIS系统；并通过THREE.PlaneGeometry搭载三维图表；
三维图表生成模块44，用于通过mapboxgl.js加载three.js场景到地图中，生成三维图表；
功能开发与效果展示模块45，用于控制开发三维图片的旋转平移缩放功能，让成型的三维图表自由以任意角度附着在三维体表面呈现效果，具体如上所述。
其中，所述选择模块41包括：
选择单元，用于选用指定的开源开发环境工具，选择mapboxgl.js和three.js、echarts作为开发工具；
渲染单元，用于通过mapboxgl.js将three.js作为一个图层单独渲染在地图中，通过three.js的接口把echarts图表渲染到对应的实体中；通过echarts图表库的资源完成三维图表功能；
搭建单元，用于采用开源技术搭建webgis系统；具体如上所述。
在一个实施例中，本发明提供了一种计算机设备，该设备可以是终端，内部结构如图6所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种自然语言模型的生成方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。
本领域技术人员可以理解，图6所示的仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
本发明实施例提供了一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其中，所述处理器执行所述计算机程序时实现以下步骤：
选用指定的开源开发环境工具，采用开源技术搭建webgis系统；
通过echarts绘制出二维图表并得到canvas画布；
通过three.js加载所述二维图表的canvas画布并做渲染，连接canvas图表与GIS系统；并通过THREE.PlaneGeometry搭载三维图表；
通过mapboxgl.js加载three.js场景到地图中，生成三维图表；
开发三维图片的旋转平移缩放功能，让成型的三维图表自由以任意角度附着在三维体表面呈现效果；具体如上所述。
综上所述，与现有技术相比，本发明实施例具有以下优点：
提供一种web前端基于GIS系统的三维图表可视化方法及装置、计算机设备、可读存储介质，本发明可将已有开源图表库结合GIS系统立体呈现使用，使立体起来的图表直接呈现在GIS系统的建筑上、三维模型表面，结合GIS系统能够明确可视化真实物体地理位置模型形状的特色，更加直观地展示真实业务的图表数据，为用户的使用提供了方便，并且实现简单，可靠性高。
以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种web前端基于GIS系统的三维图表可视化方法，其特征在于，所述方法包括：
选用指定的开源开发环境工具，采用开源技术搭建webgis系统；
通过echarts绘制出二维图表并得到canvas画布；
通过three.js加载所述二维图表的canvas画布并做渲染，连接canvas图表与GIS系统；并通过THREE.PlaneGeometry搭载三维图表；
通过mapboxgl.js加载three.js场景到地图中，生成三维图表；
开发三维图片的旋转平移缩放功能，让成型的三维图表自由以任意角度附着在三维体表面呈现效果。
2.根据权利要求1所述web前端基于GIS系统的三维图表可视化方法，其特征在于，所述采用开源技术搭建webgis系统的步骤包括：
选用指定的开源开发环境工具，选择mapboxgl.js和three.js、echarts作为开发工具；
通过mapboxgl.js将three.js作为一个图层单独渲染在地图中，通过three.js的接口把echarts图表渲染到对应的实体中；通过echarts图表库的资源完成三维图表功能；
采用开源技术搭建webgis系统。
3.根据权利要求1所述web前端基于GIS系统的三维图表可视化方法，其特征在于，所述通过echarts绘制出二维图表并得到canvas画布的步骤包括：
通过echarts绘制出二维图表；
通过echarts实例自带的方法获取canvas画布，将canvas画布作为数据源在three.js中进行加载，为后续的三维图表做基础。
4.根据权利要求1所述web前端基于GIS系统的三维图表可视化方法，其特征在于，所述通过three.js加载所述二维图表的canvas画布并做渲染，连接canvas图表与GIS系统；并通过THREE.PlaneGeometry搭载三维图表的步骤包括：
在three.js中通过THREE.PlaneGeometry创造空间平面实体；
用THREE.PlaneGeometry创造的平面实体承载canvas绘制的图表；
将材质应用于平面实体上，得到最终承载了图表内容的三维平面meshplane并在地图上得到渲染结果；得到一绘制正确canvas图表内容的three.js场景。
5.根据权利要求1所述web前端基于GIS系统的三维图表可视化方法，其特征在于，所述通过mapboxgl.js加载three.js场景到地图中，生成三维图表的步骤包括：
通过mapboxgl.js加载three.js场景到地图中；
利用将three.js产生的场景作为mapboxgl.js的一个图层加入其中，完成渲染；
完成从three.js场景到webgis系统的转移，实现由echarts绘制canvas容器图表到three.js场景加载图表，再到mapboxgl.js加载three.js场景的整条工作流，实现了三维图表的创造。
6.根据权利要求1所述web前端基于GIS系统的三维图表可视化方法，其特征在于，所述开发三维图片的旋转平移缩放功能，让成型的三维图表自由以任意角度附着在三维体表面呈现效果的步骤包括：
开设沿x、y、z进行平移的接口；
对进行绘制了图表的平面实体进行位移，分别调用three.js的平移方法translateX，translateY，translateZ；并设置沿x、y、z进行旋转的接口。
7.一种web前端基于GIS系统的三维图表可视化装置，其特征在于，所述装置包括：
选择模块，用于控制选用指定的开源开发环境工具，采用开源技术搭建webgis系统；
绘制模块，用于通过echarts绘制出二维图表并得到canvas画布；
加载与渲染模块，用于通过three.js加载所述二维图表的canvas画布并做渲染，连接canvas图表与GIS系统；并通过THREE.PlaneGeometry搭载三维图表；
三维图表生成模块，用于通过mapboxgl.js加载three.js场景到地图中，生成三维图表；
功能开发与效果展示模块，用于控制开发三维图片的旋转平移缩放功能，让成型的三维图表自由以任意角度附着在三维体表面呈现效果。
8.根据权利要求7所述web前端基于GIS系统的三维图表可视化装置，其特征在于，所述选择模块包括：
选择单元，用于选用指定的开源开发环境工具，选择mapboxgl.js和three.js、echarts作为开发工具；
渲染单元，用于通过mapboxgl.js将three.js作为一个图层单独渲染在地图中，通过three.js的接口把echarts图表渲染到对应的实体中；通过echarts图表库的资源完成三维图表功能；
搭建单元，用于采用开源技术搭建webgis系统。
9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至6中任一项所述web前端基于GIS系统的三维图表可视化方法的步骤。
10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至6中任一项所述的web前端基于GIS系统的三维图表可视化方法的步骤。
CN202010097400.4A 2020-02-17 2020-02-17 web前端基于GIS系统的三维图表可视化方法及装置 Active CN111324837B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010097400.4A CN111324837B (zh) 2020-02-17 2020-02-17 web前端基于GIS系统的三维图表可视化方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010097400.4A CN111324837B (zh) 2020-02-17 2020-02-17 web前端基于GIS系统的三维图表可视化方法及装置

Publications (2)

Publication Number Publication Date
CN111324837A CN111324837A (zh) 2020-06-23
CN111324837B true CN111324837B (zh) 2023-05-02

Family

ID=71163432

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010097400.4A Active CN111324837B (zh) 2020-02-17 2020-02-17 web前端基于GIS系统的三维图表可视化方法及装置

Country Status (1)

Country Link
CN (1) CN111324837B (zh)

Families Citing this family (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112269849A (zh) * 2020-10-31 2021-01-26 武汉中海庭数据技术有限公司 一种三维地图显示方法、系统、电子设备及存储介质
CN112380309A (zh) * 2020-11-23 2021-02-19 深圳航天智慧城市系统技术研究院有限公司 一种基于WebGL的GIS数据可视化方法及装置
CN112286518B (zh) * 2020-12-15 2021-04-13 成都四方伟业软件股份有限公司 一种3d可视化自动化场景构建方法及系统
CN112612627B (zh) * 2020-12-28 2024-04-05 江苏梨柳科技有限公司 一种web端实现三维互动的方法
CN112927327B (zh) * 2021-03-24 2023-11-03 苏州市生物医药产业创新中心 一种生物医药平台数据地图三维可视化方法
CN113487747B (zh) * 2021-06-25 2024-03-29 山东齐鲁数通科技有限公司 一种模型处理方法、装置、终端及存储介质
CN114065329B (zh) * 2021-11-22 2023-07-21 费哲软件无锡有限公司 一种可视化室内地图的网页绘制方法、绘制系统及设备
CN114661399A (zh) * 2022-03-23 2022-06-24 中电莱斯信息系统有限公司 一种基于空间几何的三维可视化大屏构建方法

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2014142974A (ja) * 2014-05-14 2014-08-07 Archaio Llc ３次元および２次元デジタル画像を使用するシステムおよび方法
CN108763472A (zh) * 2018-05-29 2018-11-06 北京邮电大学 三维数据可视化的装置及方法
CN109543130A (zh) * 2018-11-06 2019-03-29 新华三大数据技术有限公司 三维场景下标签的显示方法及装置
CN109656665A (zh) * 2018-12-20 2019-04-19 成都四方伟业软件股份有限公司 一种数据的可视化展示方法、组件及可读存储介质
CN110163959A (zh) * 2019-05-22 2019-08-23 图兮深维医疗科技（苏州）有限公司 一种医学图像三维立体重建装置及设备

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2014142974A (ja) * 2014-05-14 2014-08-07 Archaio Llc ３次元および２次元デジタル画像を使用するシステムおよび方法
CN108763472A (zh) * 2018-05-29 2018-11-06 北京邮电大学 三维数据可视化的装置及方法
CN109543130A (zh) * 2018-11-06 2019-03-29 新华三大数据技术有限公司 三维场景下标签的显示方法及装置
CN109656665A (zh) * 2018-12-20 2019-04-19 成都四方伟业软件股份有限公司 一种数据的可视化展示方法、组件及可读存储介质
CN110163959A (zh) * 2019-05-22 2019-08-23 图兮深维医疗科技（苏州）有限公司 一种医学图像三维立体重建装置及设备

Also Published As

Publication number Publication date
CN111324837A (zh) 2020-06-23

Similar Documents

Publication Publication Date Title
CN111324837B (zh) web前端基于GIS系统的三维图表可视化方法及装置
US9153062B2 (en) Systems and methods for sketching and imaging
US7661071B2 (en) Creation of three-dimensional user interface
JP4629792B2 (ja) グラフライクダイアグラムを編集するための２次元ツリー
US9275493B2 (en) Rendering vector maps in a geographic information system
US20090125801A1 (en) 3D windows system
TW201539294A (zh) 跨平台顯像引擎
CN111803945B (zh) 界面渲染方法、装置、电子设备及存储介质
US20070273706A1 (en) Texture mapping 2-D text properties to 3-D text
CN110532497B (zh) 生成全景图的方法、生成三维页面的方法以及计算设备
CN110392901A (zh) 电子书服务的提供方法及用于该方法的计算机程序
Pasewaldt et al. Multi-perspective 3D panoramas
CA2793099A1 (en) Methods and systems for generating a dynamic multimodal and multidimensional presentation
CN111583379A (zh) 虚拟模型的渲染方法、装置、存储介质与电子设备
Devaux et al. 3D urban geovisualization: In situ augmented and mixed reality experiments
CN106846431B (zh) 一种支持多表现形式的统一Web图形绘制系统
CN111639149A (zh) 海洋数据可视化方法和装置
US6925473B2 (en) Staged stylization in multiple tiers
JP4870581B2 (ja) パーツカタログ作成システム、コンピュータが実行するためのプログラム、およびコンピュータが読み取り可能な記録媒体
US20090141021A1 (en) Method and system for providing experiential knowledge associated with spatial and temporal information
US10529100B2 (en) Interaction-driven format for graph visualization
CN115691772A (zh) 运营可视化系统及相应计算机设备和存储介质
WO2014014928A2 (en) Systems and methods for three-dimensional sketching and imaging
CN112445951A (zh) 快速灵活切换的兼容多种地图的海洋数据可视化方法
JP5481751B2 (ja) 隠蔽処理プログラム、可視化処理方法及び装置

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