# 3D地球

3D地球组件包括球体本身、球体层和光源、光晕、飞线、热力图、天空盒等多个子组件组成。通过增加子组件可改变球体样式、球体光源方向、飞线起终点、热力图区域范围等样式,使地球能摆脱平面感以更立体生动的方式,基于真实的地理位置展现全球数据态势。

# 球体

在画布绘制一个3D地球,通过右侧编辑面板配置球体基础样式。

配置项 说明
环境光 球体默认环境光为白光,可修改不同颜色。
球体所反射的颜色会受到其类型和叠加色的影响
光滑度 基于物理渲染(PBR)来修改材质光滑程度。
自转速度 自转速度为0时球体不自转,大于0时顺时针自转,小于0时逆时针自转
类型 分为白天和夜晚,不同的时间的球体会影响后续叠加的样式。
叠加色 在球体类型的基础上增加叠加色,叠加色会影响球体反射的光。
凹凸感 基于物理渲染(PBR)来增加材质的凹凸起伏感。
视角 发布与预览时相机注视的视角,包含经纬度和距离三个参数。
交互 控制3D地球的交互,包含俯仰角与缩放限制。 俯仰角允许球体俯仰视角交互
的范围为0~180°,当俯角仰角数值相同时,仅允许球体水平旋转交互。
缩放限制是允许对地图缩放的距离限制,最近最远距离相同时,地图无法缩放。

# 增加子组件

在画布中创建一个3D地球组件,点击图层面板地球组件右侧[+],单击选中一个或多个子组件进行添加。

# 球体层

球体层分为自定义球体层和点阵球体层,球体半径默认为1,如果球体层半径小于球体将无法包裹住球体导致样式失效。球体层半径默认1.01,同时添加两个球体层需修改任意一层,否则显示效果不佳。

子组件 说明
自定义球体层 支持修改球体皮肤。将图片地址粘贴至链接框内。
点阵球体层 支持修改球体底色、点阵颜色、大小、密度。

# 环境光

即视3D地球支持添加光晕、天空盒等子组件,用于模拟地球外层光晕、环境。

子组件 说明
光晕 配置球体外层光晕的。
天空盒 支持填写背景图片地址,不同位置的图片要求宽高大小一致。

# 光源

即视提供点光源、平行光两种光源子组件用于模拟不同光源照射于地球球体的效果,支持显示或隐藏光源辅助。点光源相对于平行光的光源范围稍小。

子组件 说明
平行光 平行光是平行于球体表层固定高度的光源,可修改平行光水平、竖直方向的距离和
光源颜色。
点光源 点光源支持修改距离球体高度、方向、光源颜色,衰减值越高,光源强度越低。

# 标记点

在3D地球中标记地理位置点可以使用光柱、气泡光波、静态标记等子组件,通过修改子组件的样式和经纬度标记不同的位置。当气泡光波和静态标记的离地高度小于球体层半径时会被覆盖。

子组件 说明
光柱 在地理位置点上生成一个光柱,支持修改光柱颜色、高度、直径。
气泡光波 在地理位置点上生成一个气泡光波,支持修改光波的颜色、光波高度和直径、光波形状、发送光波的速度。
静态标记 使用图标标记地理位置点,支持修改标记图片地址、尺寸、离地高度。

# 数据格式

光柱、气泡光波、静态标记使用的数据是由地理位置的经纬度组成的数组,每组数组需要按照[lng,lat]的格式排列,具体数据格式如下:

