1. 概述

本文将依次介绍地理/3D类组件的配置方式。

2. 详细说明

平面地图

平面地图的入口如下图所示。

地理/3D - 图1

地图组件的绘制方式,跟其他图表组件不太一样。地图组件可以添加子组件,每个子组件可以分别配置数据。可添加多个子组件,相当于多个数据图层(比如一个标记点层+一个飞线层)叠加在一起。

平面地图目前支持标记点、区域填充、飞线、底图等子组件。

地理/3D - 图2

组件名下方会展示已有的子组件数量,点击后可以查看子组件明细,添加、删除子组件。

地理/3D - 图3

点击某个子组件名称,进入该子组件的配置面板。

地理/3D - 图4

子组件的配置面板同父组件类似,也分为样式、数据、交互三个Tab。

地理/3D - 图5

下面,将分别介绍每个子组件的配置方式。

标记点子组件

标记点子组件的添加入口如下图所示。

地理/3D - 图6

标记点的数据配置项如下图所示。

  • 地名:标记点的地理名称信息。
  • 形状:可以拖入字段,用标记点的形状来表征数据,比如拖入“地区”,则不同地区用不同形状的标记点表示
  • 大小:可以拖入字段,用标记点的大小来表征数据,比如拖入“销售额”,则销售额越大的地点,标记点也越大。
  • 颜色:可以拖入字段,用标记点的颜色来表征数据,比如拖入“利润”,则利润越大的地点,标记点的颜色也越深。
  • 经度/纬度:标记点的经纬度坐标。
  • 标签:标记点上的数据标签。
  • 提示信息:鼠标移动到标记点时,悬浮提示框内展示的字段信息。

地理/3D - 图7

标记点子组件的样式设置,分为图形、辅助信息两个子Tab。

图形设置:

  • 标记点样式:设置标记点的形状、尺寸、颜色。
  • 标记点动效:设置标记点的呼吸、渐隐渐显等动画效果。
  • 高亮样式:设置标记点的颜色、尺寸、形状。

地理/3D - 图8

辅助信息:

  • 提示标签:设置标记点的数据标签样式。

地理/3D - 图9

区域填充子组件

区域填充子组件的添加入口如下图所示。

地理/3D - 图10

区域填充子组件的数据配置项如下图所示。

  • 地名:区域的地理名称,可识别国家、省份、县级市等地名。
  • 颜色:可以拖入字段,用区域的填充颜色来表征数据,比如拖入“利润”,则利润越大的地区,填充颜色也越深。
  • 标签:区域上展示的数据标签。
  • 提示信息:鼠标移动到区域时,悬浮提示框内展示的字段信息。

地理/3D - 图11

区域填充子组件的样式设置,分为图形、辅助信息两个子Tab。

图形设置:

  • 轮廓显示范围:设置展示的轮廓范围。
  • 轮廓样式:设置轮廓边界的样式。

地理/3D - 图12

辅助信息:

  • 提示标签:设置区域的数据标签样式。

地理/3D - 图13

飞线子组件

飞线子组件的添加入口如下图所示。

地理/3D - 图14

飞线子组件的数据配置项如下图所示。

  • 起点经度/纬度:飞线起点的经纬度坐标。
  • 终点经度/纬度:飞线终点的经纬度坐标。
  • 颜色:设置飞线头部飞机图标的颜色。
  • 底线颜色:设置飞线颜色。
  • 分组名:设置若干条飞线的组名。
  • 分组序:设置本组发分组序号。

地理/3D - 图15

飞线子组件的样式配置项如下图所示。

  • 飞线样式:设置飞线的顶点形状,飞线粗细、颜色、长度等样式。
  • 底线样式:设置底线的粗细、颜色等样式。
  • 动效:设置飞线的动画速度、落地效果、落地颜色等。

地理/3D - 图16

地图模型子组件

地图模型子组件的添加入口如下图所示。

地理/3D - 图17

