3D园区v0.7.6

文档基于3D园区v0.7.6版本

组件说明

3D园区是地图组件的一种，支持自定义园区模型，上传自定义建筑模型，在可视化应用中用于展示智慧园区场景，通常在可视化应用中做智慧园区使用。

效果案例

*智慧园区可视化效果设计

组件结构

3D园区组件主要由「父组件」及「子组件」两部分组成，可根据实际场景分别定义对应配置项。

*组件结构说明

一、父组件配置

子组件管理

组件创建之初，系统会默认携带常用子组件，使用者可根据实际场景对子组件进行新增或编辑。

支持对已添加子组件进行隐藏、重命名、复制、删除操作。

*子组件管理

样式

1、基本属性

位置尺寸：

位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

定点气泡图组件尺寸不影响组件内容显示、组件动画。

*组件位置尺寸说明

默认隐藏：

控制组件在页面中隐藏，在预览和发布页面中不显示该组件，通常配合交互事件使用该配置项。

2、基础配置

设备像素比：

支持自动配置和手动配置，如开启手动配置，开启后可根据设备设置像素比数值。

Gamma输出：

可自由配置Gamma系数，简单而言，系数越高则整体显示效果“更亮”，细数越低则整体显示效果“更暗”。

3、发光效果

光强：

设置全局光照强度

模糊半径：

设置全局光照强度

4、相机

位置：

通过X、Y、Z设置园区视角角度，如需将园区视角由俯视改为平视，可调整Y值大小来实现。

焦点：

通过X、Y、Z设置园区中心视角，默认设置为0，用户可根据需要自己调整。

首先简要说明下概念，近剪切面：将不会呈现比此平面更为接近摄像机的物体。 远剪切面：将不会呈现比此平面更远的物体

远裁剪面：远裁剪面的可视范围数值。

近裁剪面：近裁剪面的可视范围数值。

5、天空配置

对3D园区的天空效果渲染进行配置设置

6、场景雾化

默认关闭，开启后从以下三项配置。

7、园区大小

尺寸

8、背景音乐

音频：

支持自定义上传音频，支持格式有OGG/MP3/WAV。

音量：

设置音量大小

9、园区背景

模型配置：

支持自定义上传园区背景模型，支持glb格式

太阳光：

强度设置太阳光光照强度；位置配置项中设置园区背景位置。

多场景：

设置园区镜头位置，用户可自定义通过鼠标旋转视角，设置入场时间，点击保存可以保存场景视角，点击新建加号可添加不同场景，用于交互配置不同视角场景。

数据

3D园区主组件数据相对固定，此处一般场景下无需进行编辑操作。

交互

载入动画

所有组件均提供移入、移入(小)、划变三种组件载入动画。

载入动画选择无时，则组件没有载入动画。

载入动画仅在可视化应用预览、发布组件加载时显示。

载入动画配置项：

自定义事件

自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑；

详细的自定义事件教学👉自定义事件教学

二、子组件配置

1、自定义模型

模型配置

用户可自定义上传模型，支持上传glb模型，建议上传Draco压缩后的模型文件，文件大小上限为150MB，选中点亮设置模型被选中状态下高亮状态，可以通过自定义交互事件做高亮绑定交互，模型动作中用户可自定义配置模型动作，如旋转、浮动，支持自定义设置动画时间；勾选自动播放可播放模型所绑定的动画。

注意：如果模型在建模软件中体积较大，导入后在默认镜头下无法看到，需调整镜头并调节模型位置。

基础配置

*自定义模型编辑页面

2、流光

用于丰富园区展示效果，可用于人流、车流的展示，编辑页面点击新建，用户可在页面内自主绘制流光线条，点击编辑按钮可对已经绘制的流光线条进行编辑，调节飞线位置，单个点位置，点击独显可针对于该组件进行独立显示，独显为方便用户使用为默认选中状态。

基础配置

动画配置

数据：

根据坐标位置设置流光线条位置

*组件数据格式说明

数据样例

[
	[
		{
			"x": 34.8189111107899,
			"z": -9.600546614043731
		},
		{
			"x": 14.1874309818481,
			"z": -10.562890533227442
		},
		{
			"x": -6.7495572812672675,
			"z": -9.270580997095697
		},
		{
			"x": -46.069440325776114,
			"z": -7.107262486059477
		},
		{
			"x": -55.316301058516416,
			"z": -7.431421036246688
		}
	]
]

3、飞线

用于丰富园区展示效果，可用于信息之间的连接、展示，编辑页面点击新建，用户可在页面内自主绘制飞线线条，点击编辑按钮可对已经绘制的飞线进行编辑，调节飞线位置，单个点位置，点击独显可针对于该组件进行独立显示，独显为方便用户使用为默认选中状态。

