零代码/零基础轻松快速绘制3D园区、城市,FineVis就是这么强悍!

文 | 商业智能BI相关文章 阅读次数:1,758 次浏览
2023-08-28 17:06:27

在智慧城市三维可视化或园区的建设中,如何实现对大量数据的清晰展示一直是一个挑战。传统的数据展示方式常常难以满足人们对数据可视化的需求,因此大屏可视化技术应运而生。大屏可视化技术可以通过将数据以可视化的形式展示在大屏幕上,使用户更加直观地理解数据。而FineVis作为一款强大的大屏可视化软件,可以帮助用户通过自定义绘制实现对智慧城市三维可视化或三维可视化智慧园区数据的清晰展示。本文将介绍基于三维可视化平台FineVis的三维城市组件和官方提供的geojson绘制工具,如何构建一个智慧城市三维可视化区域、园区或栋楼场景,这里面全程用不到代码,就算是不会代码零基础的人也做得来!

模板效果如下图所示。

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

实现效果

效果1:自定义绘制三维可视化智慧园区布局,自动生成3D建筑效果

效果2:点击模型弹框

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

效果3:点击按钮切换园区视角

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

步骤

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

绘制geojson

先提供一个与三维可视化平台FineVis配套的扩展工具,实现用户自定义绘制园区、城市的geojson。

注:以下使用的园区图纸来源于网络,对应的园区场景也是虚拟的。

定位园区

搜索框定位到该园区所在位置,可以鼠标拖动地图位置、放大缩小地图区域:

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

框选园区

点击“设置边界”按钮框选园区所在区域:

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

上传园区图纸

在“图层属性”中点击“选择图片”,上传园区图纸作为区域背景:

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

选择好图片后,再次点击“确定”按钮:

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

绘制园区

以园区图纸作为背景,分别勾勒建筑、道路、水系和草地的轮廓

1)勾勒建筑轮廓:

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

在勾勒轮廓时,先点击鼠标右键初步确定多边形。

点击白色圆点可以删除多边形的顶点,点击蓝色圆点增加顶点,可以拉动顶点的位置调整多边形。

多边形轮廓最终确定后,点击“确定”按钮;若需要删除多边形,点击“删除”按钮。

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

确定轮廓后,选中建筑多边形,在图层属性中为建筑命名;可赋予一个高度,此处建筑之间的高度不同,导入FineVis后也会有不同的高度。

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

2)勾勒水系和草地的轮廓:以同样的方式绘制多边形并命名,但讲类型选择为“草地”或“水系”,即可得到一块草地或湖泊。

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

3)勾勒道路:点击创建多段线,即可得到一个3个顶点的多段线,调整这个多段线的顶点位置,获得一条道路。

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

暂存和导出

保存项目:若绘制园区是一个比较费时的工程,可以中途点击“保存项目”,暂时保存为一个json文件到本地;

打开项目:将暂存的json文件打开,可以继续上次的绘制;

导出GeoJSon:完全绘制好后,点击导出,可获取园区的geojson文件。

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

导入生成 3D

进入三维可视化平台FineVis大屏编辑界面,使用“三维城市”组件导入刚刚绘制的三维可视化智慧园区geojson。

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

导入后生成效果如下,用户可以选择开启或关闭“GIS底图”。若开启GIS底图,可以看到园区所在的地理信息,如道路名称等。

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

调整模型

调整模型样式

点击“模型”tab并进入模型列表,选中任一建筑,可以调整建筑的顶面和立面的材质和颜色,也可以一键切换风格。

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

调整好一个建筑的样式后,可以点击“应用到所有主建筑”,替换默认的建筑样式。

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

调整模型视角

鼠标左键拖动可以旋转模型的视角,右键可以平移模型,鼠标滚动放大缩小。

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

点击“返回大屏编辑模式”就,来到画布界面,点击“视角调整”进入视角编辑状态,可以根据模板整体布局调整模型的大小和视角。

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

添加场景特效

调整好建筑样式后,可以给场景添加冲击波、飞升线条和粒子特效,也可以开启相机功能实现自动旋转。

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

配置数据

模型数据标签

模型的名称是与数据关联的“枢纽”,用户可以修改建筑模型的名称;配置数据时,需要准备好含有模型名称字段的数据集。

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

在「数据」-「添加数据图层」-「模型-数据图层」添加数据图层:

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

根据模型名称匹配「模型名称」和「模型内容」字段,生成数据标签:

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

模型弹框

在配置好模型的数据图层后,可以对图层设置“弹出框”的点击交互事件,实现点击图层对应的建筑模型弹出明细信息窗口。

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

构建多视角

若要实现园区视角的切换效果,需要复制多个分页,依次调整每个分页的模型视角,并开启分页的平滑过渡功能。

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

在每个分页分别制作跳转按钮(这里用了”标题“组件),选中作为按钮的组件,选择「交互」-「点击事件」-「分页跳转」,选择对应的跳转页面:

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

预览效果

三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

在当前的数字信息化时代,借助FineVis这样的数据可视化产品,可以让企业高效监控业务指标,助力经营分析决策。目前,市场主流的数据可视化软件FineVis,整合了数据源、超强模板编辑器、丰富的模板素材资源,最重要的是,它支持低门槛搭建3D场景,快速简单上手,提升了数据可视化应用效率。FineVis提供强大的数据可视化设计、开发和多终端展示能力,将工厂、园区、产线、产品等业务相关物体映射到数据世界中,助力企业全方位释放数据可视化的价值。三维可视化智慧园区,智慧城市三维可视化,三维可视化平台

FineVis可视化大屏产品更多介绍: https://www.fanruan.com/finemax

产品体验

相关内容

目录
立即体验 立即体验

商务咨询

在线咨询
专业顾问帮您解答问题

电话咨询

技术问题

投诉入口

微信咨询

返回顶部