CN112927327B - 一种生物医药平台数据地图三维可视化方法 - Google Patents

Abstract

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

Description

一种生物医药平台数据地图三维可视化方法

技术领域

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

背景技术

目前的数据平台程序在模拟三维空间的时候，最终的情报必须变换成二维数据。而且三维坐标，根据平台不同，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，插入地图基础数据，设置地图包含的每个点位，从地图软件中抓取每个城市中心点位的坐标，把坐标细化成一个个经纬度形成数据，赋予给设置点位；

S44，针对每个设置点位，绘制每个城市的边界，形成数据列表塞进地图echart组件，通过画布显示；

S45，设置地图中心点，调整整体地图的大小使每个图片的显示像素不小于预设像素阈值，设置默认点。

进一步地，所述默认点至少包括省级市区点位。

进一步地，步骤S5中，所述在地图画布上通过TWEEN.js构建基础动画环境的过程包括以下步骤：

S51，通过监听全局动画animationlndex，将地图组件塞入需要动画效果的TWEEN中，通过COLOR.js为地图润色，对地图做全局透明效果处理；

S52，对预设的默认点，做高亮处理并标注。

进一步地，所述方法还包括以下步骤：

根据地图画布周围的点位，描点画线，通过线位向外辐射感以预设的播放秒数和速度做动画效果。

进一步地，所述方法还包括以下步骤：

设置监控接口，通过监控接口实时监控生物医药数据变化，根据数据变化幅度和变化后的量值调整地图轮播次序和内容，以及根据数据变化微调动画效果。

本发明的有益效果在于：

(1)采用开放的Web 3D技术，不需要在浏览器安装插件，只要浏览器支持就可以采用Javascript进行编程，对生物医药类的专业人员相当友好。

(2)由数据的实时性，实时监控每个点位发生的数据变化，动态呈现每个点位的数据量，做到数据清晰一目了然。企业可以由此推销自己的需求服务更加便捷化，做到宣传创收收益。

(3)对数据按照类型和地理位置进行划分，并尽可能地建立每个数据类型下各个地理位置之间数据的关联关系，从而在数据显示过程中，便于工作人员迅速掌握相关信息，实现对数据的快速分析。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，并可依照说明书的内容予以实施，以下以本发明的较佳实施例并配合附图详细说明如后。

附图说明

图1为本发明的生物医药平台数据地图三维可视化方法示意图。

具体实施方式

下面将结合附图对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

此外，下面所描述的本发明不同实施方式中所涉及的技术特征只要彼此之间未构成冲突就可以相互结合。

结合图1，本发明提及一种生物医药平台数据地图三维可视化方法，所述方法包括以下步骤：

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

生物医药类数据包括行业数据、相关企业数据、医药研发数据、产业规模、创新能力、人力资源和国际交流等等，这些数据之间有可能存在一定的相关性，且绝大部分数据具有地理特性。因此，本发明提出对数据按照类型和地理位置进行划分，并尽可能地建立每个数据类型下各个地理位置之间数据的关联关系，从而在数据显示过程中，便于工作人员迅速掌握相关信息，实现对数据的快速分析。

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

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

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

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

S41，引入echart组件。

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

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

S44，针对每个设置点位，绘制每个城市的边界，形成数据列表塞进地图echart组件，通过画布显示。

S45，设置地图中心点，调整整体地图的大小使每个图片的显示像素不小于预设像素阈值，设置默认点。默认点可以为关键城市点位或者省级市区点位。

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

TweenJS是使用JavaScript中的一个简单的补间动画库。它的开发与EaseIJS库很好的整合，但不依赖于或特定于它。它支持数字对象的属性和CSS样式属性赋值。

步骤S5中，所述在地图画布上通过TWEEN.js构建基础动画环境的过程包括以下步骤：

S51，通过监听全局动画animationlndex，将地图组件塞入需要动画效果的TWEEN中，通过COLOR.js为地图润色，对地图做全局透明效果处理。

S52，对预设的默认点，做高亮处理并标注。

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

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

作为其中的一种优选例，所述方法还包括以下步骤：

根据地图画布周围的点位，描点画线，通过线位向外辐射感以预设的播放秒数和速度做动画效果。优选的，播放秒数和速度和对应点位的当前数据类型下的影响力或者综合影响力决定，以实现更为直观的显示效果。示例性的，以产业规模为例，目前长三角的产业规模较大，则可以有效辐射周边其他区域的相关产业链，那么该数据类型下长三角多个城市的辐射速度和秒数的数值相对会大一些。

作为其中的另一种优选例，所述方法还包括以下步骤：

设置监控接口，通过监控接口实时监控生物医药数据变化，根据数据变化幅度和变化后的量值调整地图轮播次序和内容，以及根据数据变化微调动画效果。示例性的，当某个城市的某个数据类型的数据突然增长且增幅较大时，其播放次序会向前调整，并且内容会更加凸显该数据类型，以标注或高亮的形式，即每个点位对应的图片的显示内容也具有优先级。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (4)

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

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

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

S3，启动VisualStudio Code开发工具；

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

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

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

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

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

S41，引入echart组件；

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

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

S44，针对每个设置点位，绘制每个城市的边界，形成数据列表塞进地图echart组件，通过画布显示；

S45，设置地图中心点，调整整体地图的大小使每个图片的显示像素不小于预设像素阈值，设置默认点；

步骤S5中，所述在地图画布上通过TWEEN.js构建基础动画环境的过程包括以下步骤：

S51，通过监听全局动画animationIndex，将地图组件塞入需要动画效果的TWEEN中，通过COLOR.js为地图润色，对地图做全局透明效果处理；

S52，对预设的默认点，做高亮处理并标注。

2.根据权利要求1所述的生物医药平台数据地图三维可视化方法，其特征在于，所述默认点至少包括省级市区点位。

3.根据权利要求1所述的生物医药平台数据地图三维可视化方法，其特征在于，所述方法还包括以下步骤：

根据地图画布周围的点位，描点画线，通过线位向外辐射感以预设的播放秒数和速度做动画效果。

4.根据权利要求3所述的生物医药平台数据地图三维可视化方法，其特征在于，所述方法还包括以下步骤：

设置监控接口，通过监控接口实时监控生物医药数据变化，根据数据变化幅度和变化后的量值调整地图轮播次序和内容，以及根据数据变化微调动画效果。