基础配置

动画配置

数据：

根据坐标位置设置飞线线条位置

*组件数据格式说明

数据样例

[
	{
		"x1": 0,
		"z1": 0,
		"x2": 20,
		"z2": 0
	},
	{
		"x1": 0,
		"z1": 0,
		"x2": 30,
		"z2": 0
	},
	{
		"x1": 0,
		"z1": 0,
		"x2": 20,
		"z2": 20
	},
	{
		"x1": 0,
		"z1": 0,
		"x2": 0,
		"z2": 20
	},
	{
		"x1": 0,
		"z1": 0,
		"x2": 0,
		"z2": 40
	}
]

4、热力

用于丰富园区展示效果，可用于展示人流、车流或其他数据的密集度，编辑页面点击新建，用户可在页面内自主添加热力点，可在同一点持续叠加，也可在外围数据栏，修改数值大小，更改热力值，点击删除按钮可对已经添加的热力点进行删除，点击独显可针对于该组件进行独立显示，独显为方便用户使用为默认选中状态。

基础配置

颜色区间

用户可自定义设置热力值的颜色区间，可通过比例定义颜色区间。

数据：

根据坐标位置设置热力点位置，根据数值大小设置热力值大小

*组件数据格式说明

数据样例

[
	{
		"x": 40,
		"y": 40,
		"value": 49.82
	},
	{
		"x": 7,
		"y": 64,
		"value": 10.065
	},
	{
		"x": 15,
		"y": 22,
		"value": 49.82
	},
	{
		"x": 68,
		"y": 76,
		"value": 55.547
	},
	{
		"x": 10,
		"y": 51,
		"value": 61.165
	},
	{
		"x": 69,
		"y": 62,
		"value": 76.91
	},
	{
		"x": 65,
		"y": 78,
		"value": 37.305
	},
	{
		"x": 4,
		"y": 73,
		"value": 54.487
	},
	{
		"x": 42,
		"y": 30,
		"value": 2.308
	}
]

5、围栏

用于丰富园区展示效果，可用于针对单个建筑进行突出显示，编辑页面点击新建，用户可在页面内自主添加围栏点，点击编辑按钮可对已经添加的围栏点进行编辑，点击独显可针对于该组件进行独立显示，独显为方便用户使用为默认选中状态。

基础配置

动画配置

数据：

根据坐标位置设置围栏线条位置

*组件数据格式说明

数据样例

[
	[
		{
			"x": 34.8189111107899,
			"z": -9.600546614043731
		},
		{
			"x": 14.1874309818481,
			"z": -10.562890533227442
		},
		{
			"x": -6.7495572812672675,
			"z": -9.270580997095697
		},
		{
			"x": -46.069440325776114,
			"z": -7.107262486059477
		},
		{
			"x": -55.316301058516416,
			"z": -7.431421036246688
		}
	]
]

6、柱子

用于智慧园区场景内部添加装饰，编辑页面点击新建，用户可在页面内自主添加柱子，点击编辑按钮可对已经添加的柱子进行编辑，点击独显可针对于该组件进行独立显示，独显为方便用户使用为默认选中状态。

基础配置

数据：

根据坐标位置设置柱子位置，根据数值大小设置热力值柱子高度

*组件数据格式说明

数据样例

[
	{
		"x": 0,
		"z": 0,
		"h": 5
	},
	{
		"x": 10,
		"z": 0,
		"h": 9
	},
	{
		"x": 10,
		"z": 10,
		"h": 1
	},
	{
		"x": 20,
		"z": 10,
		"h": 5
	},
	{
		"x": 0,
		"z": 20,
		"h": 4
	}
]

7、标牌

用于智慧园区场景内部添加文字类标签，编辑页面点击新建，用户可在页面内自主添加标牌点，点击编辑按钮可对已经添加的标牌点进行编辑，点击独显可针对于该组件进行独立显示，独显为方便用户使用为默认选中状态。

基础配置

数据：

根据坐标位置设置标牌位置，

*组件数据格式说明

数据样例

[
	{
		"x": 0,
		"y": 2,
		"z": 0,
		"t": "text1text1text1text1text1text1"
	},
	{
		"x": 10,
		"y": 2,
		"z": 0,
		"t": "text2text2text2text2text2text2text2text2text2text2"
	},
	{
		"x": 10,
		"y": 2,
		"z": 10,
		"t": "text3"
	},
	{
		"x": 20,
		"y": 2,
		"z": 10,
		"t": "text4"
	},
	{
		"x": 0,
		"y": 2,
		"z": 20,
		"t": "text5"
	}
]

8、点光源

用于在智慧园区内部增加光源，编辑页面点击新建，用户可在页面内自主添加点光源。

基础配置

数据：

