3D地球v1.1.5
文档基于3D地球(2022) v1.1.5版本
组件说明
3D地球组件主要以三维地球形式动态展示相对宏观的地理位置数据，如对应企业全球业务分布、业务往来频次等，支持定义地球内点位、标记、飞线、中心场景切换等。
效果案例
*项目部分可视化效果设计
组件结构
3D地球组件主要由「父组件」及「子组件」两部分组成，可根据实际场景分别定义对应配置项。
*组件结构说明
模块 | 说明 |
父组件 | 外围的「地球容器」部分，支持对全局位置、地球视角、中心点位进行配置 |
子组件 | 地球内数据叠加、装饰形态，可单独定义样式风格及相关数据 |
一、父组件配置
子组件管理
组件创建之初，系统会默认携带常用子组件，使用者可根据实际场景对子组件进行新增或编辑。
支持对已添加子组件进行隐藏、重命名、复制、删除操作。
*子组件管理
样式
1、基本属性
位置尺寸：
位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。
尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。
*组件位置尺寸说明
默认隐藏：
控制组件在页面中隐藏，在预览和发布页面中不显示该组件，通常配合交互事件使用该配置项。
2、相机配置
视点位置：
经、纬度即为当前地球正面的中心点位，如希望正中心为北京，即拾取北京的经度及维度坐标填写至对应配置项即可。
相机距离：
即当前位置下，球体的远近，数值越大地球距离越远（即球体显示越小），根据实际的画布大小进行调节。
3、旋转配置
地球旋转：
即地球自转，数值大小控制转速，正负控制地球旋转方向。
场景旋转：
即地球背景旋转，同样数值大小控制转速，正负控制背景旋转方向。
*场景旋转效果
数据
3D地球主组件数据相对固定，系统默认对全球范围数据进行预置，故此处一般场景下无需进行编辑操作。
交互
载入动画
所有组件均提供移入、移入(小)、划变三种组件载入动画。
载入动画选择无时，则组件没有载入动画。
载入动画仅在可视化应用预览、发布组件加载时显示。
载入动画配置项：
配置项 | 说明 |
渐隐渐显 | 启用后载入动画增加渐隐渐显过渡 |
速率 | 匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1)) |
方向 | 动画方向 |
持续时间 | 载入动画持续时间，单位为ms |
延时 | 载入动画延时长，单位为ms |
自定义事件
自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑；
详细的自定义事件教学👉自定义事件教学
二、子组件配置
子组件主要分为「地球材质」、「装饰图层」、「位置数据叠加」、「球体场景动画」四大类型，对应关系如下。
1、地球材质
主要对地球材质样式进行管理。
科技感地球
即默认虚拟、科技感材质，支持自定义对地球内国家板块的背景及边线色彩样式进行配置。
真实地球
即相对现实的材质，支持自定义上传纹理贴图（系统默认预置，可根据实际场景进行替换）。
基础配置：
颜色，为上半部分地球光源的颜色，模拟真实场景下太阳光照。
凹凸感、高度感、金属感：
均为模拟真实场景下地球的质感，可选择性开启，根据实际场景自定义调节对应强度。
发光配置：
支持上传地球灯光纹理，可实现如夜晚视角下地球上真实亮点分布。
2、装饰图层
环境光、方向光、大气层、云层、大气层内、扫描线、科技感云、装饰星星、卫星，均为地球本事复制性装饰图层，组件创建之初系统默认会给出比较适中的配置，也可根据真实情况进行调节，如真实地球材质下、科技感云、扫描线等相对科幻可选择性隐藏。
环境光
颜色 | 环境光颜色 |
强度 | 环境光强度 |
方向光
颜色 | 方向光颜色 |
强度 | 方向光强度 |
位置 | 方向光位置 |
大气层
即地球大气层，从颜色和高度两个维度来设置大气层样式。
云层
即更具有真实效果的云层，从颜色、透明度和高度三个维度来设置云层样式。
大气层内
和大气层相似，可以理解为球体表面外发光和内发光的区别，即地球大气层内侧，从颜色和高度两个维度来设置大气层样式。
扫描线
定位到某一个具体点时扫描定位的效果。
颜色 | “扫描图形”颜色。 |
透明度 | “扫描图形”透明度。 |
速度 | “扫描图形”聚焦到一点的聚焦速度。 |
中心 | 聚焦点的实际经纬度信息。 |
科技感云
组件最外层云层的样式。
外观配置
颜色 | 云层颜色。 |
透明度 | 云层透明度。 |
半径 | 云层半径大小。 |
条数 | 云层有线组成，在此调节组成云层的线数量。 |
动画配置
云层本身运动，可通过横向速度/纵向速度两项配置云层运动速度。
卫星
轨道配置
半径 | 卫星运动半径大小。 |
颜色 | 卫星运动轨迹颜色。 |
透明度 | 卫星运动轨迹透明度。 |
X轴旋转 | 卫星运动轨迹X轴旋转角度。 |
Y轴旋转 | 卫星运动轨迹Y轴旋转角度。 |
Z轴旋转 | 卫星运动轨迹Z轴旋转角度。 |
卫星配置
数据 | 卫星图片，可自定义上传卫星图片。 |
旋转速度 | 卫星绕轨迹旋转速度。 |
颜色 | 卫星颜色。 |
透明度 | 卫星透明度。 |
缩放 | 卫星缩放度，可以调节卫星大小。 |
X轴旋转 | 卫星X轴旋转角度。 |
Y轴旋转 | 卫星Y轴旋转角度。 |
Z轴旋转 | 卫星Z轴旋转角度。 |
装饰星星
地球上方装饰星星样式。
颜色 | 装饰星星颜色。 |
透明度 | 装饰星星透明度。 |
最大点 | 装饰星星最大点大小。 |
最小点 | 装饰星星最小点大小。 |
数量 | 装饰星星总体数量。 |
环绕内径 | 装饰星星围绕地球环绕内经范围。 |
环绕外径 | 装饰星星围绕地球环绕外经范围。 |
旋转速度 | 装饰星星围绕地球旋转速度，数值越大旋转越快。 |
表面线
开启表面线组件后，会在地球表面加上一条路径线条，可以设置模型或图片沿特定路线运动，并可通过样式配置和动画配置调整表面线样式。
样式配置
贴图线配置
线宽：表面线线宽度。
线贴图：表面线轨迹图片，可上传自定义图片。
重复间隔：表面线虚线的长度。
标志类别
标志类别分为模型和图片两大类别。对应为模型配置和线图标配置。
模型配置：
模型 | 可上传自定义运动模型。 |
缩放系数 | 模型缩放系数。 |
曲率 | 模型曲率。 |
线图标配置：
图标 | 上传自定义图标图片。 |
图标宽 | 自定义图片宽度。 |
图标高 | 自定义图片高度。 |
动画配置
渐变比例 | 模型或图片本身会渐变，数值越大则“渐变缩放”效果越大。 |
速度 | 模型或图片运动速度。 |
反向 | 是否开启反向运动。 |
数据
以下示例数据为表面线轨迹，可通过更改经纬度来调整表面线路径。
[
[
{
"lng": 121.08612187340856,
"lat": 29.07360745346299
},
{
"lng": 117.21893437340856,
"lat": 38.4297533703246
},
{
"lng": 117.3947156234085,
"lat": 50.71699038404249
},
{
"lng": 120.34002812340856,
"lat": 40.17732796456953
},
{
"lng": 106.32049687340856,
"lat": 42.2920680465018
},
{
"lng": 89.3576062484085,
"lat": 47.45644096908282
},
{
"lng": 74.59198124840853,
"lat": 46.19364203839057
},
{
"lng": 61.93573124840853,
"lat": 50.40022609515779
},
{
"lng": 41.28143437340853,
"lat": 49.20909910047824
},
{
"lng": 34.25018437340856,
"lat": 52.427989000908475
}
],
[
{
"lng": 26.16424687340853,
"lat": 51.5074835872453
},
{
"lng": 17.19940312340853,
"lat": 51.61676069878087
},
{
"lng": 9.64080937340853,
"lat": 51.61676069878087
},
{
"lng": 3.66424687340853,
"lat": 50.17560279458342
}
]
]火车
基础配置
支持更改模型缩放、车厢偏移、动画渐变比例和单次运动时长。
数据
以下示例数据为表面线轨迹，可通过更改经纬度来调整表面线路径。
[
{
"lng": 121.08612187340856,
"lat": 29.07360745346299
},
{
"lng": 117.21893437340856,
"lat": 33.4297533703246
},
{
"lng": 117.3947156234085,
"lat": 37.71699038404249
},
{
"lng": 116.34002812340856,
"lat": 40.17732796456953
},
{
"lng": 106.32049687340856,
"lat": 42.2920680465018
},
{
"lng": 89.3576062484085,
"lat": 47.45644096908282
},
{
"lng": 74.59198124840853,
"lat": 46.19364203839057
},
{
"lng": 61.93573124840853,
"lat": 50.40022609515779
},
{
"lng": 41.28143437340853,
"lat": 49.20909910047824
},
{
"lng": 34.25018437340856,
"lat": 52.427989000908475
}
]3、位置数据叠加
飞线
主要用于标识展示两地间数据往来、交互。
样式配置：
支持定义飞线起始、结束分段的颜色及透明度。
支持定义飞线长度、宽度、高度。
支持自定义选择开启飞线底线并编辑相应颜色、透明度。
支持显示、更改头部图标，显示落地冲击环，更改环颜色、环半径。
支持设置动画配置的速度，可选择是否随机开始。
支持标牌的文本字形、字号、颜色更改，背景的宽度、高度、位置高度、缩放、背景颜色等参数，可设置基准点、上装饰。
数据：
根据真实地理经纬度数据驱动。
字段 | 说明 |
startLng | 起点经度 |
startLat | 起点维度 |
endLng | 终点经度 |
endLat | 终点维度 |
*组件数据格式说明
数据样例
[
{
"startLng": 116.3,
"startLat": 39.9,
"endLng": 121,
"endLat": 11
},
{
"startLng": 116.3,
"startLat": 39.9,
"endLng": 106.57066,
"endLat": 35.419484
}
]点标记
主要用于做点位分布密度的标识。
样式配置：
支持自定义上传标识图标，且支持自定义编辑图标颜色、大小、透明度。
数据：
根据真实地理经纬度数据驱动。
字段 | 说明 |
lng | 经度 |
lat | 纬度 |
*组件数据格式说明
数据样例
[
{
"lng": 116.3,
"lat": 39.9
},
{
"lng": 121.48,
"lat": 31.22
}
]六边形标记
主要用于做点位分布的标识。
样式配置：
六边形分为内外两层，支持分别对齐半径大小、颜色、边线宽度进行编辑。
数据：
根据真实地理经纬度数据驱动。
字段 | 说明 |
lng | 经度 |
lat | 纬度 |
*组件数据格式说明
数据样例
[
{
"lng": 116.3,
"lat": 39.9
},
{
"lng": 121.48,
"lat": 31.22
}
]柱状图
主要用于做标志性点位数值大小分布的展示。
样式配置：
支持定义最大高度，系统将根据组件内真实的数值大小分布，进行高度切分。
支持定义顶部、底部颜色。
数据：
根据真实地理经纬度数据驱动。
字段 | 说明 |
lng | 经度 |
lat | 纬度 |
value | 相应数值 |
*组件数据格式说明
数据样例
[
{
"lng": 116.3,
"lat": 39.9,
"value": 200
},
{
"lng": 121.48,
"lat": 31.22,
"value": 213
}
]名称标牌
主要用于做标志性区域点位及名称的标识。
样式配置：
支持定义标牌背景颜色、渲染层级、高度宽度、位置高度、缩放，也可以更改基准点、上装饰。
支持定义标牌内文本字形、字号、颜色。
数据：
根据真实地理经纬度数据驱动。
字段 | 说明 |
name | 标牌内所展示文本信息（不宜过长） |
lng | 经度 |
lat | 纬度 |
*组件数据格式说明
数据样例
[
{
"name": "记者站1",
"lng": 116.3,
"lat": 39.9
},
{
"name": "记者站2",
"lng": 121.48,
"lat": 31.22
}
]区域热力
基础配置
数据
在此可上传区域热力地图范围数据。
默认边界
粗细 | 地图边界粗细程度。 |
颜色 | 地图边界颜色。 |
默认填充
以颜色填充地图内未设置社局的地区的默认数据颜色。
数据系列
在数据系列中可以设置不同系列的最大值、最小值和颜色，点击
即可添加一个新的数据系列。数据系列中的系列自动映射数据中的颜色数据。
如下示例所示“10-100”为红色，则热力点中“10-100”数据映射为红色。
数据
设置不同地区的热力值，地区以省份为单位，省份自动映射到地球地点，以下为示例数据。
[
{
"name": "浙江省",
"value": 34
},
{
"name": "山东省",
"value": 8
},
{
"name": "河南省",
"value": 60
}
]ifram标牌
添加了iframe标牌组件后，可在数据中对地球特定经纬度设置iframe标牌。
4、媒体场景动画
场景管理器
主要用于地球各中心区域镜头场景切换展示。
样式配置：
支持默认开启，即地球加载后默认开始切换镜头场景。
可选择单次播放或循环播放。
触发配置，可根据场景管理器内id值进行场景切换，即可通过回调方式进行主动的场景切换，创建管理器可创建多个（即创建多个子组件），每个场景管理器可被单独回调出来，以实现镜头场景切换（下方详细描述）。
数据：
根据真实地理经纬度数据驱动。
字段 | 说明 |
id | 镜头场景序号（可在一个管理器内创建多个场景，也可分开创建多个场景管理器） |
name | 自定义名称字段 |
position | 自定义视点的位置（分别对应经、纬度） |
sceneOffset | 场景位置偏移 |
earthRotateSwitch | 地球旋转开关字段 |
duration | 场景切换时长 |
delay | 场景切换延时 |
*组件数据格式说明
数据样例
[
{
"id": "1",
"name": "beijing",
"position": {
"lat": 39,
"lng": 115,
"distance": 3400
},
"sceneOffset": {
"leftRight": 1000,
"bottomTop": 0
},
"duration": 3000,
"delay": 0
}
]场景切换实战案例
主动式切换场景，案例实践。
1、场景管理器的创建
按需创建场景管理器，如此处分别创建北京为中心切换至上海为中心的场景。
*场景管理器配置示例
场景管理器具体数据如下：
北京：
[
{
"id": "1",
"name": "beijing",
"position": {
"lat": 39,
"lng": 115,
"distance": 3400
},
"sceneOffset": {
"leftRight": 0,
"bottomTop": 0
},
"duration": 3000,
"delay": 0
}
]上海
[
{
"id": "2",
"name": "shanghai",
"position": {
"lat": 30,
"lng": 120,
"distance": 2600
},
"sceneOffset": {
"leftRight": -400,
"bottomTop": 0
},
"duration": 3000,
"delay": 300
}
]2、场景管理器触发配置
场景管理器样式配置内设定对应触发字段及值，
回调变量名 对应设置为id，
回调值根据 北京、上海场景id的不同，分别设置为1和2。
*场景触发配置示例
3、父组件回调参数配置
父组件交互模块下，同样需将id做为回调字段向外发送，如下配置
*父组件回调配置示例
4、触发组件的配置
以选项卡组件为例，做为外部主动切换的触发组件
分别具备对应id值，并设定相应id做为回调参数
*触发组件配置示例
5、预览查看效果
*效果预览
实操模板
链接点击链接查看和创建实操教程：地球场景切换
欢迎您在评论区留下您对该组件的意见，管理员会及时回复您，如长时间未回复欢迎您搜索钉钉群：33782396或者扫描以下二维码添加微信群 @谨禧 说出您的想法，采纳后将送出定制礼品。
也可以通过问卷来向我们反馈需求：https://jinshuju.net/f/XyCXU0