3D城市-抢先版

文档基于3D城市-抢先版v1.0.4版本

组件说明

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

效果案例

*3D城市-抢先版默认样式

组件结构

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

一、父组件配置

子组件管理

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

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

*子组件管理

样式

1、基本属性

位置尺寸：

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

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

*组件位置尺寸说明

默认隐藏：

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

2、地图底图

底图类型

支持mapbox和xzy格式的地图服务。

样式类别

当地图类型为mapbox格式时，支持选择默认样式、自定义地图样式。

默认样式：组件内预制五种默认底图样式。

*mapbox默认样式

自定义样式：使用在mapbox studio中编辑好的地图样式，该样式需要输入mapbox中Accss Token和Style URL。

坐标系

当地图类型为XYZ格式时，支持选择WGS84、GCJ02两种坐标系。

底图数据获取

下面展示如何获取第三方开源地图服务，以mapbox为例。

1. 打开mapxbox studio链接 https://account.mapbox.com/

2. 创建新的地图样式。

*创建样式

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

*获得token和url链接

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

*配置地图样式

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

缩放范围

支持地图缩放通过0-18级的缩放条控制。

加载页

默认开启，开启后地图展示前会加载渐显效果。

3、场景效果

环境光

支持自定义编辑颜色、强度等配置信息。

天空

支持选择不同时段的天空类型。

*天空时段

辉光

默认关闭，开启后可以对特定建筑物附加光效，支持自定义强度、半径等配置信息。

*辉光效果

4、场景管理

单击父组件内「场景管理」按钮，进入辅助编辑视图，可以自定义创建多个场景，每个场景可以设置动画类型、环绕速度等配置；另支持预设中心点位经纬度以及对应地图初始化缩放层级。

*场景管理编辑配置

动画类型

主要为「环绕」、「多点巡航」两种动画类型。

环绕：添加好场景后可直接左侧鼠标编辑三维视图，镜头视角处点击保存即可录入，支持设置环绕速度配置信息。

多点巡航：可以添加多个镜头，镜头视角处点击保存即可录入，各镜头串联及可完成连贯场景的配置，支持设置各镜头间切换时间等配置信息。默认开启「循环播放」，开启可以实现多个镜头之间自动切换播放的效果。

动画预览

点击可以开始开始、暂停或停止镜头的动画效果。

与其他组件交互

支持通过交互组件的自定义事件控制多场景切换，如使用选项卡组件，鼠标点击可以切换至特定场景。

*通过自定义事件控制多场景切换

二、子组件配置

1、3D建筑

切换当前城市所用的模型数据。

如何获取数据：

基础配置

样式配置

辉光：主体组件开启时才有效

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

自定义数据：需自行获取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、自定义模型

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

基础配置

样式配置

创建对应子组件后，可在样式配置上传自定义模型文件，模型上传后可单击编辑模型进入二级编辑视图。对模型文件位置、大小、角度等基础配置进行可视化调配，以对应实际场景。（提示：建议采用 GLB格式模型文件，大小控制在30MB以内。）

模型调试

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

6、点标记

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

基础配置

样式配置

支持设置点的形状、颜色、大小、方向以及尺寸类型是否随数据映射，且支持自定义上传标识图标或视频。

数据

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

*组件数据格式说明

数据样例

[

         {

                  "name": "杭州嘉里中心",

                  "lng": 120.158,

                  "lat": 30.262,

                  "value": 10

         },

         {

                  "name": "黄龙体育馆",

                  "lng": 120.129,

                  "lat": 30.269,

                  "value": 30

         },

         {

                  "name": "西湖文化广场",

                  "lng": 120.158,

                  "lat": 30.28,

                  "value": 50

         }

]

7、流光

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

基础配置

样式配置

支持自定义上传GeoJSON数据。

可对流光线条的颜色、粗线、速度进行自定义配置。底线样式默认关闭，开启可配置底线颜色。还支持自定义流线动画的速度和间隔时长。

8、方向光

方向光子组件主要针对3D模型设置，可以设置特定光源和目标的照射效果。

样式配置

可以单机光照调试进入方向光子组件编辑界面，支持编辑方向光的颜色、强度、光照方向。

通过正中央选项卡切换，可分别对光源和目标进行设置。可以通过鼠标对光源和目标进行随意拖拽。或者根据右侧配置项进行光源和目标的经纬度设置。

9、信息面板

主要用于提示各区域数据/面板信息

基础配置

样式配置

可以设置背景样式和定位点的样式，支持上传自定义图片，可通过基准点调节标牌背景与定位点的位置关系。行配置可以设置面板内容的标签样式、值样式、后缀样式。

*设置背景样式和定位点样式

动画

可以设置面板切换方式（无、点击、悬停）、动画轮播间隔、点击聚焦

数据

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

*组件数据格式说明

数据样例

 [

         {

                  "name": "地方分部",

                  "state": "正常",

                  "lng": 121.138414,

                  "lat": 30.058213,

                  "height": 60,

                  "zoom": 17

         },

         {

                  "name": "地方分部",

                  "state": "异常",

                  "lng": 121.150142,

                  "lat": 30.018194,

                  "height": 60,

                  "zoom": 17

         }

]

10、热力

主要用于标识不同区域数据量聚合程度。

基础配置

样式配置

支持设置聚合热力的最大高度、颜色、半径、模拟因子，同时支持数据范围来控制数据聚合区的填充。

数据

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

数据样例

[

         {

                  "lng": 116.339362,

                  "lat": 39.724042,

                  "value": 100

         },

         {

                  "lng": 123.504194,

                  "lat": 43.52114,

                  "value": 80

         }

]

11、图片层

基础配置

样式配置

支持自定义上传图片，通过经纬度范围来控制图片边界