根据坐标位置设置点光源位置，

*组件数据格式说明

数据样例

[
	{
		"x": 0,
		"y": 3,
		"z": -5
	},
	{
		"x": 10,
		"y": 3,
		"z": -5
	},
	{
		"x": 10,
		"y": 3,
		"z": 5
	},
	{
		"x": 0,
		"y": 3,
		"z": 5
	}
]

9、粒子系统

用于在智慧园区内部增加光源，编辑页面点击移动，用户可在页面内自由移动粒子位置。

配置

10、图片

用于在智慧园区展示图片

配置

11、信息面板

用于在智慧园区中展示需要展示的信息文字

配置

12、自定义地面

用于丰富园区展示效果。可用于丰富部分区域的地面状态，编辑页面点击新建，用户可在页面内自主修改地面状态。点击编辑按钮可对已经配置好的地面进行编辑，点击独显可针对于该组件进行独立显示，独显为方便用户使用为默认选中状态。

地面类型

可修改地面类型水面或贴图平面

基础配置

自定义地面的基础高度

水面配置

当地面类型切换水面时，可以进行水面配置。

贴图配置

当地面类型切换贴图时，可以进行贴图配置。

13、模型列表

模型列表子组件可以可基于同一类型模型快速构建场景，可对同一类型模型统一配置自定义事件，避免反复添加、配置模型。

样式

ID

模型唯一标识符。例如“1”、“生产机械”、“医疗器械”等。

来源方式

模型来源，可上传自定义模型，也可以通过URL方式引用模型。

模型上传

上传自定义模型即可（仅支持.glb格式模型，建议上传Draco压缩后的文件，上传文件大小上限为150MB）。

引用URL：当您已经部署好模型服务后，可通过URL方式直接引入模型文件。

URL

两种引用URL方式，第一种为引用模型服务地址；

第二种方式需要配合资源列表共同使用，当配合资源列表使用时需要使用"@"作为引用标示符号，例如资源列表中配置了ID为"1"的模型，则在引用时需要填写"@1"。

层级

映射模型携带的层级关系，对应EasyV需要使用相对路径引用，例如引用如下图所示"Polygon_15_1"部分，则填写"./1/1/2"。

当一个整体模型由几部分模型组成时，通过此方式对不同模型组成部分可进行单独自定义事件和回调配置。

泛光

对模型增加泛光效果，当光强高时配合发光效果参数调节综合显示效果。

自动播放动画

当模型本身携带动画效果时，可勾选此项实现模型自身动画自动播放。

3D变换

可通过位置调整模型"x/y/z"坐标系位置；可通过"x/y/z"三个维度调整模型旋转角度；可通过"x/yz"三个维度调整模型缩放级别。

资源列表

上传模型文件，点击即可增加资源。上传模型后可对模型配置ID，当“来源方式”配置为“引用URL”时，可通过"@"标识符引用。

点击效果

即点击模型后镜头聚焦切换，可配置镜聚焦距离和移动速度。

数据

模型可携带模型数据，例如如下示例所示，某个模型可携带多个字段数据，携带的数据后续可进行交互判断或者作为回调使用。数据里必须要有"id"字段，这样才能通过这个"id"字段取配置项中找到对应"id"进行匹配。

{

"machine_id":"floor_1_01",
"machine_status":"normal",
"machine_type":"Processing equipment"

}

交互

点击回调

点击回调即为全局性的参数变量，用于控制组件之间参数的传递，可通过设置回调参数来实现数据驱动交互。

其中，字段值即参数变量，变量名即对字段值的重命名。

详细的回调参数教学👉 回调的使用

配合模型数据使用，可配置点击回调当点击某一模型时发送该模型的数据，在组件接入的数据中根据该模型的id匹配对应的项。

如下数据中示例所示，可将某一字段数据作为回调。例如需要获取机械ID时可将"machine_id"作为回调字段。

{

"machine_id":"floor_1_01",
"machine_status":"normal",
"machine_type":"Processing equipment"

}

自定义事件

简单而言，自定义事件通过事件类型+条件去控制其他组件的不同状态。

自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑。

详细的自定义事件教学👉自定义事件教学

可配置模型数据变化或者点击模型自定义事件，当配置为点击模型时，可在条件中增加条件作为判断，即点击哪类模型时才会发生自定义事件。如下示例图所示即配置点击"machine_id"为"floor_1_01"时发生自定义事件。

若有收获，就点个赞吧

欢迎您在评论区留下您对该组件的意见，管理员会及时回复您，如长时间未回复欢迎您搜索钉钉群：33782396或者扫描以下二维码添加微信群 @谨禧 说出您的想法，采纳后将送出定制礼品。

也可以通过问卷来向我们反馈需求：https://jinshuju.net/f/XyCXU0