[发明专利]web前端基于GIS系统的三维图表可视化方法及装置

说明书

本申请涉及web前端基于GIS系统的三维图表可视化方法及装置，所述方法包括：通过echarts绘制出二维图表并得到canvas画布；通过three.js加载所述二维图表的canvas画布并做渲染，连接canvas图表与GIS系统；并通过THREE.PlaneGeometry搭载三维图表；通过mapboxgl.js加载three.js场景到地图中，生成三维图表；开发三维图片的旋转平移缩放功能，让成型的三维图表自由以任意角度附着在三维体表面呈现效果。本发明提供了一种在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绘制出二维图表；