3D城市 v1.1.0

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

组件说明

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

效果案例

*3D城市默认样式

组件结构

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

*组件结构说明

一、父组件配置

子组件管理

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

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

*子组件管理

样式

1、基本属性

位置尺寸：

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

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

*组件位置尺寸说明

默认隐藏：

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

2、地图数据

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

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

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

*创建样式

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

*获得token和url链接

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

*配置地图样式

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

自定义样式：

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

数据配置：

输入mapbox中Accss Token和Style URL。

地图配置：

支持定义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、冲击环

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

样式配置

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

数据

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

*组件数据格式说明

数据样例

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

6、自定义模型

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

模型配置

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

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

提示：建议采用 GLB格式模型文件，大小控制在30MB以内。

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

模型调试

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

7、点标记

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

样式配置

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

数据

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

*组件数据格式说明

数据样例

[
	{
		"lng": 116.3,
		"lat": 39.9
	},
	{
		"lng": 121.48,
		"lat": 31.22
	}
]

8、流光

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

样式配置

支持自定义上传GeoJSON数据。

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

9、火焰

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

10、水波

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

11、扩散围栏

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

12、方向光

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

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

13、扫光

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

14、粒子系统

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

基础配置

动画配置

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

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