[
  [
    4.21875,
    21.943046
  ],
  [
    113.911722,
    30.748697
  ],
  [
    94.220067,
    39.910476
  ],
  [
    112.857638,
    35.173107
  ]
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 区域热力图

适用于在3D地球中展示某一区域的数据热力信息。

配置项 说明
高度 配置热力图离地高度。
区域 配置热力图颜色范围、不透明度。
轮廓 配置热力图轮廓颜色和宽度。

# 数据格式

区域热力图分为地理数据热力数据两种数据。

  • 地理数据:确定热力区域的边界,数据格式为GeoJson。参考如下:
{
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": {
          "adcode": "110000",
          "name": "北京市",
          "center": [
            116.405285,
            39.904989
          ],
          "centroid": [
            116.419889,
            40.189911
          ],
          "childrenNum": 16,
          "level": "province",
          "parent": {
            "adcode": 100000
          },
          "subFeatureIndex": 0,
          "acroutes": [
            100000
          ],
          "adchar": null
        },
        "geometry": {
          "type": "MultiPolygon",
          "coordinates": [
            [
              [
                [
                  116.812128,
                  39.616018
                ],
                [
                  116.79057,
                  39.596196
                ]
              ]
            ]
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "adcode": "120000",
          "name": "天津市",
          "center": [
            117.190182,
            39.125596
          ],
          "centroid": [
            117.347019,
            39.28803
          ],
          "childrenNum": 16,
          "level": "province",
          "parent": {
            "adcode": 100000
          },
          "subFeatureIndex": 1,
          "acroutes": [
            100000
          ],
          "adchar": null
        },
        "geometry": {
          "type": "MultiPolygon",
          "coordinates": [
            [
              [
                [
                  117.765602,
                  39.400437
                ],
                [
                  117.699696,
                  39.407372
                ]
              ]
            ]
        }
      }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
  • 热力数据描述了指定区域的热力值,通过地理数据的adcode找到目标区域。
[
  {
    "adcode": "110000",
    "value": 0.5613282621648004
  },
  {
    "adcode": "120000",
    "value": 0.8992043453507113
  }
]
1
2
3
4
5
6
7
8
9
10
参数 说明
adcode 地理数据中地区对应的adcode。
value 对应地区的热力值,区域热力颜色根据热力值的大小进行分布。

# 柱状图层

基于地理位置使用立体的柱子展示当前值的大小,支持修改柱子的颜色大小高度、数值颜色范围等配置项。

配置项 说明
底面半径 控制柱子的半径大小,同时对所有柱子生效。
底面形状 修改柱子的形状,默认为正方形。
高度范围 配置柱子的高度范围,当最小值为零时,数值最小的柱子高度为0。
颜色范围 配置不同数值的柱子颜色范围。
不透明度 修改柱子的不透明度。

# 数据格式

柱状图需要的数据有:地理位置的坐标、热度值,具体格式如下:

[
    [
    4.21875,
    21.943046,
    0.37203984343674223
  ],
  [
    113.911722,
    30.748697,
    0.7618898469242312
  ],
  [
    94.220067,
    39.910476,
    0.8900452255902032
  ]
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 飞线与弧线

通常在3D地球中使用飞线或弧线展示两个不同位置点的关联、适用于展示贸易流向、物资来往等场景。

子组件 说明
飞线 飞线是从起始点飞向终点的一条线,支持修改飞线颜色、飞线飞出时的弧长、弧宽、离地高度、飞线的线数、线簇宽、飞线密度和飞行速度。
弧线 弧线是起终点之间的一条连线,可通过调整弧线背景色和弧线颜色模拟实线效果,支持修改线弧宽度、离地高度、线段数、线段间隔、速度。

# 数据格式

飞线和弧线的数据是由起点坐标、终点坐标构成的对象数组。

[
  {
    "from": [
      4.21875,
      21.943046
    ],
    "to": [
      113.911722,
      30.748697
    ]
  },
  {
    "from": [
      94.220067,
      39.910476
    ],
    "to": [
      112.857638,
      35.173107
    ]
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 散点

在3D地球上使用散点子组件来表达点数据的分布情况,散点需高于球体层否则无法展示。

配置项 说明
散点 修改散点的颜色、大小范围、离地高度。
闪烁 配置散点效果、动画。

# 数据格式

散点子组件需要有位置的坐标值和热度值。

 [
    {
        "loc": [
        4.21875,
        21.943046
        ],
        "value": 5
    },
    {
        "loc": [
        113.911722,
        30.748697
        ],
        "value": 2
    },
    {
        "loc": [
        94.220067,
        39.910476
        ],
        "value": 1
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 轨迹

通过轨迹子组件模拟多个地理位置之间的运动轨迹路线,要求大于等于两个地理位置点时使用此子组件。

配置项 说明
颜色 配置轨迹流光颜色和轨迹底色。
线条 配置轨迹的线宽和离地高度。
流光 配置流光分段个数和流光间隔大小。
速度 配置轨迹的运动速度。

# 数据格式

[
  [
    [
      116.23535156249999,
      39.977120098439634
    ],
    [
      120.36621093749999,
      31.240985378021307
    ],
    [
      115.400390625,
      25.085598897064752
    ],
    [
      105.4248046875,
      22.39071391683855
    ],
    [
      90.791015625,
      30.977609093348686
    ]
  ]
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 移动图标

使用移动图标配合轨迹子组件更直观的展示多个地理位置之间的传递轨迹路线。

配置项 说明
图标 修改移动图标图片地址。
尺寸 修改移动图标的尺寸大小。
离地高度 修改移动图标的离地高度。
速度 修改移动图标的飞行速度。
路径辅助 开启路径辅助出现当前移动图标的轨迹路线。

# 数据格式

移动图标的数据由多个位置点的坐标构成。

[
  [
    [
      116.23535156249999,
      39.977120098439634
    ],
    [
      120.36621093749999,
      31.240985378021307
    ],
    [
      115.400390625,
      25.085598897064752
    ],
    [
      105.4248046875,
      22.39071391683855
    ],
    [
      90.791015625,
      30.977609093348686
    ]
  ]
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 飞行物

即视提供飞行物子组件用于更直观展示不同线路下的运输和贸易,配合子组件弧线能更加清晰地描述航班轨迹、货物运输等场景。

配置项 说明
图标 修改飞行物图片地址。
尺寸 修改飞行物的尺寸大小。
离地高度 修改飞行物的离地高度。
速度 修改飞行物的飞行速度。
路径辅助 开启路径辅助出现当前飞行物的轨迹路线。

# 数据格式

[
    {
    "from": [
      4.21875,
      21.943046
    ],
    "to": [
      113.911722,
      30.748697
    ]
  },
  {
    "from": [
      94.220067,
      39.910476
    ],
    "to": [
      112.857638,
      35.173107
    ]
  }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 湍流

3D地球子组件湍流是由大量密集的粒子集合而成的轨迹,描述了数据在多个地理坐标的流向.

配置项 说明
离地高度 修改湍流的离地高度。
粒子大小 修改湍流中粒子的大小。
粒子颜色 修改湍流中粒子的颜色。
速度 修改湍流的流动速度。
密度 修改湍流的粒子密度。
范围 修改湍流粒子的扩散范围。

# 数据格式

湍流的数据为GeoJson格式,在coordinates定义坐标经纬度。

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            109.48974609375,
            36.59788913307022
          ],
          [
            103.82080078125,
            36.03133177633187
          ],
          [
            87.615966796875,
            43.79488907226601
          ],
          [
            80.40206909179688,
            44.21026476671932
          ],
          [
            76.9427490234375,
            43.229195113965005
          ]
        ]
      }
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
字段 说明
geometry 定义type类型为LineString , 即线元素。
coordinates 对于type类型为LineStringcoordinates成员必须是两个或者多个位置的数组