地图模型主要是在数据图层底部的gis底图。可以设置底图的样式风格跟显示内容。

地理/3D - 图18

柱状体子组件

柱状体子组件的添加入口如下图所示。

地理/3D - 图19

柱状体子组件的数据配置项如下图所示。

  • 地名:设置地理名称信息。
  • 大小:可以拖入字段,用柱状体高度反映数据,比如拖入“记录数”,则记录数越大,柱状体越高。
  • 颜色:可以拖入字段,用柱状体颜色反映数据,比如拖入“发电量”,则发电量越大,柱状体的颜色也越深。
  • 经度/维度:柱状体的经纬度坐标。
  • 标签:柱状体上的数据标签。
  • 提示信息:鼠标移动到柱状体时,悬浮提示框内展示的字段信息。

地理/3D - 图20 地理/3D - 图21

柱状体子组件的样式设置,分为图形、辅助信息两个子Tab。

图形设置:

  • 柱图样式:柱状体类型、宽度、高度、颜色和偏移。

地理/3D - 图22

辅助信息:

  • 标签:设置偏移、文字样式和背景样式。
  • 提示框:设置偏移、自动轮播、文字样式和背景样式。

地理/3D - 图23

平面地图路线子组件

平面地图路线子组件的添加入口如下图所示。

地理/3D - 图24

平面地图路线子组件的数据配置项如下图所示。

  • 路线名:设置路线名称信息。
  • 颜色:可以拖入字段,用颜色反映数据。 地理/3D - 图25

平面地图路子组件的样式设置,分为路线样式和动效:

  • 路线样式:可以设置路线的颜色、路线粗细、分割比例和分割可见度。
  • 动效:可以设置动画速度。 地理/3D - 图26
平面热力图子组件

平面热力图子组件的添加入口如下图所示。

地理/3D - 图27

平面热力图子组件的样式设置,分为图形属性和卡片信息:

图形属性:

  • 默认位置:调整热力图在平面地图中的位置
  • 底图:体哦正底图样式、显示内特、是否显示中文等。

卡片设置:设置卡片的标题、边框、阴影、背景等样式。
地理/3D - 图28

点云子组件

点云子组件的添加入口如下图所示。

地理/3D - 图29

点云的数据配置项如下图所示。

  • 地名:标记点的地理名称信息。
  • 大小:可以拖入字段,用标记点的大小来表征数据,比如拖入“销售额”,则销售额越大的地点,标记点也越大。
  • 颜色:可以拖入字段,用标记点的颜色来表征数据,比如拖入“利润”,则利润越大的地点,标记点的颜色也越深。
  • 经度/纬度:标记点的经纬度坐标。
  • 标签:标记点上的数据标签。
  • 提示信息:鼠标移动到标记点时,悬浮提示框内展示的字段信息。

地理/3D - 图30

点云子组件的样式设置,分为图形、辅助信息两个子Tab。

图形设置:

  • 标记点样式:设置标记点的形状、尺寸、颜色。

地理/3D - 图31

辅助信息:

  • 提示标签:设置标记点的数据标签样式。

地理/3D - 图32

3D地图

更酷炫地呈现轮廓地图信息。添加入口如下图所示:
地理/3D - 图33

3D地图目前支持标记点、飞线、柱状体等子组件。 地理/3D - 图34

组件下方会展示已有的子组件数量,点击后可查看子组件明细,添加、删除子组件。 地理/3D - 图35

点击某个子组件名称,进入该子组件的配置面板。 地理/3D - 图36

下面,将分别介绍每个子组件的配置方式。

标记点子组件

标记点子组件的添加入口如下图所示。

地理/3D - 图37

