3D城市v1.1.11

文档基于3D城市 v1.1.11版本

组件说明

该组件主要以三维形式展现城市建筑群及相应地理信息数据,支持自定义上传三维模型,可在3D城市建筑基础上叠加点标记、点子围栏、飞线等地理信息子组件。

效果案例

*3D城市默认样式

组件结构

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

*组件结构说明

模块

说明

父组件

外围的「城市容器」部分,支持对全局位置、中心点位进行配置

子组件

城市内数据叠加、装饰形态,可单独定义样式风格及相关数据


一、父组件配置

子组件管理

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

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

*子组件管理


样式

1、基本属性

位置尺寸:

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

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

*组件位置尺寸说明


默认隐藏:

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

地图数据

支持mapbox和xzy格式的地图服务,当地图数据配置为mapbox格式时,可自定义地图样式。

获取第三方开源地图服务(以mapbox为例)

  1. 打开mapxbox studio链接 https://account.mapbox.com/
  2. 创建新的 地图样式。

*创建样式


  1. 分享获得token和样式id。

*获得token和url链接


  1. 将复制的token和样式id粘贴至自定义选框中,即可完成自定义的地图样式。

*配置地图样式

当需要使用准备好的地图时切换格式为xyz,选择对应坐标系,填入对应xyz格式的地图服务地址即可。

2、其他配置项

默认隐藏:

通常和交互事件一起设置达到显隐切换的效果。

自定义样式:

开启后可使用在mapbox studio中编辑好的地图样式。


数据配置:

输入mapbox中Accss Token和Style URL。


地图配置:

支持定义3D城市初始化地图层级,及最大、最小缩放等级。


环境光:

支持自定义编辑环境光、方向光等配置信息。

雾:

默认关闭,开启后可调整“雾”的颜色和浓度。

加载页:

默认关闭,开启后上传地图展示前需要加载的视频文件。



场景管理

单击父组件内场景管理按钮,进入辅助编辑视图,可定义地图容器动画类型及各动画场景切换配置。

支持预设中心点位经纬度及对应地图初始化缩放层级。

视角信息

中心点,可以根据实际地理位置来设置地图中心点以及缩放比例。

天空,支持选择是否开启天空效果,可更改强度,自定义时段或者开启动态根据系统时间计算太阳位置。

*场景管理编辑配置

场景动画主要为「单点环绕」、「多点巡航」,可自定义创建动画场景,

添加好场景后可直接左侧鼠标编辑三维视图,镜头视角处点击保存即可录入,各镜头串联及可完成连贯场景的配置。

再通过自定义交互事件控制「镜头场景」,如点击按钮切换至指定的镜头及场景动画。

*交互组件可与自定义交互事件处控制对应场景的切换

链接点击链接可查看教程demo和创建模板---3D城市场景切换

数据

3D城市主组件数据一般场景下无需进行编辑操作。


交互

载入动画

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

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

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


载入动画配置项:

配置项

说明

渐隐渐显

启用后载入动画增加渐隐渐显过渡

速率

匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1))

方向

动画方向

持续时间

载入动画持续时间,单位为ms

延时

载入动画延时长,单位为ms


自定义事件

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

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


二、子组件配置

1、3D建筑

主要用户切换当前城市所用的地图数据。


样式配置

默认提供mapbox服务下的数据。

提示,mapbox需在可以访问外网的情况下使用,若纯内网环境则需自定义准备三维地图数据。

若选择使用mapbox数据,则可对3D城市各楼宇模型基础颜色信息进行调节。


若选择自定义数据则需自行获取GeoJSON数据(提示,由于该组件为三维城市组件,故GeoJSON需具备层高信息,由系统对层高进行生成)。

数据获取方式👇

此处为语雀内容卡片,点击链接查看:https://dtstack.yuque.com/easyv/il3lgc/sn4gda83rqpmuch3

支持自定义上传3D材质贴图。

支持设置总体的单层层高。

样式配置

支持增添不同的样式,可分别设置侧边、顶部贴图、透明度等参数,可显示和更改边框颜色。


