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
区域设置地图区域的边线、颜色等
区域凸起高度区域突起的厚度:通常在地图设计时,不同的建筑会设置不同的高度,这里的凸起高度是指地图中最高的建筑对应的突起高度,其他建筑会等比例进行自适应计算高度
区域颜色
区域透明度
区域贴图选择贴图,如卫星贴图
贴图微调X0.2452小数,水平方向微调贴图使得贴图尽量贴合地图区域
贴图微调Y0.1468小数,垂直方向微调贴图使得贴图尽量贴合地图区域
区域侧面颜色
区域侧面透明度
区域侧面贴图选择贴图,如卫星贴图
贴图侧面贴图微调X0.2452小数,水平方向微调贴图使得贴图尽量贴合地图区域
贴图侧面贴图微调Y0.1468小数,垂直方向微调贴图使得贴图尽量贴合地图区域
隐藏区域名称开启后,不显示区域的名称标签
字体名称区域名称的字体
字体大小
字体加粗
字体颜色
光柱设置显示光柱
显示光柱默认开启,开启后显示光柱
光柱颜色
标注圆点颜色
标注圆点缩放0.3小数,不同的地图书籍,标注圆点大小一般都需要设置缩放,以适应地图的大小
光圈颜色
光柱位置数值,默认和地图区域突起高度一致,使得光柱始终显示在地图区域上方,也可以微调高于区域厚度
光柱最小高度比例0.1光柱高度随数值大小变化,有时候数值过小会导致光柱几乎看不到。可以设置一个最小数值显示的光柱高度比例。
光柱最大高度比例0.5用于限制光柱的最大高度
数据标签设置数据标签
显示数据标签默认开启,开启后在光柱上方显示数值标签
标签文本内容格式{name}:人流量{value},{extObj.status}通过表达式获取数据,自定义数据标签的显示内容。如果需要定义复杂的数据标签样式,推荐使用格式化函数
文本字体名称
字体大小
字体加粗
文字颜色
文字行高
背景边距
背景圆角
背景图片可以设置数据标签的背景图片,实现个性化的视觉效果
背景颜色
标签宽度
标签高度
标签位置默认跟随光柱上方,可以指定统一的高度
标签位置微调0.1微调数据标签相对光柱的位置
开启轮播开启后会自动轮播数据标签
轮播间隔时长
触发事件开启后,轮播时会触发地图的点击事件,可以实现数据轮播和其他组件交互的效果
编辑时轮播默认只在浏览看板时轮播,在设计时不轮播,开启后,设计时也自动轮播
路线设置地图中定义的多段线 会显示为路线,路线是有方向的,目前支持流动效果
显示路线开启后显示路线。
路线颜色
路线宽度
流动速度
路线贴图png图片,实现不同的线路流动效果
贴图微调X0.1
贴图微调Y0.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

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

更多推荐