标记点的数据配置项如下图所示。

  • 地名:标记点的地理名称信息。
  • 形状:可以拖入字段,用标记点的形状来表征数据,比如拖入“地区”,则不同地区用不同形状的标记点表示
  • 大小:可以拖入字段,用标记点的大小来表征数据,比如拖入“销售额”,则销售额越大的地点,标记点也越大。
  • 颜色:可以拖入字段,用标记点的颜色来表征数据,比如拖入“利润”,则利润越大的地点,标记点的颜色也越深。
  • 经度/纬度:标记点的经纬度坐标。
  • 标签:标记点上的数据标签。
  • 提示信息:鼠标移动到标记点时,悬浮提示框内展示的字段信息。

地理/3D - 图38

标记点子组件的样式设置,分为图形、辅助信息两个子Tab。

图形设置:

  • 标记点样式:设置标记点的形状、尺寸、颜色。
  • 标记点动效:设置标记点的呼吸、渐隐渐显等动画效果。
  • 高亮样式:设置标记点的颜色、尺寸、形状。

辅助信息:

  • 提示标签:设置标记点的数据标签样式。

地理/3D - 图39

点云子组件

点云子组件的添加入口如下图所示。 地理/3D - 图40

点云的数据配置项如下图所示。

  • 地名:标记点的地理名称信息。
  • 大小:可以拖入字段,用标记点的大小来表征数据,比如拖入“销售额”,则销售额越大的地点,标记点也越大。
  • 颜色:可以拖入字段,用标记点的颜色来表征数据,比如拖入“利润”,则利润越大的地点,标记点的颜色也越深。
  • 经度/纬度:标记点的经纬度坐标。
  • 标签:标记点上的数据标签。
  • 提示信息:鼠标移动到标记点时,悬浮提示框内展示的字段信息。

地理/3D - 图41

点云子组件的样式设置:

  • 标记点样式:设置标记点的形状、尺寸、颜色。

地理/3D - 图42

飞线子组件

飞线子组件的添加入口如下图所示。

地理/3D - 图43

飞线子组件的数据配置项如下图所示。

  • 起点经度/纬度:飞线起点的经纬度坐标。
  • 终点经度/纬度:飞线终点的经纬度坐标。
  • 颜色:设置飞线头部飞机图标的颜色。
  • 底线颜色:设置飞线颜色。
  • 分组名:设置若干条飞线的组名。
  • 分组序:设置本组发分组序号。

地理/3D - 图44

飞线子组件的样式配置项如下图所示。

  • 飞线样式:设置飞线的顶点形状,飞线粗细、颜色、长度等样式。
  • 底线样式:设置底线的粗细、颜色等样式。
  • 动效:设置飞线的动画速度、落地效果、落地颜色等。

地理/3D - 图45

柱状体子组件

柱状体子组件的添加入口如下图所示。

地理/3D - 图46

柱状体子组件的数据配置项如下图所示。

  • 地名:设置地理名称信息。
  • 大小:可以拖入字段,用柱状体高度反映数据,比如拖入“记录数”,则记录数越大,柱状体越高。
  • 颜色:可以拖入字段,用柱状体颜色反映数据,比如拖入“发电量”,则发电量越大,柱状体的颜色也越深。
  • 经度/维度:柱状体的经纬度坐标。
  • 标签:柱状体上的数据标签。
  • 提示信息:鼠标移动到柱状体时,悬浮提示框内展示的字段信息。

地理/3D - 图47

柱状体子组件的样式设置,分为图形、辅助信息两个子Tab。

图形设置:

  • 柱图样式:柱状体类型、宽度、高度、颜色和偏移。

辅助信息:

  • 标签:设置偏移、文字样式和背景样式。
  • 提示框:设置偏移、自动轮播、文字样式和背景样式。

地理/3D - 图48

3D热力图子组件

3D热力图子组件的添加入口如下图所示。

地理/3D - 图49

3D热力图子组件的数据配置项如下图所示。

  • 经度/维度:热力图的经纬度坐标。
  • 热力值:热力图上的热力值大小。

地理/3D - 图50

3D热力图子组件的样式设置:
图形属性:

