基础平面地图

注意事项

在DLV地图组件的静态数据中，经纬度信息仅为演示数据格式，DLV不提供地区的经纬度信息，需用户自行准备经纬度信息。

样式

• 尺寸位置
  • 图表尺寸：设置图表的宽和高。单位为px。
  • 图表位置：设置图表在画布中的位置。单位为px。
  图1 尺寸位置-基础平面地图
  
• 添加子组件

  在基础平面地图中可添加的子组件有：地图飞线、地图散点、进阶版散点层、地图下钻、地图热力层、悬浮文本、轮播视频。

  地图子组件的相关操作如下：

  • 添加子组件

    在“样式”配置栏，单击“添加子组件”按钮，然后在弹出菜单中选择一个子组件，即可将该子组件添加到地图组件中。子组件添加完成后，在“添加子组件”按钮下方会显示所添加的子组件名称，例如“地图飞线”。

    图2 添加子组件
    
  • 编辑子组件

    单击子组件名称就可以编辑子组件。

  • 删除子组件

    单击子组件名称后面的按钮，可以删除该子组件。

• 全局样式
  • 地图：单击下拉列表选择选择访问的国家。
  • 地图中心：设置地图中心在图层中的位置。
  • 缩放范围：设置地图中心在图层中的缩放比例。
  图3 全局样式-基础平面地图
  
• 填充设置
  • 填充颜色：设置填充的颜色和透明度。
  • 边线选择：设置边线的颜色和宽度。
  图4 填充设置-基础平面地图
  
• 标签
  • 显示/隐藏标签：单击“标签”右侧的勾选框，表示显示标签，表示隐藏标签。
  • 字体：设置填充的颜色和透明度。
  • 颜色：设置值标签的字体颜色。
  • 字号：设置标签的字号大小。
  • 字体粗细：设置标签的字体粗细样式。
  图5 标签-基础平面地图
  
• 视觉映射
  • 显示/隐藏视觉映射：单击“标签”右侧的勾选框，表示显示视觉映射，表示隐藏视觉映射。
  • 映射类型：单击下拉选项设置视觉映射的映射类型，可以设置为连续型或分段型。
  • 方向：单击下拉选项设置视觉映射的映射方向，可以设置为水平或垂直。
  • 宽度：设置视觉映射的宽度。
  • 高度：设置视觉映射的高度。
  • 左侧：设置视觉映射时距离图层左侧的距离。
  • 底部：设置视觉映射时距离图层底部的距离。
  • 文字：设置视觉映射时文本的字体颜色和字号大小。
  图6 视觉映射-基础平面地图
  
• 选中样式
  • 颜色：单击颜色编辑器设置颜色。
  • 数据值：单击“数据值”右侧的勾选框，表示显示数据值，表示隐藏数据值。
  • 数据名：单击“数据名”右侧的勾选框，表示显示数据名，表示隐藏数据名。
  • 提示文本：
    • 文本样式：设置文本的颜色、字号和字体粗细样式。
    • 提示框：设置提示框的内边距、背景色、自定义大小、边框颜色、边框宽度。
  图7 选中样式-基础平面地图
  
• 开启缩放：开启后，在查看或预览大屏时可通过鼠标滚轮放大或缩小地图。
• 开启平移：开启后，在查看或预览大屏时可通过选中地图并拖动鼠标来平移地图。
• 初始化值：在“交互”页签开启交互时，name字段的初始化值。

数据

上图中的示例数据如下：

