中国2D地图 v1.21.13

文档基于2D中国地图 v1.21.13版本

组件说明

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

效果案例

组件结构

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

*组件结构说明

模块	说明
父组件	外围的「地球容器」部分，支持对全局位置、地球视角、中心点位进行配置
子组件	地球内数据叠加、装饰形态，可单独定义样式风格及相关数据

一、父组件配置

子组件管理

组件创建之初，系统会默认携带常用子组件，使用者可根据实际场景对子组件进行新增或编辑。

支持对已添加子组件进行隐藏、重命名、复制、删除操作。

*子组件管理

样式

1、基本属性

位置尺寸：

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

尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

*组件位置尺寸说明

默认隐藏：

控制组件在页面中隐藏，在预览和发布页面中不显示该组件，通常配合交互事件使用该配置项。

2、变换

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

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

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

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

*变换配置说明

3、地图

配置项	说明
散点超出可见	即地图方位内超出边界范围内散点数据可选择性屏蔽不显示。
背景	即地图背景色，支持自定义角度做双色渐变，可选择性上传自定义纹理图案。
地图范围	支持选择使用系统预置标准行政区域（最小支持显示区县范围），也可选择自定义上传对应GeoJSON数据（提示：由于地图数据结构的特殊性，自定义上传的GeoJSON数据暂不支持进行下钻、上卷操作）。
地图边界	即当前视图子区域的地图边线，支持选择性隐藏，可定义其颜色及粗细。
双击下钻	可选择性开启双击下钻，配置项开启后，页面预览时，可双击相关区域进行下钻，单击空白处即返回数据对应的最上级视图（当前数据仅支持下钻至区县视图）。

4、区域名

支持选择开启区域名称，可调节相关字体、字号及颜色。

配置项	说明
文字处理	当地图范围较小，区域名称位置拥挤相互堆叠时，可于此处自定义相应文字及其所需偏离的坐标位置。（提示：所填文字需要与地图实际显示文字字符进行匹配）

*自定义区域名称位置

数据

2D中国地图组件数据相对固定，系统默认对全球范围数据进行预置，故此处一般场景下无需进行编辑操作。

交互

载入动画

所有组件均提供移入、移入(小)、划变三种组件载入动画。

载入动画选择无时，则组件没有载入动画。

载入动画仅在可视化应用预览、发布组件加载时显示。

载入动画配置项：

配置项	说明
渐隐渐显	启用后载入动画增加渐隐渐显过渡
速率	匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1))
方向	动画方向
持续时间	载入动画持续时间，单位为ms
延时	载入动画延时长，单位为ms

自定义事件

自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑；

详细的自定义事件教学👉自定义事件教学

二、子组件配置

1、飞线

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

样式配置

支持定义飞线飞行效果。

配置项	说明
平滑	相应速度下，飞线由起点至终点速率，数值越大速度越慢
速度	飞线发射速度，数值越大越快
弧度	数值越大弧度越小
随机开始	勾选可随机进行飞线发射

线样式：支持定义底线及飞线的粗细、颜色、长度。

落地效果：即飞线至目标点时，可显示着陆晕开效果，可自定义颜色、涟漪层级及消失时间。

数据

根据真实地理经纬度数据驱动。

字段	说明
fromLng	起点经度
fromLat	起点纬度
toLng	终点经度
toLat	终点纬度

*组件数据格式说明

数据样例

[
	{
		"fromLat": "39.794602",
		"fromLng": "116.88798",
		"toLat": "36.204957",
		"toLng": "117.661322"
	},
	{
		"fromLat": "39.794602",
		"fromLng": "116.88798",
		"toLat": "31.901798",
		"toLng": "120.024719"
	},
	{
		"fromLat": "39.794602",
		"fromLng": "116.88798",
		"toLat": "33.949758",
		"toLng": "112.960157"
	}
]

2、散点

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

全局

混合模式：地图组件与下层底色的混合模式。（功能尚未完善）

样式配置

尺寸：可根据数据源内实际数值大小自定义最大、最小尺寸。

样式可选择常用圆点形态，可自定义描边、填充颜色，可选择开启并自定义阴影效果。

默认：支持自定义上传图片、图标，可根据图片形态选择使用混合模式。

散点：支持根据数据内类型字段值，自定义多类型散点形态，样式根据实际需求可分开进行调节。

下方样式内「过滤值」对应数据源内「type」字段值（字段名可自定义）。

*根据数据源内所含字段自定义散点类型

数据

根据真实地理经纬度数据驱动。

字段	说明
lng	经度
lat	纬度
value	数值大小
type	散点类型

*组件数据格式说明

数据样例