2、围栏

即地理围栏,主要划定所需的地理边界范围。


样式配置

支持自定义上传地理围栏边界数据,即geojson数据。

支持设定对应高度及围栏的颜色风格。


3、标牌

主要通过标牌展示各位置相关文本、数值指标。

样式配置

支持自定义上传标牌图片,且支持定义尺寸及内容文本字号、颜色。

支持自定义下钻的速度和时长。


数据

根据真实地理经纬度数据驱动。

字段

说明

name

标牌名称

lng

经度

lat

纬度

height

高度

zoom

下钻缩放层级

*组件数据格式说明

数据样例

[
	{
		"name": "东  方  明  珠",
		"lng": 121.49527448703134,
		"lat": 31.241901947118933,
		"height": 0,
		"zoom": 17
	},
	{
		"name": "人民英雄纪念塔",
		"lng": 121.48694928715258,
		"lat": 31.244265401448402,
		"height": 0,
		"zoom": 17
	}
]


4、飞线

主要用于标识展示两地间数据往来、交互。


图层配置

渲染顺序,渲染顺序搞得图层会对渲染顺序底的图层覆盖。

样式配置

支持定义飞线起始、结束分段的颜色及透明度。

支持定义飞线长度、宽度、高度。

这次会自定义选择开启飞线底线并编辑相应颜色、粗细、透明度。

动画配置 可设置速度和飞线随机开始。


数据

根据真实地理经纬度数据驱动。

字段

说明

startLng

起点经度

startLat

起点纬度

endLng

终点经度

endLat

终点纬度

*组件数据格式说明

数据样例

[
	{
		"startLng": 121.49527448703134,
		"startLat": 31.241901947118933,
		"endLng": 121.48694928715258,
		"endLat": 31.244265401448402
	},
	{
		"startLng": 121.49527448703134,
		"startLat": 31.241901947118933,
		"endLng": 121.50335303237051,
		"endLat": 31.236381953255986
	}
]


5、水波

对3D城市组件中河流、湖泊、大海等水域进行设置。

配置项

说明

图片

支持自定义上传图片来修改水波样式

大小

修改单位面积的水波大小和水波的稠密

移动距离

修改水波图层的移动距离

速度

修改水波图层的移动速度


6、冲击环

冲击环主要用于标记点位信息,圆环具备扩散动效。


样式配置

支持定义圆环色彩、尺寸、扩散动画速度。


数据

根据真实地理经纬度数据驱动。

字段

说明

lng

经度

lat

纬度

height

高度

*组件数据格式说明

数据样例

[
	{
		"lng": 120.129,
		"lat": 30.269,
		"height": 1
	},
	{
		"lng": 120.158,
		"lat": 30.28,
		"height": 0
	},
	{
		"lng": 120.158,
		"lat": 30.262,
		"height": 50
	},
	{
		"lng": 120.218612,
		"lat": 30.220416,
		"height": 0
	},
	{
		"lng": 120.242473,
		"lat": 30.247854,
		"height": 0
	},
	{
		"lng": 120.127631,
		"lat": 30.203653,
		"height": 0
	},
	{
		"lng": 120.094844,
		"lat": 30.27306,
		"height": 0
	},
	{
		"lng": 120.122481,
		"lat": 30.319007,
		"height": 0
	},
	{
		"lng": 120.142394,
		"lat": 30.275136,
		"height": 0
	},
	{
		"lng": 120.21947,
		"lat": 30.303595,
		"height": 0
	}
]


7、火焰

对3D城市组件画面设置火焰效果。

配置项

说明

颜色

3D城市火焰效果颜色和透明度设置

尺寸

3D城市火焰效果尺寸进行设置

8、自定义模型

主要用户导入、编辑自定义三维模型文件。


模型配置

创建对应子组件后,可在样式配置上传自定义模型文件,模型上传后可单击编辑模型进入二级编辑视图。

对模型文件位置、大小、角度等基础配置进行可视化调配,以对应实际场景。

提示:建议采用 GLB格式模型文件,建议大小控制在30MB以内(最大不可以超过150MB)。