[
  {
    "name": "北京",
    "value": 900
  },
  {
    "name": "上海",
    "value": 1200
  },
  {
    "name": "天津",
    "value": 1200
  },
  {
    "name": "重庆",
    "value": 1200
  },
  {
    "name": "山西",
    "value": 1400
  },
  {
    "name": "陕西",
    "value": 1800
  },
  {
    "name": "新疆",
    "value": 2400
  },
  {
    "name": "山东",
    "value": 5000
  },
  {
    "name": "浙江",
    "value": 2500
  },
  {
    "name": "福建",
    "value": 2600
  },
  {
    "name": "广东",
    "value": 2800
  },
  {
    "name": "广西",
    "value": 2900
  },
  {
    "name": "西藏",
    "value": 3300
  },
  {
    "name": "内蒙古",
    "value": 3300
  },
  {
    "name": "河南",
    "value": 3500
  },
  {
    "name": "江苏",
    "value": 3600
  },
  {
    "name": "海南",
    "value": 3700
  },
  {
    "name": "台湾",
    "value": 3800
  },
  {
    "name": "云南",
    "value": 3900
  },
  {
    "name": "贵州",
    "value": 3900
  },
  {
    "name": "四川",
    "value": 4100
  },
  {
    "name": "河北",
    "value": 4400
  },
  {
    "name": "吉林",
    "value": 4700
  },
  {
    "name": "安徽",
    "value": 5000
  },
  {
    "name": "香港",
    "value": 5000
  },
  {
    "name": "澳门",
    "value": 5100
  },
  {
    "name": "辽宁",
    "value": 5400
  },
  {
    "name": "甘肃",
    "value": 5800
  },
  {
    "name": "青海",
    "value": 5800
  },
  {
    "name": "江西",
    "value": 5800
  },
  {
    "name": "湖北",
    "value": 5300
  },
  {
    "name": "黑龙江",
    "value": 5300
  },
  {
    "name": "湖南",
    "value": 5300
  },
  {
    "name": "宁夏",
    "value": 5300
  }
]

交互

关于组件是否支持交互功能及交互的使用方法，请参考设置组件事件交互。

地图飞线

地图飞线是以动态飞线的形式连接地图中的两个地理位置。

图8 基础平面地图 - 地图飞线

• 样式
  • 飞线样式
    • 耀斑大小：单位px。
    • 飞行速率：耀斑飞行的速率。
    • 飞线长度：飞线长度相对两个地理位置之间距离的占比。以起点到终点的距离为1个单位。
    • 轨迹颜色：飞行轨迹的颜色。
    • 轨迹宽度：单位px。
    • 曲率：飞线的弯曲度。当曲率为0时，飞线显示为直线。
    图9 飞线层
    
  • 端点样式：显示或隐藏起点和终点，默认为隐藏。显示时，可以设置“起点样式”和“终点样式”。
    • 起点样式 / 终点样式
      • 样式：端点的形状样式，有多种样式可供选择。
      • 内圈颜色：端点内圈的颜色。
      • 外圈颜色：端点外圈的颜色。
      • 动画效果：端点的动画效果。
      • 呼吸范围：端点动态呼吸的范围。配置项“动画效果”
      • 动效速度：端点动态呼吸的速度。
      • 散点大小：端点的大小。
      图10 端点样式
      
• 数据
  图11 地图飞线数据
  
  • 字段映射：地图飞线的数据格式包含以下2个字段，请配置以下2个字段映射到数据源中的字段名称，如果配置为空，则表示字段名称和所映射的数据源中的字段名称相同。
    • from：飞线起点位置的经度和纬度，经纬度之间以逗号分隔。
    • to：飞线终点位置的经度和纬度，经纬度之间以逗号分隔。

    数据源的数据格式为JSON格式，示例如下：

    [
      {
        "from": "116.85059,31.69078",
        "to": "118.69629,36.20882"
      },
      {
        "from": "120.89355,37.09024",
        "to": "116.93848,31.61597"
      }
    ]

  • 数据源类型：选择图表的数据源。系统提供了多种数据源供用户选择，您需要先添加数据源，具体操作请参见数据连接概述。
  • 自动更新请求：勾选自动更新请求，并设置更新间隔后，数据将根据间隔时间自动轮询。
  • 预览结果：单击“预览结果”，显示选择的数据源的数据信息。单击“更新查询”可以在数据源变更时手动更新组件数据。
• 交互

  关于组件是否支持交互功能及交互的使用方法，请参考设置组件事件交互。

地图散点