[
	{
		"lng": 116.339362,
		"lat": 39.724042,
		"type": "大货店",
		"value": 1
	},
	{
		"lng": 123.504194,
		"lat": 43.52114,
		"type": "大货店",
		"value": 1
	}
]

3、区域热力层

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

样式配置

配置项	说明
滤镜效果	开启后区域内效果由完整面积色块变更为具有边缘模糊效果。
多色	可选择自定义多色，编辑不同分段层级颜色，每个分段层级均可自定义最大、最小颜色（位置是渐变色的位置，是0-100之间的值，位置为100表示渐变色终点的颜色，为0时表示起点的颜色，即从圆点出发，向外扩散的比率）
最小、最小值颜色	即根据数据源内最大最小数据值自动渐变适配所定义的颜色。
地图边界	即各区域边界线，可自定义粗细、颜色
图例	可选择开启图例，即最大最小值颜色的提示，可自定义图例位置及宽高，可编辑文本小数位数设置、字体大小以及颜色（提示：自定义多色段的场景下，不进行图例的展示）

数据

根据真实地理经纬度数据驱动。

字段	说明
adcode	行政区域编码
name	行政区域名称
value	数值大小

*组件数据格式说明

需要注意此处数据需要根据地图数据进行映射。

数据样例

[
	{
		"adcode": "710000",
		"value": 0.774761951295659
	},
	{
		"adcode": "330000",
		"value": 0.7794583269860595
	}
]

4、地图提示框

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

样式配置

尺寸：支持编辑提示框的整体宽度、高度。

固定：即固定在相应坐标显示提示框位置。

配置项	说明
背景	支持自定义上传提示框背景图片。
内边距	支持定义上下左右内部边距，设定后即给内部文本规范展示空间。

也可选择不固定提示框位置，即提示框位置根据区域的轮播跟随显示。

配置项	说明
左上、右上、左下、右下	即以整体地图组件宽高为标准，结合轮播区域位置自动分别与四个方位适配显示提示框（各方向均支持自定义内边距及偏移左边位置）。

当前信息，可选择性开启。

配置项	说明
当前点	即区域轮播后定位在当前区域的点标记，支持自定义图标形态、大小及旋转动画（点位可选择性开启）。
当前区域	即区域轮播后当前区域高亮形式，支持定义高亮的填充及描边颜色。

动画，定义相应停留时间，即可根据数据内所包含的区域进行自动轮播切换，0即不进行切换，且不显示对应提示框。

行内容，可根据数据返回内容，选择性绑定显示至地图提示框内容。

配置项	说明
字段名	数据源内容需要显示在提示框内的字段，可在此处进行映射绑定
显示名	即实际需要显示在地图上的字段名称
排列、对齐方式	根据展示需求定义排版方式
单位	所需显示的单位后缀
位置	所需显示的x、y具体坐标
尺寸	文本显示范围宽高
标签样式	字段名称的字体、字号、颜色
值样式	对应值的字体、字号、颜色

进度条合集，可根据数据返回的具体数值大小，展示进度指标。

配置项	说明
字段名	数据源内容需要显示在提示框内的字段，可在此处进行映射绑定（注意需为数值型字段）
条形宽度	展示的条形图每个分段的宽度
背景、渐变色	背景色彩及进度条渐变色彩
位置	所需显示的x、y具体坐标
尺寸	文本显示范围宽高

回调参数，支持在提示框轮播时往外发送回调参数，具体用法同常规组件内容回调及数据联动方法。

数据

根据真实地理经纬度数据驱动。

字段	说明
adcode	行政区域编码
lng	经度
lat	纬度
其他	可自行定义提示框内所需的字段（字段于行内容配置项处映射即可）

*组件数据格式说明

*提示框配置示例

数据样例

[
	{
		"lat": "29.6441500000",
		"lng": "91.1145000000",
		"adcode": "540000",
		"title": "拉萨",
		"category": 111,
		"newCategory": 2773,
		"amount": 9877
	},
	{
		"lat": "30.6508900000",
		"lng": "104.0757200000",
		"adcode": "510000",
		"title": "四川",
		"category": 222,
		"newCategory": 2773,
		"amount": 9877
	}
]

5、小地图

主要用于显示各个省份的地图。

样式配置

配置项	说明
轮播	可选择性开启轮播配置，定义轮播间隔时间，此处可定义轮播时，闪点的尺寸和背景。
位置尺寸	此处配置小地图的大小和在2D中国地图中的相对位置。
背景	可配置小地图的背景颜色或背景格子。此处可自定义背景格子时，格子的样式。
地图边界	小地图的边界颜色和粗细。

数据

根据真实地理经纬度数据驱动。

字段	说明
lng	经度
lat	纬度

6、十段线