点击更改按钮即可上传“素材广场--模型库”中收藏的模型素材。

模型调试

上传或更改模型后对模型文件位置、大小、角度等基础配置进行可视化调配,需要注意一点,上传模型后需要在定位中定位具体模型模型才会显示在指定地点。


9、点标记

主要用于做点位分布密度的标识。


基础配置

支持自定义上传标识图标,且支持自定义编辑图标颜色、大小、叠色。

支持上传视频作为点标记,可更改大小。

数据

根据真实地理经纬度数据驱动。

字段

说明

lng

经度

lat

纬度

*组件数据格式说明

数据样例

[
	{
		"lng": 121.48694928715258,
		"lat": 31.244265401448402
	},
	{
		"lng": 121.48606538772583,
		"lat": 31.239728657030906
	},
	{
		"lng": 121.48606538772583,
		"lat": 31.239728657030906
	}
]


10、流光

主要用于轨迹、路线展示。


样式配置

支持自定义上传GeoJSON数据。

可对流光线条的颜色、透明度、粗细、速度进行自定义配置。



11、扩散围栏

对目标区域设置动态扩散的围栏效果,可达到突出显示目标区域的效果。

样式配置

配置项

说明

随机开始

选择扩散围栏动画是否随机开始

顶部颜色

设置围栏顶部的颜色和透明度

底部颜色

设置围栏底部的颜色和透明度

起始半径

设置围栏出现时的半径大小

结束半径

设置围栏消失时的半径大小

起始高度

设置围栏出现时的高度

结束高度

设置围栏消失时的高度

动画时长

设置围栏动画的持续时间

动画间隔

设置围栏动画的间隔时间

动画线性

设置围栏动画的线性变化类型


12、扫光

扫光组件针对自定义模型,一般不常用,可以理解为在3D自定义模型外有一光源,呈放射状扫过目标模型,扫过的路径近似为一圆环状,如下图所示:

扫光配置

配置项

说明

颜色

对扫光的颜色和透明度进行设置

强度

对光强度进行自定义设置

模糊

对扫光照射自定义模型的模糊度进行设置,范围为0~0.1

衰退

对扫光照射自定义模型的衰退效果进行设置,设置范围为1~2

灯光高度

对光源的高度进行自定义设置

中心

对光源的经纬度进行自定义设置

内环

对内环的起始半径和终止半径进行自定义设置

外环

对外环的起始半径和终止半径进行自定义设置

动画时长

对扫光的动画时长进行自定义设置


13、方向光

方向光子组件主要针对3D模型设置,可以设置特定光源和目标的照射效果。这里以东方明珠自定义模型为例,对方向光子组件进行编辑:


进入方向光子组件编辑界面后,通过正中央选项卡切换,可分别对光源和目标进行设置。可以通过鼠标对光源和目标进行随意拖拽。或者根据右侧配置项进行光源和目标的经纬度设置。


配置项

说明

基础配置

颜色

对光源颜色和透明度进行自定义设置

强度

调整光源的强度

阴影

选择3D模型在方向光的照射下是否呈现阴影效果

方向配置

光源

对光源的经纬度和高度进行自定义设置

目标

对目标的经纬度和高度进行自定义设置



14、粒子系统

在粒子系统可以配置粒子的基础配置和动画配置。

基础配置

粒子图片

粒子图片,可自定义上传粒子图片。

粒子数量

系统中包含的粒子数量。

粒子尺寸

粒子尺寸大小。

透明度

透明度从0-1可按需调节。

粒子位置

粒子开始漂浮的位置,0为从地面开始。

粒子范围

粒子“漂浮”的范围,从长度、宽度、高度三项进行调节。

动画配置

垂直运动速度

粒子垂直上下运动速度。

水平运动速度

粒子垂直水平运动速度。

风向模拟

从风向和风强两方面进行模拟;风向从x/y/z三个方向模拟。




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

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

400-8505-905复制
免费试用
在线咨询
微信社区
易知微-数据可视化
微信扫一扫入群