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

权利要求书

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进行旋转的接口。