地图散点是以散点的形式表现地图中的某些地理位置的数据信息。

图12 基础平面地图 - 地图散点

• 样式
  • 样式：散点的形状样式，有多种样式可供选择。
  • 动画效果：散点的动画效果样式。
  • 散点大小：散点的大小。
  • 呼吸范围：当“动画效果”不为“无”时，散点的呼吸范围，值越大呼吸范围越大。
  • 动效速度：当“动画效果”不为“无”时，散点的动效速度，值越大动效速度越快。
  • 内圈颜色：散点内圈的颜色。
  • 外圈颜色：散点外圈的颜色。
  • 选中样式：在预览大屏或查看大屏时，鼠标移至散点时显示的样式。设置“选中样式”后，可以单击页面右上角的预览按钮查看选中样式。展开“选中样式”设置如下参数：

    颜色：鼠标移至散点时，显示的散点颜色。

    数据值：显示或隐藏name字段的值，勾选时显示。

    数据名：显示或隐藏value字段的值，勾选时显示。

    文本样式：鼠标移至散点时，显示的提示信息文本的“颜色”、“字号”、“字体粗细”。

• 数据
  图13 地图散点数据
  
  • 字段映射：地图散点的数据格式包含以下4个字段，请配置各个字段映射到数据源中的字段名称，如果配置为空，则表示字段名称和所映射的数据源中的字段名称相同。
    • lon：散点的经度。
    • lat：散点的纬度。
    • name：散点所代表的地理位置的名称。
    • value：散点的值，与样式中的“散点大小”一起决定散点的大小，value值越大，散点越大。
  • 数据源类型：选择图表的数据源。系统提供了多种数据源供用户选择，您需要先添加数据源，具体操作请参见数据连接概述。
  • 自动更新请求：勾选自动更新请求，并设置更新间隔后，数据将根据间隔时间自动轮询。
  • 预览结果：单击“预览结果”，显示选择的数据源的数据信息。单击“更新查询”可以在数据源变更时手动更新组件数据。
• 交互

  关于组件是否支持交互功能及交互的使用方法，请参考设置组件事件交互。

进阶版散点层

进阶版散点层是以散点的形式表现地图中的某些地理位置的数据信息，和地图散点相比，支持数据值映射散点的大小，支持自定义散点的图标。

图14 进阶版散点层 - 基础平面地图

• 样式
  • 样式：散点的形状样式，有多种样式可供选择。
  • 数据映射：勾选该选项时，散点颜色将根据数据大小显示不同的颜色，散点大小也将根据数据大小而显示不同的大小，数据大显示的散点大，数据小显示的散点小。“散点颜色”和“散点大小”的最小值、最大值以及无数据时的值支持自定义设置。散点大小的单位均为px。
    图15 数据映射
    
  • 动画效果：散点的动画效果样式。
  • 呼吸范围：当“动画效果”不为“无”时，散点的呼吸范围，值越大呼吸范围越大。
  • 动效速度：当“动画效果”不为“无”时，散点的动效速度，值越大动效速度越快。
  • 标签：勾选该选项时，可在散点处显示标签。标签的设置如下：

    映射字段：设置为“数据”页签中的某个字段名称，而非源数据的字段名称，当勾选“标签”时，将在散点处显示所选字段的值。

    字体：标签的字体。

    颜色：标签的颜色。

    字号：标签的字号。

    字体粗细：标签的字体粗细。

    位置：标签相对于散点的位置。

    水平偏移：距离所设置的“位置”的向右的水平偏移，单位为px。

    垂直偏移：距离所设置的“位置”的向下的垂直偏移，单位为px。

    图16 标签
    
  • 选中样式：在预览大屏或查看大屏时，鼠标移至散点时显示的样式。设置“选中样式”后，可以单击页面右上角的预览按钮查看选中样式。展开“选中样式”设置如下参数：

    颜色：鼠标移至散点时，显示的散点颜色。

    数据值：显示或隐藏name字段的值，勾选时显示。

    数据名：显示或隐藏value字段的值，勾选时显示。

    文本样式：鼠标移至散点时，显示的提示信息的字体颜色、字号、字体粗细。

    图17 选中样式
    
  • 初始化值：在“交互”页签开启交互时，name字段的初始化值。