根据地图正规使用方法，使用全国范围地图时，请务必开启十段线子组件，中国一点也不能少！

样式配置

时段线数据已预置，开启使用即可，可自定义调节色彩及边线宽度。

7、标记

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

样式配置

配置项	说明
碰撞检测	当标记位置相互重叠时，勾选该配置项，可避免重叠，按照定义的第一顺位进行展示。
标志	支持自定义上传图片组件（支持jpg、png等静态图片，同时可上传gif等动态图片），支持使用混合模式进行色彩的叠加、过滤，可根据实际场景定义宽高。
名称	可根据数据源返回信息展示相应文本内容，支持定义最大宽度，并可根据要求进行强制换行，支持编辑宽高、字体、字号、颜色、坐标位置、背景颜色或自定背景图片。
阴影	可根据实际展示需求定义阴影效果
数据系列	可根据数据源内类型字段分别定义多种类型点标记（标志、名称配置方法同上）

数据

根据真实地理经纬度数据驱动。

字段	说明
lng	经度
lat	纬度
name	名称
type	类型

*组件数据格式说明

数据样例

[
	{
		"lat": "28.56471",
		"lng": "117.55073",
		"name": "标记一",
		"type": 1
	},
	{
		"lat": "22.54286",
		"lng": "114.05956",
		"name": "标记二",
		"type": 1
	}
]

8、聚合热力

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

样式配置

热力点配置：

配置项	说明
最大、最小值	值的大小区间，根据区间来分配热力颜色的过渡
半径	单个点位半径大小
最大、最小值透明度	最大最小值对应的色彩透明度
模糊因子	模糊效果开关
渐变色	支持自定义热力图分段色彩，各段色彩占比及色值

数据

根据真实地理经纬度数据驱动。

字段	说明
lng	经度
lat	纬度
value	数值

*组件数据格式说明

数据样例

[
	{
		"lng": 116.339362,
		"lat": 39.724042,
		"type": "大货店",
		"value": 100
	},
	{
		"lng": 123.504194,
		"lat": 43.52114,
		"type": "大货店",
		"value": 80
	}
]

9、轮廓层

地图外围边线渐变效果配置。

样式配置

边框样式，支持调节边线粗细、渐变色彩、外发光效果。

10、线

地图上由经纬度串联的线段标识。

样式配置

配置项	说明
颜色	线段颜色
线宽	线段宽度
虚线	虚线间隔像素
曲线	开启后可配置曲率形成曲线视图
阴影	投影效果
图标	可自定义图标及对应宽高尺寸，默认会有起点向终点运动
持续时间	上述图标有起点至终点需要消耗的时间（0即不做动画）

集合，即可根据数据源内类型字段（过滤值映射数据源内类型字段值即可），定义多种类型线段，配置方式同上。

数据

根据真实地理经纬度数据驱动。

字段	说明
lng	经度
lat	纬度
type	类型

*组件数据格式说明

数据样例

[
	 {
		"lat": "28.56471",
		"lng": "117.55073",
		"type": 1
	},
	{
		"lat": "22.54286",
		"lng": "114.05956",
		"type": 1
	}
]

11、轮播线

可自动轮播切换的线段。

样式配置

虚线动画，每秒移动的像素，可模拟线条运动的状态。

线样式，支持定义线条颜色、宽度、线段类型。

轮播配置，可选择性开启轮播配置，定义轮播间隔时间，此处可定义轮播时，高亮线条的样式。

数据

根据真实地理经纬度数据驱动。

字段	说明
positions	线段字段

*组件数据格式说明

数据样例

[
	{
		"positions": [
			[
				116.23,
				39.545
			],
			[
				120.15,
				30.28
			],
			[
				113.23,
				23.16
			]
		]
	},
	{
		"positions": [
			[
				116.23,
				39.545
			],
			[
				100,
				35
			]
		]
	}
]

交互

此处轮播支持定义回调参数，具体用法同常规组件内容回调及数据联动方法。

12、分段指标型区域热力

按数值大小自定义各区域颜色分布。

样式配置

配置项	说明
无数据状态	定义数据源内字段无数据时地图颜色。
地图边界	各区域边界颜色、粗细配置。
分级配置	自定义颜色分段数，各分段均可定义数值区间及相应颜色。

数据

根据真实地理经纬度数据驱动。

字段	说明
adcode	行政区域编码
name	行政区域名称
value	数值大小

*组件数据格式说明

数据样例

[
	{
		"lng": 89.313661,
		"lat": 41.884415,
		"value": 50,
		"adcode": 650000
	},
	{
		"lng": 95.729677,
		"lat": 40.562358,
		"value": 150,
		"adcode": 620000
	}
]