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'){
    //点击的是数据标签
  }
}
Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