高德地图

数智大屏引入高德地图，该组件主要以高德地图服务为依托对相对精细的地理位置信息进行展示，如精细到区域、街道或楼栋级别的点标记、涟漪、飞线等地理信息的呈现。

效果案例

组件结构

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

父组件配置

子组件管理

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

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

配置

基础属性

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

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

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

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

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

组件属性

地图样式ID

由高德控制台获取，使用者可通过高德控制台对地图底座风格样式进行编辑，定义好获取对应的Key及ID键入至对应处即可。
获取自定义地图样式及Key请您查看👇
高德地图更改地图样式

Key需到门户处进行更改:

还可支持表达式，可在预览时更改其样式。

地图设置

文字、道路、建筑、标识，路况可根据实际需求选择性开启。

相机设置

经度、维度，即默认初始地图中心点的位置。

初始化缩放，即初次加载地图当前的缩放等级（2~30级），数值越大地图放大的倍数越大。

支持切换至3D模式，3D模式下，可定义天空色彩、俯仰角度。

数据

无需配置数据。

交互

1. 支持配置鼠标单击事件：

当单击地图时，触发交互事件：设置大屏变量（可以将所点击位置的经纬度传递出去）、打开超链接、设置可见、移动、设置JS事件、设置面板状态；

2. 支持配置鼠标滚轮结束时事件：

当鼠标滚轮结束时，触发交互事件：设置大屏变量（可以将滚轮结束时当前地图的缩放等级传递出去）、打开超链接、设置可见、移动、设置JS事件、设置面板状态；

3. 支持配置鼠标拖动结束时事件：

当鼠标拖动地图结束时时，触发交互事件：设置大屏变量、设置可见、移动、设置JS事件、设置面板状态。

子组件配置

1. 点标记

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

配置

全局

显示层级：当地图中有很多子组件产生叠加时，层级越高则在上层现实，该数字没有明确数字，与其他子组件有对比即可。
显示范围：当缩放等级超过最大最小的范围，该子组件不显示。

轮播：可选择性地开启轮播，可配置其轮播时长。

图标配置

样式：可选择图标的图片，配置标片的圆角、尺寸、宽高、偏移等样式。

动画：可自定义图标的动画效果。

高亮：当鼠标悬停在点标记上可选择性配置高亮样式。

自定义图标

当输入条件即type后，对应的点的图标可配置个性的样式，其配置与【图标配置】相同。

焦点图标

当轮播开启后，图标可配置当前焦点样式，其配置与图标配置相同。

数据

组件数据格式

静态数据-JSON数据案例

[
    {
        "lng": 120.125424,
        "lat": 30.219249,
        "type": 1,
        "id": 1
    }
]

交互

1. 支持配置鼠标移入时事件：

当鼠标移入点标记时，触发交互事件：设置大屏变量、打开超链接、设置可见、移动、设置JS事件、设置面板状态；

2. 支持配置鼠标移出时事件：

当鼠标移出点标记时，触发交互事件：设置大屏变量、打开超链接、设置可见、移动、设置JS事件、设置面板状态；

3. 支持配置鼠标点击时事件：

当鼠标点击点标记时，触发交互事件：设置大屏变量、设置可见、移动、设置JS事件、设置面板状态；

4. 支持配置切换点标记时事件：

当轮播开启点标记切换时，触发交互事件：设置大屏变量、设置可见、移动、设置JS事件、设置面板状态；

2.中心点

主要用于标记特殊场景下地图层级及中心点位位置。

中心点只能由一个，当出现多个【中心点】子组件或数据中有多条数据时，取第一个/条。

配置

默认开启

开启后将更改初始地图即父组件中的经纬度和缩放比例，即重新定位地图的中心点；若关闭仅会在数据提供的经纬度上显示中心点标记。

显示层级

当地图中有很多子组件产生叠加时，层级越高则在上层现实，该数字没有明确数字，与其他子组件有对比即可。

显示范围

当缩放等级超过最大最小的范围，该子组件不显示。

中心标记

样式：可选择图标的图片，配置标片的圆角、尺寸、宽高、偏移等样式。
高亮：当鼠标悬停在点标记上可选择性配置高亮样式。

数据

组件数据格式

静态数据-JSON数据案例

[
    {
        "lng": 120.218121,
        "lat": 30.2412,
        "zoom": 10
    }
]

交互

1. 支持配置数据变化时事件：

当中心点数据变化时，触发交互事件：设置大屏变量、打开超链接、设置可见、移动、设置JS事件、设置面板状态；

2. 支持配置鼠标点击时事件：

当鼠标点击中心标记时，触发交互事件：设置大屏变量、打开超链接、设置可见、移动、设置JS事件、设置面板状态；

3.路线

主要用于地图上路线的展示。

配置

全局

显示层级：当地图中有很多子组件产生叠加时，层级越高则在上层现实，该数字没有明确数字，与其他子组件有对比即可（路线位于地图底层，其显示层级只作用于同样位于底层的子组件）。

默认选中：设置地图初始渲染时，哪条路线是被选中的。

默认路线

