3D建筑园区组件,低成本数据可视化
·
3D建筑园区:
介绍:

展示园区分布、建筑分布、车间设备分布地图。
- 地图格式Geojson
- 支持自定义建筑贴图
- 支持建筑、道路两种类型
- 支持动态显示每个区域的实时数据
- 支持动态显示每个区域的状态(不同颜色)
设计工具:目前兼容帆软的Geojson编辑工具设计的geojson文件格式。
https://geojson.fanruan.com/
1. 添加组件

2. 配置样式

选中组件,右侧会出现相应的属性配置表单。
| 配置项 | 子项 | 示例值 | 说明 |
|---|---|---|---|
| 地图选择 | 选择已经添加的建筑地图(geojson) | ||
| 背景设置 | 地图背景贴图等相关设置 | ||
| 背景颜色 | |||
| 背景透明度 | 0.5 | 小数,范围 0-1 ,0 全透明、1不透明 | |
| 启用背景图1 | 整体背景使用的图片 | ||
| 背景图1 | 选择图片地址 | ||
| 透明度 | 0.5 | ||
| 背景缩放比例 | 0.6 | 小数,默认1,设置大于1 表示放大,小于1表示缩小 | |
| 启用背景图2 | 默认显示的是地图块下面的网格点状背景图 | ||
| 背景图2 | |||
| 透明度 | |||
| 背景缩放比例 | |||
| 启用装饰图1 | 默认显示的外圈的旋转图片 | ||
| 动态装饰图1 | |||
| 装饰图1透明度 | |||
| 装饰图1位置微调 | |||
| 装饰图1缩放比 | 0.9 | 小数,默认1,设置大于1 表示放大,小于1表示缩小 | |
| 装饰图1转速 | 15 | 正数和负数都支持,方向相反 | |
| 启用装饰图2 | 默认显示的内圈旋转图片 | ||
| 动态装饰图2 | |||
| 装饰图2透明度 | |||
| 装饰图2位置微调 | |||
| 装饰图2缩放比 | 0.9 | ||
| 装饰图2转速 | 10 | ||
| 视角设置 | 地图默认的视角设置,可开启自动旋转等 | ||
| 中心坐标 | 默认自动获取地图中心点,也可以指定,格式 : 经度,纬度 | ||
| 垂直位置微调 | -0.5 | 小数,调节地图在组件中的垂直方向上的位置。负数 地图偏上,正数 地图偏下 | |
| 视觉距离 | 视觉上和地图之间的距离,数值小,地图大,数值大,地图小 | ||
| 俯仰视角 | |||
| 自动旋转 | 开启后地图逆时针旋转 | ||
| 旋转速度 | 5 | 正数和负数都支持,负数 顺时针旋转 | |
| 相机X偏移比例 | 1.06 | 微调地图顺时针旋转偏移的比例,设置 大于1 的小数,如 1.06 | |
| 区域设置 | 地图区域的边线、颜色等 | ||
| 区域凸起高度 | 区域突起的厚度:通常在地图设计时,不同的建筑会设置不同的高度,这里的凸起高度是指地图中最高的建筑对应的突起高度,其他建筑会等比例进行自适应计算高度 | ||
| 区域颜色 | |||
| 区域透明度 | |||
| 区域贴图 | 选择贴图,如卫星贴图 | ||
| 贴图微调X | 0.2452 | 小数,水平方向微调贴图使得贴图尽量贴合地图区域 | |
| 贴图微调Y | 0.1468 | 小数,垂直方向微调贴图使得贴图尽量贴合地图区域 | |
| 区域侧面颜色 | |||
| 区域侧面透明度 | |||
| 区域侧面贴图 | 选择贴图,如卫星贴图 | ||
| 贴图侧面贴图微调X | 0.2452 | 小数,水平方向微调贴图使得贴图尽量贴合地图区域 | |
| 贴图侧面贴图微调Y | 0.1468 | 小数,垂直方向微调贴图使得贴图尽量贴合地图区域 | |
| 隐藏区域名称 | 开启后,不显示区域的名称标签 | ||
| 字体名称 | 区域名称的字体 | ||
| 字体大小 | |||
| 字体加粗 | |||
| 字体颜色 | |||
| 光柱设置 | 显示光柱 | ||
| 显示光柱 | 默认开启,开启后显示光柱 | ||
| 光柱颜色 | |||
| 标注圆点颜色 | |||
| 标注圆点缩放 | 0.3 | 小数,不同的地图书籍,标注圆点大小一般都需要设置缩放,以适应地图的大小 | |
| 光圈颜色 | |||
| 光柱位置 | 数值,默认和地图区域突起高度一致,使得光柱始终显示在地图区域上方,也可以微调高于区域厚度 | ||
| 光柱最小高度比例 | 0.1 | 光柱高度随数值大小变化,有时候数值过小会导致光柱几乎看不到。可以设置一个最小数值显示的光柱高度比例。 | |
| 光柱最大高度比例 | 0.5 | 用于限制光柱的最大高度 | |
| 数据标签设置 | 数据标签 | ||
| 显示数据标签 | 默认开启,开启后在光柱上方显示数值标签 | ||
| 标签文本内容格式 | {name}:人流量{value},{extObj.status} | 通过表达式获取数据,自定义数据标签的显示内容。如果需要定义复杂的数据标签样式,推荐使用格式化函数 | |
| 文本字体名称 | |||
| 字体大小 | |||
| 字体加粗 | |||
| 文字颜色 | |||
| 文字行高 | |||
| 背景边距 | |||
| 背景圆角 | |||
| 背景图片 | 可以设置数据标签的背景图片,实现个性化的视觉效果 | ||
| 背景颜色 | |||
| 标签宽度 | |||
| 标签高度 | |||
| 标签位置 | 默认跟随光柱上方,可以指定统一的高度 | ||
| 标签位置微调 | 0.1 | 微调数据标签相对光柱的位置 | |
| 开启轮播 | 开启后会自动轮播数据标签 | ||
| 轮播间隔时长 | |||
| 触发事件 | 开启后,轮播时会触发地图的点击事件,可以实现数据轮播和其他组件交互的效果 | ||
| 编辑时轮播 | 默认只在浏览看板时轮播,在设计时不轮播,开启后,设计时也自动轮播 | ||
| 路线设置 | 地图中定义的多段线 会显示为路线,路线是有方向的,目前支持流动效果 | ||
| 显示路线 | 开启后显示路线。 | ||
| 路线颜色 | |||
| 路线宽度 | |||
| 流动速度 | |||
| 路线贴图 | png图片,实现不同的线路流动效果 | ||
| 贴图微调X | 0.1 | ||
| 贴图微调Y | 0.1 | ||
| 显示箭头 | 开启后线路末端显示箭头 | ||
| 位置微调 | 0.1 , 微调路线在三维空间中 Z轴上的位置 |
3. 配置数据
切换到数据配置,配置数据来源,关于不同数据类型的区别,请参考文档:组件通用配置说明
组件默认的数据是通过 数据过滤转换 函数来模拟的动态变化数据,实际使用时绑定你自己的数据即可。
零代码绑定数据,数据集中包含以下字段即可。
光柱和数据标签图层所需数据字段
| 名称 | 说明 | 示例值 |
|---|---|---|
| 地点名称 | 和地图中定义的建筑名称一致即可 | |
| 数值 | ||
| 扩展字段 | 可以在点击事件等函数中获取使用 |
根据地点名称或经纬度显示都可以。
4,交互、事件
在点击事件、标签格式化 等函数中,除获取基本的name、value 等信息外,还支持获取扩展字段的数据。
标签格式化(数据标签中的内容,可以通过格式化函数自定义内容,示例):
标签内容支持HTML内容,可以实现丰富的样式。
(item,data) => {
//item 当前数据对象
//data 该组件的所有数据
//返回需要展示的富文本
return '<div>' + item.name + ":" + item.value + '</div>';
}
点击事件(点击数据标签或区域名称都会触发点击事件):
点击数据标签,可以获取到当前点击的数据。
下面示例,点击数据标签时,联动更新其他图表数据
(item,items,visual,e)=>{
//item 说明:数据项
//items 当前大屏的全部图层
//visual 说明:当前组件对象,可调用内置函数
if(item.$ct==='l'){
//点击的是区域名称
}else if(item.$ct==='dl'){
//点击的是数据标签
}
}
更多推荐
所有评论(0)