中国2D地图

中国2D地图组件通过子组件形式主要以二维轮廓形式展示对应地区热力分布、点位标记等，支持在各地区范围内自定义散点、地图提示框、飞线、热力等地理信息数据。

效果案例

组件结构

高德地铁图组件主要由「父组件」及「子组件」两部分组成，可根据实际场景分别定义对应配置项。

父组件配置

子组件管理

系统提供了容器的配置作为子组件，使用者可根据实际场景对子组件进行添加和配置。支持对已添加子组件进行启用禁用、重命名、条件配置、复制、删除操作。

条件配置：满足条件时，子组件才启用成功。可根据场景需要应用子组件。

配置

基础属性

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

组件尺寸：包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高。再次单击进行解锁，解锁后宽高比不受限制。比例锁默认不锁定。

旋转：以组件的中心为中心点，进行旋转，单位为度（°）。手动输入角度值，控制组件的旋转角度；

• 单击图标，控制组件左右翻转样式；
• 单击图标，控制组件上下翻转样式。

透明：取值范围为0~100%。为0%时，组件隐藏；为100%时，组件完全显示。默认为100%。

组件属性

地图

范围：地图的数据范围。

• 系统默认：支持选择使用系统预置标准行政区域（最小支持显示区县范围）；此时支持通过表达式动态改变地图数据范围。例如adcode接收值为330000（浙江）时，地图则显示浙江省地图区域，并支持从浙江省地图开始下钻上卷。通过表达式，搭配其他组件，实现动态切换地图范围的效果：

• 自定义：也可选择自定义上传对应GeoJSON数据。

提示：由于地图数据结构的特殊性，自定义上传的GeoJSON数据暂不支持进行下钻、上卷操作。

显示多级：当前区域的各个区块内是否还显示下级划分。

• 此时地图不允许下钻，点击地图区域时，点击的是当前显示的底级区域。
• 此时对于上层边界和底级边界可以分开配置样式。

支持下钻：是否开启下钻能力。

下钻方式：单击、双击。

最大下钻层级：从根adcode开始，允许下钻的层级数。为空时不限，可以到底级。

支持通过表达式配置，用于不同用户身份下钻权限不同的场景。

不限下钻层级:

限制一层:

根adcode：当初始进入地图时显示的不是中国地图而是直接下钻至了下级的省市区镇，则可以根据此配置支持上卷至此adcode对应的地图层级。为空时代表根adcode为自己本身，无法上钻。

上钻方式：

• 操作空白处：按照下钻方式同样操作空白处，双击下钻双击空白处上钻，单击下钻单击空白处上钻。
• 点击返回按钮：此时通过返回按钮上钻，可配置返回按钮的文本、位置、背景、边框样式。

滚轮缩放：是否可以在查看大屏时，对地图进行鼠标滚轮缩放。滚轮缩放允许时，可以按住空格键拖动地图，移动查看。

缩放比例：可根据不同的场景调整地图的大小（例如海南省下钻后由于它的岛屿数量过多使得其区域的面积较小无法看清其相关数据）。

正常情况:

设置缩放比例后:

南海海域：支持南海海域地图通过拼接显示（十段线）或小图显示（背景色和线条颜色可分别配置）。
小图显示:

拼接显示:

背景：支持背景颜色设置和纹理图片的填充。

边界：地图区域边框的样式。

区域名称：可配置区域名称是否受地图旋转变换影响。区域名称文本的样式，文本系列可对各别地区名称进行偏移处理。

始终朝正:

区域名称偏移:

叠底
通过地图底层下方叠等大的有偏移距离的底图的方式，实现地图有厚度的立体效果。

变换

透视：启用透视时组件跟随旋转进行透视拉伸。

X轴旋转：组件以X方向为旋转中心轴，单位为度。

Y轴旋转：组件以Y方向为旋转中心轴，单位为度。

Z轴旋转：组件以Z方向为旋转中心轴，单位为度。

数据

无需配置数据。

交互

支持配置鼠标单击事件：
当单击地图区域时，触发交互事件：设置大屏变量（可以将所点击位置的区域编码和名称传递出去）、打开超链接、设置可见、移动、设置JS事件、设置面板状态；

支持配置鼠标双击事件：
当双击地图区域时，触发交互事件：设置大屏变量（可以将所双击位置的区域编码和名称传递出去）、打开超链接、设置可见、移动、设置JS事件、设置面板状态；

支持配置下钻事件：
当地图触发下钻时，触发交互事件：设置大屏变量（可以将所下钻区域的区域编码和名称以及所在的层级传递出去）、设置可见、移动、设置JS事件、设置面板状态；

支持配置上钻事件：
当地图触发上卷时，触发交互事件：设置大屏变量（可以将所下钻区域的区域编码和名称以及所在的层级传递出去）、打开超链接、设置可见、移动、设置JS事件、设置面板状态。