可配置路线的颜色、宽度、透明度、描边等样式，可配置其选中样式（默认选中或点击选中）和非选中样式（当一条路线被选中后其他路线可选择性的启用非选中样式）。

路线系列

当输入条件即type后，对应的路线可配置个性的样式，其配置与【默认路线】配置相同。

数据

组件数据格式

静态数据-JSON数据案例

[
    {
        "lng": 120.234686,
        "lat": 30.16144,
        "id": 1
    }
]

交互

支持配置鼠标点击时事件：

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

4.文字标签

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

配置

全局

显示层级：当地图中有很多子组件产生叠加时，层级越高则在上层现实，该数字没有明确数字，与其他子组件有对比即可。

显示范围：当缩放等级超过最大最小的范围，该子组件不显示。

全局样式

可选择性的启用全局样式。

背景：配置文字标签的背景颜色和圆角。

边距：通过配置文字与文字块之间的距离，来确定文字标签的尺寸。

边框：文字标的边框。

尺寸：配置文字标签的宽高，为空时自适应。

偏移

配置文字标签相较于其原先位置的偏移，文字标签中心点的位置为其经纬度的位置。

文本样式

配置文字的字体、字号、颜色、字间距等样式。

数据

组件数据格式

静态数据-JSON数据案例

[
    {
        "rotate": 0,
        "lng": 120.434382,
        "value": "萧山国际机场",
        "lat": 30.236195
    }
]

交互

没有交互事件。

5.提示框

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

配置

全局

显示层级：当地图中有很多子组件产生叠加时，层级越高则在上层现实，该数字没有明确数字，与其他子组件有对比即可。

显示范围：当缩放等级超过最大最小的范围，该子组件不显示。

尺寸

配置提示框本身的宽高。

位置

固定位置：当固定位置打开后，提示框位置固定在一个位置显示；反之在其经纬度对应的位置上显示。

背景：可配置提示框的背景，支持颜色和图片，可更改其圆角。

边框：提示框的边框。

偏移：相对于其经纬度的偏移，其提示框的中心位置位于数据的经纬度上。

行内容

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

字段名：此行内容对应的字段名称。

标题：此行内容前可配置标题内容。

布局

• 排列方式：标题与行内容的排列方式。

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

位置：行内容针对于提示框内容区域（提示框大小除去内边距）的左上距离处为内容开始位置。

标题样式：标题的文本样式。

值样式

• 左偏移：值距离左边的偏移距离。
• 值类型：支持文本、数值、指标类型的内容。
• 后缀：行内容的后缀及样式。

  图片

  图片来源：支持固定地址或表达式，用于显示不同场景下对应不同的tu

可配置图片的基本样式：尺寸、位置、圆角、旋转等。

位置：行内容针对于提示框内容区域（提示框大小除去内边距）的左上距离处为内容开始位置。

单机放大：预览后点击图片可将其放大到初始大小、居中显示，点击空白区域图片回到提示框初始位置。

数据

组件数据格式

静态数据-JSON数据案例

[
    {
        "lng": 120.218121,
        "lat": 30.2412,
        "title": "杭州",
        "value1": 795.37,
        "value2": 73515.76
    }
]

交互

支持配置鼠标点击时事件：

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

6.涟漪

配置

全局

显示层级：当地图中有很多子组件产生叠加时，层级越高则在上层现实，该数字没有明确数字，与其他子组件有对比即可（涟漪位于地图底层，其显示层级只作用于同样位于底层的子组件）。

显示范围：当缩放等级超过最大最小的范围，该子组件不显示。

涟漪配置

动画时长：一个涟漪开始到结束的时间。

默认样式：可选择性的开启【默认样式】，不符合【区间配置】内条件的涟漪将采用【默认样式】，若【默认样式】不开启，不在区间内的数据涟漪将不显示。

区间配置：

• 最大值、最小值：设置该区间的范围；
• 尺寸：涟漪的尺寸大小；
• 涟漪：可选择系统提供的图标或自己提供涟漪图片（图片需为尺寸4096x128 、 帧序列图片是头尾相连可以循环的像素图片。

数据

组件数据格式

静态数据-JSON数据案例

[
    {
        "lng": 120.051266,
        "value": 5,
        "lat": 30.324932
    }
]

交互

没有交互事件。

7.飞线

主要用于标识展示两地间数据往来、交互（需切换至3D模式）。

配置

全局

显示层级：当地图中有很多子组件产生叠加时，层级越高则在上层现实，该数字没有明确数字，与其他子组件有对比即可（飞线位于地图底层，其显示层级只作用于同样位于底层的子组件）。

显示范围：当缩放等级超过最大最小的范围，该子组件不显示。

飞行

平滑：飞线从起点到终点的速率，数值越大，飞线越平滑，速度越慢。

速度：飞线的发射速度，数值越大，速度越快。

高度：飞线的高度。值越大弧度越大。

线

可配置飞线的起点宽度和终点宽度。

底线：底线的样式。

飞线：飞线的样式。可配置其飞线长度。

数据

组件数据格式

静态数据-JSON数据案例