调节热力图热区的颜色、大小、精细程度和显示范围。

地理/3D - 图51

3D地球

3D地球的入口如下图所示。

地理/3D - 图52

3D地球适合于更立体地呈现一些全球性的数据,比如全球的航班路线图。 同平面地图一样,3D地球可以添加标记、区域填充、飞线等子组件。添加方式同平面地图一致。标记、区域填充、飞线等子组件的配置方式也跟平面地图一致。

下钻地球

呈现地理类数据时,可实现从3D地球下钻至平面地图的动效。添加入口如下图所示:

地理/3D - 图53

下钻地球支持平面地图和3D地球的部分组件配置,可以添加标记、区域填充、飞线等子组件。添加方式同平面地图、3D地球一致。标记、区域填充、飞线等子组件的配置方式也跟平面地图和3D地球一致。

模型查看器

模型查看器可以通过模型进行图表或图层,模型的交互、切换及视角切换。

上传模型

地理/3D - 图54

找到对应的模型压缩包,点击上传(现支持GLTF,GLB,FBX,OBJ,ADE格式的zip格式压缩包)

地理/3D - 图55

设置交互参数

地理/3D - 图56

3D模型联动图层:图层+模型

添加一个图层,将图层里面放入图表,在图层外面添加模型。

地理/3D - 图57

添加交互参数

地理/3D - 图58

打开模型编辑器

地理/3D - 图59

设置模型面板参数: 选中模型的面板(可以直接点击模型,也可以直接点击面板)

地理/3D - 图60

userData是输入自定义name与value

地理/3D - 图61

设置模型参数

地理/3D - 图62

地理/3D - 图63

// 参考代码如下
function _innerHandle(record, params)
{
    params.zzz = record.name;

return {zzz:record.name}
}

添加动态图层响应参数

地理/3D - 图64 地理/3D - 图65

3D模型视角切换

点击设置添加相机,选择好合适的视角之后,依次按序号设置(鼠标左键旋转,右键移动,中键缩放) 按4保存当前视角,按5是定位到相机位置。

地理/3D - 图66 地理/3D - 图67

选择模型,设置模型参数。(userData是输入自定义name与value)

地理/3D - 图68

添加响应事件(3是名称,可以自定义修改) 地理/3D - 图69

设置大屏交互参数

地理/3D - 图70

设置模型交互参数。点击模型,写入参数

地理/3D - 图71 地理/3D - 图72

// 参考代码如下
function _innerHandle(record, params)
{
    params.ymqh = record.name1,
    params.zymqh = record.name

return {ymqh: record.name1,zymqh: record.name}
}

最后一步,设置模型响应事件。需要几个镜头就添加几个响应事件。

地理/3D - 图73 地理/3D - 图74

3D轮播图

3D轮播图的入口路径如下:

地理/3D - 图75

3D轮播图是支持将多张图片轮流循环展示的组件,展示效果如下。

地理/3D - 图76

3D轮播图的样式配置

图形属性:

  • 基础:上传需要展示的图片并选择图片是否需要自适应于轮播图。
  • 轮播:设置轮播是否开启及轮播速度。

辅助信息设置:

  • 坐标轴:设置轮播图的文字及背景样式。

卡片设置:设置卡片的标题、边框、阴影、背景等样式。


地理字段的坐标映射

针对维度字段,可设置地理角色。支持设置成4个粒度的地理角色:“国家/地区”、“省/市/自治区”、“城市”、“区县”
地理/3D - 图77

  • 进入配置界面后,系统会先根据字符串进行模糊匹配,未匹配到的数据项,会展示“无法识别”,支持手动选择对应项,手动选择时支持搜索过滤。成功匹配的数据项,也支持手动调整。
    地理/3D - 图78

  • 绘制地图类图表,拖入地理角色字段时,会根据地理角色匹配到的精准定位来绘制数据项,无法识别的数据项会忽略不绘制