子组件配置

1.区域热力

主要用于标识不同区域数据量大小。

配置

无数据：没有数据的区域将显示的背景颜色。

地图边界：区域边框样式。

样式系列：设置不同数据范围对应的地图区域背景色。

热力指示器：指示器以图例的形式直接展示区域热力的样式系列。

• 位置：指示器相对于组件左上角的位置；
• 朝向：可水平/垂直放置指示器；
• 间距：指示器之间的间距；
• 文本标签：显示对应区域热力的数值范围，可配置其显示位置、边距（与指示器之间的距离）和文本样式；
• 指示器：可配置指示器的宽高以及圆角；
• 点击交互：预览时可点击指示器显示对应区域热力。

数据

组件数据格式

静态数据-JSON数据案例

[
    {
        "name": "浙江省",
        "value": 580
    }
]

交互

没有交互事件。

2.散点

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

配置

全局

始终朝正:

不隐藏时，散点全部显示:

点击散点联动提示框变化:

默认样式

• 圆点：可配置圆点的颜色、边框和阴影；
• 图标：选择图标样式，配置颜色；
• 图片：选择图片作为散点样式。

选中样式：同默认样式配置。

样式系列：输入数据源中对应数据的type字段值，数据type为此值的散点将按此系列样式显示。

轮播动画

数据

组件数据格式

静态数据-JSON数据案例

[
    {
        "lng": 123.504194,
        "type": "类型1",
        "value": 1,
        "lat": 43.52114
    }
]

交互

支持配置鼠标点击事件：
当点击散点时，触发交互事件：设置大屏变量、打开超链接、设置可见、移动、设置JS事件、设置面板状态。

支持配置切换选中事件：
当切换选中散点时，触发交互事件：设置大屏变量、打开超链接、设置可见、移动、设置JS事件、设置面板状态。

3. 地图提示框

主要用于轮播提示各区域字段信息。

配置

始终朝正：可配置提示框是否受地图旋转变换影响。

当前区域:

• 手动触发：是否开启手动切换显示区域提示框的功能。
• 触发方式：如果允许手动切换，还可以选择是点击切换还是鼠标移入切换。同时鼠标移入地图会先暂停轮播动画，移出后再继续轮播。

点击:

移入:

• 自动轮播：是否开启自动轮播。
• 停留时间：轮播时一个区域停留的时间。
• 标记
  • 高度：标记图片的高度。
  • 宽度：标记图片的宽度。
  • 图片：标记图片。
  • 旋转：是否显示旋转动画。

• 区域：可配置当前区域的背景色和边框样式。
• 区域名称：当前区域的名称显示样式。

尺寸:提示框的高度和宽度。

位置:

• 固定位置：
  • 当固定位置打开时，提示框位置固定在一个位置显示。
  • 当固定位置关闭时，提示框位置根据当前区域的经纬度数据动态显示，根据组件边界自适应在经纬度点的左上、右上、左下或右下显示。故此时可以配置四个位置的偏移、内边距、背景和边框样式。

行内容:提示框中的内容以一行一行的字段内容进行显示。

• 字段名：此行内容对应的字段名称。
• 标题：此行内容前可配置标题内容。
• 布局
  • 排列方式：标题与行内容的排列方式。
  • 行高：行内容的高度。为空时代表不限制行高，设置具体值后超出高度时仍然会显示，此时垂直对齐方式为居中、居下、两端时，会根据当前行高显示对齐效果。
  • 列宽：行内容的宽度。为空时代表不限制列宽，设置具体值后超出列宽时仍然会显示，此时水平对齐方式为居中、居右、两端时，会根据当前列宽显示对其效果。同时如果设置了内容溢出换行，会根据列宽进行自动换行。
  • 水平对齐：未设置列宽时，居中、居右、两端均无效果，只能居左对齐。
  • 垂直对齐：未设置行高时，居中、居下、两端均无效果，只能居上对齐。
  • 内容溢出：默认溢出显示，设置列宽时还可以进行自动换行配置。

排列方式：

• 位置：行内容针对于提示框内容区域（提示框大小除去内边距）的左上距离处为内容开始位置。
• 标题样式：标题的文本样式。
• 值样式：
  • 左偏移：值距离左边的偏移距离。
  • 值类型：支持文本、数值、指标类型的内容。
  • 后缀：行内容的后缀及样式。

数据

组件数据格式

静态数据-JSON数据案例

[
    {
        "lat": 29.64415,
        "lng": 91.1145,
        "adcode": "540000",
        "title": "拉萨",
        "value1": 86.8,
        "value2": 31662,
        "value3": 678
    }
]

交互

支持配置切换区域事件：
当区域切换时，触发交互事件：设置大屏变量、打开超链接、设置可见、移动、设置JS事件、设置面板状态。

