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. 创建新的 地图样式。

*创建样式

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

*获得token和url链接

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

*配置地图样式

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

2、其他配置项

默认隐藏：

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

自定义样式：

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

数据配置：

输入mapbox中Accss Token和Style URL。

地图配置：

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

环境光：

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

雾：

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

加载页：

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

场景管理

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

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

视角信息

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

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

*场景管理编辑配置

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

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

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

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

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

数据

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

交互

载入动画

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

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

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

载入动画配置项：

自定义事件

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

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

二、子组件配置

1、3D建筑

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

样式配置

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

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

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

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

数据获取方式👇

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

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

样式配置

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

2、围栏

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

样式配置

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

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

3、标牌

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

样式配置

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

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

数据

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

*组件数据格式说明

数据样例

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

4、飞线

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

图层配置

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

样式配置

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

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

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

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

数据

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

*组件数据格式说明

数据样例

[
	{
		"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": 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城市组件画面设置火焰效果。

8、自定义模型

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

模型配置

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

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

提示：建议采用 GLB格式模型文件，建议大小控制在30MB以内（最大不可以超过150MB）。

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

模型调试

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

9、点标记

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

基础配置

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

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

数据

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

*组件数据格式说明

数据样例

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

10、流光

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

样式配置

支持自定义上传GeoJSON数据。

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

11、扩散围栏

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

样式配置

12、扫光

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

扫光配置

13、方向光

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

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

14、粒子系统

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

基础配置

动画配置

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

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