[
    {
        "toLat": 30.215689,
        "fromLat": 30.2412,
        "fromLng": 120.218121,
        "toLng": 119.990341
    }
]

交互

没有交互事件。

8.点聚合

主要用于海量点位分布的呈现，根据点位的距离及地图层层级进行聚合。

配置

全局

显示层级：当地图中有很多子组件产生叠加时，层级越高则在上层现实，该数字没有明确数字，与其他子组件有对比即可（涟漪位于地图底层，其显示层级只作用于同样位于底层的子组件）。

点击居中：开启后，点击单个图标，该图标将位于在地图的中心位置。

聚合配置

网格大小：聚合计算时网格的像素大小。当点位之间的间隔小于网格大小时，点聚合。

聚合级别：最大的聚合级别，当地图的缩放等级大于该级别就不进行相应的聚合。默认值为 18，即小于 18 级的级别均进行聚合，18 及以上级别不进行聚合。

集群图标：点聚合时，点的样式配置。

• 可配置图标样式和其尺寸。
• 文本样式：聚合后显示由单个点位聚合的数量的文本样式。
• 文字偏移：相对于图标中心点的位置偏移。
• 图标系列：可根据聚合点的数量配置个性的样式，其配置与默认图标配置相同。

单个图标：可配置初始点位的样式。

• 可配置图标的图片和其尺寸。
• 可选择性地开启显示字段name的文字标签，可配置其文本样式和偏移（默认中心点位于经纬度上）。当点聚合时文字标签自动消失。
• 图标系列：当输入条件即id后，对应的路线可配置个性的样式，其配置与默认图标配置相同。

选中图标：可配置点击选中后点位的样式，其配置与单个图标相同。

数据

组件数据格式

静态数据-JSON数据案例

[
    {
        "lng": 5.3395270612031265,
        "lat": 72.63863669541959,
        "id": "0",
        "name": "random_0"
    }
]

交互

支持配置鼠标移入时事件：
当鼠标点击单个图标时，触发交互事件：设置大屏变量、设置可见、移动、设置JS事件、设置面板状态；

当鼠标点集群图标时，地图缩放比例随之缩小，显示上层点位聚合情况。

9.区域热力

主要用于地图上区块面的展示，可选择性地配置该区域地数据量大小。

配置

全局

显示层级：当地图中有很多子组件产生叠加时，层级越高则在上层现实，该数字没有明确数字，与其他子组件有对比即可（飞线位于地图底层，其显示层级只作用于同样位于底层的子组件），区域热力的显示层级仅对于子组件飞线和路线有效，相对于其他子组件均位于底层。

显示范围：当缩放等级超过最大最小的范围，该子组件不显示。

样式

adcode：划定区域地范围，支持选择使用系统预置标准行政区域（最小支持显示区县范围）；此时支持通过表达式动态改变地图数据范围。

层级深度：显示区域的层级，其对应的层级不能大于adcode所对应的层级，若大于则不显示。如当adcode所选为杭州市，层级深度为0-显示省级，则该区域不显示。

轮廓线：配置对应层级地边界轮廓线和宽度。

缺失颜色：配置没有数据的区域将显示的颜色。

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

数据

组件数据格式

静态数据-JSON数据案例

[
    {
        "adcode": "330000",
        "value": 580
    }
]

交互

没有交互事件。

10.聚合热力

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

配置

全局

显示层级：当地图中有很多子组件产生叠加时，层级越高则在上层现实，该数字没有明确数字，与其他子组件有对比即可（飞线位于地图底层，其显示层级只作用于同样位于底层的子组件），区域热力的显示层级仅对于子组件飞线和路线有效，相对于其他子组件均位于底层。

显示范围：当缩放等级超过最大最小的范围，该子组件不显示。

热力点

半径：单个点位半径大小；

最大值：值的大小区间，根据区间分配热力颜色的过渡；最小值默认为数据中的最小值；

最小/最大透明度：最大最小值对应的色彩透明度；如果为空就按数据中的最大值；

3D配置：该配置只能在3D模式下生效。

• 高度：高度缩放因子，表示在单位高度上的缩放比例。
• 取样精度：曲面绘制的精细效果，值越小，曲面效果越精细，但同时性能消耗越大。
• 贝塞尔曲线：曲线控制参数，可通过配置不同的参数设置不同的曲面。

渐变色：自定义热力图分段色彩，各段色彩占比及色值。即把所有数据从占比上0-1分成若干段，按区过渡颜色。

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

数据

组件数据格式

静态数据-JSON数据案例

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

11.多边形

主要用于地图上区块面的展示。

配置

全局

显示层级：当地图中有很多子组件产生叠加时，层级越高则在上层现实，该数字没有明确数字，与其他子组件有对比即可。

显示范围：当缩放等级超过最大最小的范围，该子组件不显示。

区域配置

支持编辑边框、面的颜色和透明度。

数据

组件数据格式

静态数据-JSON数据案例

[
    {
        "lng": 120.025424,
          "lat": 30.219249,
          "id": 1
    }
]

交互

该组件没有交互事件。