[发明专利]一种生物医药平台数据地图三维可视化方法

说明书

本发明公开了一种生物医药平台数据地图三维可视化方法，包括：S1，采集生物医药类数据，生成每个地理位置对应的包含有所属区域生物医药类数据的图片；S2，搭建前端框架，安装node环境开发，引入npm安装依赖程序；S3，启动Visual Studio Code开发工具；S4，引入echart组件，以城市中心点位为基准，搭建生物医药平台地图画布；S5，在地图画布上通过TWEEN.js构建基础动画环境；根据每个城市的中心点位，做相应的鼠标悬浮效果，立体突出画悬浮框，将相应的图片放到画布对应位置以呈现当前中心点位的生物医药类数据。本发明在有限带宽的条件下将3D数据在浏览器端实时渲染，从而实现生物医药平台数据地图三维可视化。

技术领域

本发明涉及一种生物医药平台数据地图三维可视化方法，属于平台数据三维可视化技术领域。

背景技术

目前的数据平台程序在模拟三维空间的时候，最终的情报必须变换成二维数据。而且三维坐标，根据平台不同，Z轴的处理是不一样的。最常见的是采用右手坐标系。为了模拟三维空间，将三维空间的情报向二维的情报进行转换，需要三个坐标变换，分别是模型变换、视图变换和投影变换，将这些变换进行组合，最终决定描画的图形内容。

由此可见，为了使用TweenJS进行开发，坐标系和坐标变换的知识是必不可少的，这对于开发人员的专业性要求极高。而从事生物医药类数据处理的工作人员常常很难具备相关能力，导致最终生成的平台数据显示效果和预想不符。

发明内容

本发明的目的在于提供一种生物医药平台数据地图三维可视化方法，运用WebGL3D绘图技术，通过该技术完成生物医药地图3D建模设计、模型渲染、动态交互设计；在有限带宽的条件下将3D数据在浏览器端实时渲染，从而实现生物医药平台数据地图三维可视化。

为达到上述目的，本发明提供如下技术方案：

一种生物医药平台数据地图三维可视化方法，所述方法包括以下步骤：

S1，采集生物医药类数据，根据数据类型和地理位置划分数据，生成每个地理位置对应的包含有所属区域生物医药类数据的图片，并且针对每个数据类型构建各个地理位置之间的数据关联关系；

S2，搭建前端框架，安装node环境开发，引入npm安装依赖程序；

S3，启动Visual Studio Code开发工具；

S4，引入echart组件，以城市中心点位为基准，搭建生物医药平台地图画布；

S5，在地图画布上通过TWEEN.js构建基础动画环境；根据每个城市的中心点位，做相应的鼠标悬浮效果，立体突出画悬浮框，将相应的图片放到画布对应位置以呈现当前中心点位的生物医药类数据；

S6，根据用户选择的轮播模式，开启地图信息轮播：

所述轮播模式有以下三种：第一种，以数据类型为基准的全局轮播模式，以数据类型为基准，全图点位统一显示当前选择的数据类型对应的图片；第二种，以地理位置为基准的全局轮播模式，每个地理位置对应有一张或者多张包含有所有相关数据的图片，依次轮播；第三种，以突显各个地理位置之间的数据关联关系为目的，结合动画效果，依次反应每个数据类型相关的若干个地理位置的图片。

进一步地，步骤S4中，所述引入echart组件，以城市中心点位为基准，搭建生物医药平台地图画布的过程包括以下步骤：

S41，引入echart组件；

S42，嵌入canvas画布，设置画布宽高位置；

S43，插入地图基础数据，设置地图包含的每个点位，从地图软件中抓取每个城市中心点位的坐标，把坐标细化成一个个经纬度形成数据，赋予给设置点位；