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

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

【技术实现步骤摘要】
一种生物医药平台数据地图三维可视化方法


[0001]本专利技术涉及一种生物医药平台数据地图三维可视化方法，属于平台数据三维可视化


技术介绍

[0002]目前的数据平台程序在模拟三维空间的时候，最终的情报必须变换成二维数据。而且三维坐标，根据平台不同，Z轴的处理是不一样的。最常见的是采用右手坐标系。为了模拟三维空间，将三维空间的情报向二维的情报进行转换，需要三个坐标变换，分别是模型变换、视图变换和投影变换，将这些变换进行组合，最终决定描画的图形内容。
[0003]由此可见，为了使用TweenJS进行开发，坐标系和坐标变换的知识是必不可少的，这对于开发人员的专业性要求极高。而从事生物医药类数据处理的工作人员常常很难具备相关能力，导致最终生成的平台数据显示效果和预想不符。

技术实现思路

[0004]本专利技术的目的在于提供一种生物医药平台数据地图三维可视化方法，运用WebGL3D绘图技术，通过该技术完成生物医药地图3D建模设计、模型渲染、动态交互设计；在有限带宽的条件下将3D数据在浏览器端实时渲染，从而实现生物医药平台数据地图三维可视化。
[0005]为达到上述目的，本专利技术提供如下技术方案：
[0006]一种生物医药平台数据地图三维可视化方法，所述方法包括以下步骤：
[0007]S1，采集生物医药类数据，根据数据类型和地理位置划分数据，生成每个地理位置对应的包含有所属区域生物医药类数据的图片，并且针对每个数据类型构建各个地理位置之间的数据关联关系；
[0008]S2，搭建前端框架，安装node环境开发，引入npm安装依赖程序；
[0009]S3，启动Visual Studio Code开发工具；
[0010]S4，引入echart组件，以城市中心点位为基准，搭建生物医药平台地图画布；
[0011]S5，在地图画布上通过TWEEN.js构建基础动画环境；根据每个城市的中心点位，做相应的鼠标悬浮效果，立体突出画悬浮框，将相应的图片放到画布对应位置以呈现当前中心点位的生物医药类数据；
[0012]S6，根据用户选择的轮播模式，开启地图信息轮播：
[0013]所述轮播模式有以下三种：第一种，以数据类型为基准的全局轮播模式，以数据类型为基准，全图点位统一显示当前选择的数据类型对应的图片；第二种，以地理位置为基准的全局轮播模式，每个地理位置对应有一张或者多张包含有所有相关数据的图片，依次轮播；第三种，以突显各个地理位置之间的数据关联关系为目的，结合动画效果，依次反应每个数据类型相关的若干个地理位置的图片。
[0014]进一步地，步骤S4中，所述引入echart组件，以城市中心点位为基准，搭建生物医
药平台地图画布的过程包括以下步骤：
[0015]S41，引入echart组件；
[0016]S42，嵌入canvas画布，设置画布宽高位置；
[0017]S43，插入地图基础数据，设置地图包含的每个点位，从地图软件中抓取每个城市中心点位的坐标，把坐标细化成一个个经纬度形成数据，赋予给设置点位；
[0018]S44，针对每个设置点位，绘制每个城市的边界，形成数据列表塞进地图echart组件，通过画布显示；
[0019]S45，设置地图中心点，调整整体地图的大小使每个图片的显示像素不小于预设像素阈值，设置默认点。
[0020]进一步地，所述默认点至少包括省级市区点位。
[0021]进一步地，步骤S5中，所述在地图画布上通过TWEEN.js构建基础动画环境的过程包括以下步骤：
[0022]S51，通过监听全局动画animationlndex，将地图组件塞入需要动画效果的TWEEN中，通过COLOR.js为地图润色，对地图做全局透明效果处理；
[0023]S52，对预设的默认点，做高亮处理并标注。
[0024]进一步地，所述方法还包括以下步骤：
[0025]根据地图画布周围的点位，描点画线，通过线位向外辐射感以预设的播放秒数和速度做动画效果。
[0026]进一步地，所述方法还包括以下步骤：
[0027]设置监控接口，通过监控接口实时监控生物医药数据变化，根据数据变化幅度和变化后的量值调整地图轮播次序和内容，以及根据数据变化微调动画效果。
[0028]本专利技术的有益效果在于：
[0029](1)采用开放的Web 3D技术，不需要在浏览器安装插件，只要浏览器支持就可以采用Javascript进行编程，对生物医药类的专业人员相当友好。
[0030](2)由数据的实时性，实时监控每个点位发生的数据变化，动态呈现每个点位的数据量，做到数据清晰一目了然。企业可以由此推销自己的需求服务更加便捷化，做到宣传创收收益。
[0031](3)对数据按照类型和地理位置进行划分，并尽可能地建立每个数据类型下各个地理位置之间数据的关联关系，从而在数据显示过程中，便于工作人员迅速掌握相关信息，实现对数据的快速分析。
[0032]上述说明仅是本专利技术技术方案的概述，为了能够更清楚了解本专利技术的技术手段，并可依照说明书的内容予以实施，以下以本专利技术的较佳实施例并配合附图详细说明如后。
附图说明
[0033]图1为本专利技术的生物医药平台数据地图三维可视化方法示意图。
具体实施方式
[0034]下面将结合附图对本专利技术的技术方案进行清楚、完整地描述，显然，所描述的实施例是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术
人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0035]在本专利技术的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本专利技术和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本专利技术的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。
[0036]在本专利技术的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本专利技术中的具体含义。
[0037]此外，下面所描述的本专利技术不同实施方式中所涉及的技术特征只要彼此之间未构成冲突就可以相互结合。
[0038]结合图1，本专利技术提及一种生物医药平台数据地图三维可视化方法，所述方法包括以下步骤：
[0039]S1，采集生物医药类数据，根据数据类型和地理位置划分数据，生成每个地理位置对应的包含有所属区域生物医药类数据的图片，并本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种生物医药平台数据地图三维可视化方法，其特征在于，所述方法包括以下步骤：S1，采集生物医药类数据，根据数据类型和地理位置划分数据，生成每个地理位置对应的包含有所属区域生物医药类数据的图片，并且针对每个数据类型构建各个地理位置之间的数据关联关系；S2，搭建前端框架，安装node环境开发，引入npm安装依赖程序；S3，启动Visual Studio Code开发工具；S4，引入echart组件，以城市中心点位为基准，搭建生物医药平台地图画布；S5，在地图画布上通过TWEEN.js构建基础动画环境；根据每个城市的中心点位，做相应的鼠标悬浮效果，立体突出画悬浮框，将相应的图片放到画布对应位置以呈现当前中心点位的生物医药类数据；s6，根据用户选择的轮播模式，开启地图信息轮播：所述轮播模式有以下三种：第一种，以数据类型为基准的全局轮播模式，以数据类型为基准，全图点位统一显示当前选择的数据类型对应的图片；第二种，以地理位置为基准的全局轮播模式，每个地理位置对应有一张或者多张包含有所有相关数据的图片，依次轮播；第三种，以突显各个地理位置之间的数据关联关系为目的，结合动画效果，依次反应每个数据类型相关的若干个地理位置的图片。2.根据权利要求1所述的生物医药平台数据地图三维可视化方法，其特征在于，步骤S4中，所述引入echart组件，以城市中心点位为基准，搭建生物医药平台地图画布的过程包括以下步骤：S41，引入echart组件；S42，嵌入canva...

【专利技术属性】
技术研发人员：赵弋汀，
申请(专利权)人：苏州市生物医药产业创新中心，
类型：发明
国别省市：