支持配置事移入提示框件：
当移入提示框时，触发交互事件：设置大屏变量、设置可见、移动、设置JS事件、设置面板状态。

支持配置事移出提示框件：
当移出提示框时，触发交互事件：设置大屏变量、设置可见、移动、设置JS事件、设置面板状态。

4. 飞线

主要用于标识展示两地间数据往来、交互。

配置

飞行

• 平滑：飞线从起点到终点的速率，数值越大，飞线越平滑，速度越慢。
• 速度：飞线的发射速度，数值越大，速度越快。
• 弧度：飞线的弧度。值越大越趋近于直线。

弧度=3时：

弧度=2时：

• 随机开始：是否随机进行飞线发射。不随机时将同时发射飞线，并同时落地。

线

• 底线：底线的样式。
• 飞线：飞线的样式。长度按底线的百分比计算。

落地效果：落地后的涟漪效果。

• 初始半径：开始涟漪的初始半径。
• 晕开半径：结束涟漪的结束半径。
• 单个时间：一个圆涟漪开始到结束的时间。
• 晕开次数：涟漪的次数。
• 晕开间隔：每次涟漪间相隔的时间。
• 描边：圆的边样式。
• 颜色：圆的填充色。

  数据

  组件数据格式

静态数据-JSON数据案例

[
    {
        "fromlat": 29.806773,
        "fromlng": 120.319076,
        "tolat": 30.51024,
        "tolng": 112.297854
    }
]

交互

没有交互事件。

5. 聚合热力图

热力图的方式展示各地区范围下点位的分布。

配置

热力点

• 半径：单个点位半径大小；
• 最小值/最大值：值的大小区间，根据区间分配热力颜色的过渡；如果为空就按数据中的最小值；
• 最小/最大透明度：最大最小值对应的色彩透明度；如果为空就按数据中的最大值。
• 模糊因子：模糊效果开关；
• 渐变色：自定义热力图分段色彩，各段色彩占比及色值。即把所有数据从占比上0-1分成若干段，按区过渡颜色。

热力点比例值=值/(最大值-最小值)。注：（最大值-最小值） 的值 为0时，会强制取第一个颜色值。

• 数据动画：为了让热力点在呈现时，效果更好，热力点支持从值从0到实际值进行渐进渲染。关闭时，热力图一次就渲染完成了；开启时，根据配置的“渐进次数”和（最大值-最小值）的值，计算出渐进步长；具体到每个点，实际渐进次数=值/渐进步长；
  • 渐进次数 ：1~∞。
  • 间隔时间：50~∞。热力点大小从1到实际值进行渐进渲染的间隔时间。

数据

组件数据格式

静态数据-JSON数据案例

[
    {
        "lat": 39.724042,
        "lng": 116.339362,
        "value": 100
    }
]

交互

没有交互事件。

6.标牌柱子

主要用于显示地图区域内各点位值的大小、排名及位置分布。

配置

光柱配置

• 颜色：可配置光柱的开始颜色和结束颜色。
• 升起时间：预览时，光柱升起的动画时间。
• 光柱宽度：配置光柱的统一宽度。
• 光柱高度：配置光柱最高和和最低的高度，其高度将根据值得大小进行映射。
• 柱子类型：可选择方柱或圆柱。
• 高亮：启用后，鼠标移入柱子颜色高亮。

文字配置

• 整体部分：关于文字部分得整体配置。

  • 标牌宽高以及背景色得配置。

• 后缀：配置数值部分的后缀内容、偏移和样式，其偏移为与数值部分之间的距离。

• 序号部分：根据数值的大小从大到小自动生成排序编号。

  • 尺寸：配置序号背景的尺寸大小。
  • 偏移：序号部分相对于标牌左上角的偏移位置。
  • 文本：配置序号字体的文本样式。
  • 自定义背景：开启后可自定义选择图片作为序号背景，禁用后将默认为正方形作为背景，可配置其内外阴影、边框和圆角等样式。

• 数值部分：数值部分的相关配置。

  • 布局：数值部分相对于标牌左上角的相对位置或绝对位置。
  • 可配置数值部分的背景样式：背景颜色、圆角和边框。
  • 内边距：数值部分与背景之间的距离，通过配置内边距实现背景尺寸自适应。
  • 文本：可配置数值部分的文本样式。
  • 格式化：将数值部分统一进行格式化。

    数据

    组件数据格式

静态数据-JSON数据案例

[
    {
        "lng": 87.627704,
        "lat": 43.793026,
        "value": 68,
        "area": "新疆维吾尔自治区",
        "adcode": "650000"
    }
]

交互

支持配置鼠标点击事件：
当鼠标点击序号部分或数值部分时，触发交互事件：设置大屏变量、设置可见、移动、设置JS事件、设置面板状态；