• 数据
  图18 进阶版散点层-数据
  
  • 字段映射：地图散点的数据格式包含以下字段，请配置各个字段映射到数据源中的字段名称，如果配置为空，则表示字段名称和所映射的数据源中的字段名称相同。
    • lon：散点的经度。
    • lat：散点的纬度。
    • name：散点所代表的地理位置的名称。
    • value：散点的值，与样式中的“散点大小”一起决定散点的大小，value值越大，散点越大。
    • type：单击按钮可以添加系列值，即可以选取type字段的某一个取值设置为一个系列，并设置该系列散点的显示样式。type字段为其他取值的散点则按照type字段的默认样式进行显示。

      例如，某一个散点的type为"type":"snack"，则单击按钮设置系列值为“snack”。

      图19 添加系列
      
    • img：散点的自定义图标的路径，可以设置为存储在OBS服务中的图片路径或公网图片路径。如果未设置该字段，则使用默认图标。
  • 数据源类型：选择图表的数据源。系统提供了多种数据源供用户选择，您需要先添加数据源，具体操作请参见数据连接概述。
  • 自动更新请求：勾选自动更新请求，并设置更新间隔后，数据将根据间隔时间自动轮询。
  • 预览结果：单击“预览结果”，显示选择的数据源的数据信息。单击“更新查询”可以在数据源变更时手动更新组件数据。
• 交互

  支持开启click事件和mouseover事件交互。关于组件交互的使用方法，请参考设置组件事件交互。

地图下钻

地图下钻是以下钻的形式表现地图中的某些地理位置的数据信息。

图20 添加地图下钻-基础平面地图

• 样式
  • 颜色：访问区域的区块颜色。
  • 透明度：访问区域的区块的透明度。
  • 边线选项
    • 颜色：访问区域的边线颜色。
    • 宽度：访问区域的边线宽度。
    • 线条样式：访问区域的边线线条样式。
    • 阴影颜色：访问区域的边线阴影颜色。
  • 标签：显示或隐藏标签。显示时，可设置标签文本的“字体”、“颜色”、“字号”、“字体粗细”。
  • 缩放范围：访问区域的缩放比例。
• 数据
  图21 地图下钻 - 数据
  
  • 字段映射：地图下钻的数据格式默认包含1个字段，请配置该字段映射到数据源中的字段名称，如果配置为空，则表示字段名称和所映射的数据源中的字段名称相同。
    • name：访问的区域名称。
  • 数据源类型：选择图表的数据源。系统提供了多种数据源供用户选择，您需要先添加数据源，具体操作请参见数据连接概述。
  • 自动更新请求：勾选自动更新请求，并设置更新间隔后，数据将根据间隔时间自动轮询。
  • 预览结果：单击“预览结果”，显示选择的数据源的数据信息。单击“更新查询”可以在数据源变更时手动更新组件数据。
• 交互

  关于组件是否支持交互功能及交互的使用方法，请参考设置组件事件交互。

地图热力层

地图热力层是以热力层的形式表现地图中的某些地理位置的数据信息。

图22 地图热力层 - 基础平面地图

• 样式
  • 最小值透明度：热力点最小值的透明度。
  • 最大值透明度：热力点最大值的透明度。
  • 模糊半径：热力点的模糊半径。
  • 半径：热力点的半径。
  • 色带：热力点从外到内，支持设置“颜色1”~“颜色5”五个色带。
• 数据

  

  • 字段映射：地图热力层的数据格式默认包含以下字段，请配置该字段映射到数据源中的字段名称，如果配置为空，则表示字段名称和所映射的数据源中的字段名称相同。
    • lat：地区的纬度。
    • lon：地区的经度。
    • value：该地区对应的热力点的值。
  • 数据源类型：选择图表的数据源。系统提供了多种数据源供用户选择，您需要先添加数据源，具体操作请参见数据连接概述。
  • 自动更新请求：勾选自动更新请求，并设置更新间隔后，数据将根据间隔时间自动轮询。
  • 预览结果：单击“预览结果”，显示选择的数据源的数据信息。单击“更新查询”可以在数据源变更时手动更新组件数据。
• 交互

  关于组件是否支持交互功能及交互的使用方法，请参考设置组件事件交互。

悬浮文本

以悬浮文本的形式表现地图中的某些地理位置的数据信息。

图23 悬浮文本 - 基础平面地图

• 样式
  • 边线选项
    • 样式：悬浮文本框的边线样式。
    • 宽度：悬浮文本框的边线宽度。
  • 文本样式：悬浮文本的“字体”、“字号”、“字体粗细”。悬浮文本显示的文字为“数据”中text字段的值。
  • 定速播放：开启后，悬浮文本将根据以下配置进行定速播放。默认为关闭。
    • 悬浮数目：开启定速播放后，每次显示的悬浮文本数目。
    • 浮现时间：悬浮文本的浮现时间。单位为ms。
    • 停留时间：悬浮文本在地图上的停留时间。单位为ms。
    • 消失时间：悬浮文本的消失时间。
• 数据

  

  • 字段映射：悬浮文本的数据格式默认包含以下字段，请配置该字段映射到数据源中的字段名称，如果配置为空，则表示字段名称和所映射的数据源中的字段名称相同。
    • lat：地区的纬度。
    • lon：地区的经度。
    • text：在地区上方的悬浮文本。
  • 数据源类型：选择图表的数据源。系统提供了多种数据源供用户选择，您需要先添加数据源，具体操作请参见数据连接概述。
  • 自动更新请求：勾选自动更新请求，并设置更新间隔后，数据将根据间隔时间自动轮询。
  • 预览结果：单击“预览结果”，显示选择的数据源的数据信息。单击“更新查询”可以在数据源变更时手动更新组件数据。
• 交互

  关于组件是否支持交互功能及交互的使用方法，请参考设置组件事件交互。

轮播视频

轮播视频是轮流播放各个地理位置的视频，视频格式支持*.mp4、*.flv。

图24 轮播视频 - 基础平面地图

• 样式
  • 静音：开启或关闭静音模式。
  • 控制条：显示或隐藏视频播放器中的进度控制条。
  • 音量调节：视频的音量调节。
  • 自定义播放时间：开启或关闭自定义播放时间。
  • 播放时间：视频播放的时间。单位为ms。
  • 宽度：视频播放器的宽度。单位为px。
  • 背景色：视频播放器的背景色。
  • 标点颜色：在地图中标示的地理位置的点的颜色。
  • 边线选项：设置视频播放器窗口的边线的“样式”、“宽度”和“颜色”。
  • 文本样式：设置在视频播放器上方显示的文本的“颜色”、“字体”、“字号”和“字体粗细”。显示的文本为“数据”中text字段的值。
• 数据

  

  • 字段映射：悬浮文本的数据格式默认包含以下字段，请配置该字段映射到数据源中的字段名称，如果配置为空，则表示字段名称和所映射的数据源中的字段名称相同。
    • lat：地区的纬度。
    • lon：地区的经度。
    • video：视频地址。支持存储在OBS服务中的视频地址或公网视频地址。视频格式支持*.mp4、*.flv。
    • text：显示在视频窗口上方的标题。
  • 数据源类型：选择图表的数据源。系统提供了多种数据源供用户选择，您需要先添加数据源，具体操作请参见数据连接概述。
  • 自动更新请求：勾选自动更新请求，并设置更新间隔后，数据将根据间隔时间自动轮询。
  • 预览结果：单击“预览结果”，显示选择的数据源的数据信息。单击“更新查询”可以在数据源变更时手动更新组件数据。
• 交互

  关于组件是否支持交互功能及交互的使用方法，请参考设置组件事件交互。