基础平面地图v1.1.6
文档基于基础平面地图 v1.1.6版本
组件说明
该组件主要以二维轮廓地图和在线地图服务相结合的形式展示相应地理信息数据，可基于地图底图、聚合热力、飞线图层等地理信息子组件编辑地图样式，同时支持多种悬浮、单点聚焦、双击下钻、触控缩放等地图交互模式。
效果案例
*部分模版可视化效果
组件结构
基础平面地图组件主要由「父组件」及「子组件」两部分组成，可根据实际场景分别定义对应配置项。
*组件结构说明
模块 | 说明 |
父组件 | 针对「地图外廓」部分，支持对基础配置、地图样式、交互配置进行配置 |
子组件 | 地球内部数据叠加、装饰形态，可单独定义样式风格及相关数据 |
一、父组件配置
子组件管理
组件创建之初，系统会默认携带常用子组件，使用者可根据实际场景对子组件进行新增或编辑。
支持对已添加子组件进行隐藏、重命名、复制、删除操作。
*子组件管理
样式
1、基本属性
位置尺寸：
位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。
尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。
*组件位置尺寸说明
默认隐藏：
控制组件在页面中隐藏，在预览和发布页面中不显示该组件，通常配合交互事件使用该配置项。
2、基础配置
配置项 | 说明 |
数据来源 | 支持选择使用系统预置标准行政区域（最小支持显示区县范围），也可选择自定义上传对应GeoJSON数据，可支持进行下钻、上卷操作（通过上传地图压缩包.zip文件并，使用adcode进行关联）。 |
默认位置 | 可通过调整经纬度开放地图中心，支持开启无级缩放和调整缩放级别，开启无极缩放后，缩放级别可精确到小数。 |
3、地图样式
配置项 | 说明 |
填充 | 支持多层样式填充和混合模式调节，填充方式为颜色和图片自定义。 |
轮廓描边 | 可调节轮廓基本样式，支持多种转角类型和虚线类型。 |
外发光 | 支持开启并设定外发光效果。 |
区域名称 | 支持选择开启区域名称，可调节相关字体、字号及颜色。 文字处理：当地图范围较小，区域名称位置拥挤相互堆叠时，可于此处自定义相应文字及其所需偏离的坐标位置。（提示：所填文字需要与地图实际显示文字字符进行匹配） |
十段数 | 使用全国范围地图时，请务必开启十段线子组件。支持自定义上传图片组件（支持jpg、png等静态图片，同时可上传gif等动态图片）。 |
4、交互配置
配置项 | 说明 |
拖拽 | 开启支持地图拖拽。 |
缩放 | 支持地图缩放范围最大值、最小值控制，以及缩放控件配置样式配置。 |
悬停 | 当鼠标悬停坐标区域时，可调整区域填充、轮廓、名称等样式配置。 |
双击下钻 | 开启支持双击下钻，可自定义调节按钮配置、文字配置。（选择开启双击空白返回） |
单击聚焦 | 开启支持点击聚焦，可调节留白区域大小。 |
数据
系统默认对全球范围数据进行预置，也可根据自定义上传GeoJSON数据进行展示地图数据。
交互
载入动画
所有组件均提供移入、移入(小)、划变三种组件载入动画。
载入动画选择无时，则组件没有载入动画。
载入动画仅在可视化应用预览、发布组件加载时显示。
载入动画配置项：
配置项 | 说明 |
渐隐渐显 | 启用后载入动画增加渐隐渐显过渡。 |
速率 | 匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1))。 |
方向 | 动画方向。 |
持续时间 | 载入动画持续时间，单位为ms。 |
延时 | 载入动画延时长，单位为ms。 |
居中回调
针对单击聚焦时发送回调。
切换回调
针对双击下钻时发送回调。
自定义事件
自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑；
详细的自定义事件教学👉自定义事件教学
二、子组件配置
1、地图底图
与主题内容适配的基础底图。
基础配置
配置项 | 说明 |
层级 | 层级越高，图层被渲染在越上层 |
地图类型 | 支持mapbox和xzy格式的地图服务 |
*mapbox默认样式配置
获取第三方开源地图服务(以mapbox为例)
- 打开mapxbox studio链接 https://account.mapbox.com/
- 创建新的地图样式。
*创建样式
- 分享获得token和样式id。
*获得token和url链接
- 将复制的token和样式id粘贴至自定义选框中，即可完成自定义的地图样式。
*配置地图样式
2、矢量散点
主要用于做点位分布密度的标识。
基础配置
配置项 | 说明 |
层级 | 层级越高，图层被渲染在越上层。 |
可见级别 | 图层的可见级别范围，当地图的缩放级别大于(小于)这个范围，图层不可见。 |
层级
*层级配置解释
数据配置
配置项 | 说明 |
类型 | 类型名与数据源内「type」字段值对应。 |
矢量类型 | 可选择图形样式。 |
半径类型 | 可选择固定半径或通过数据「value」映射。 |
颜色模式 | 选择不同映射模式，配置散点颜色类型。 不映射时固定颜色；连续映射根据根据固定的渐变色自动配置；分段映射根据数值区间配置不同颜色。 |
*根据数据源内所含字段自定义散点类型
*根据数据源内所含字段对不同区间的颜色进行配置
数据
根据真实地理经纬度数据驱动。
字段 | 说明 |
lng | 经度 |
lat | 纬度 |
value | 数值大小 |
type | 散点类型 |
*组件数据格式说明
数据样例
[
{
"lng": 116.339362,
"lat": 39.724042,
"type": "1",
"value": 40
},
{
"lng": 123.504194,
"lat": 43.52114,
"type": "2",
"value": 40
}
]3、区域热力
主要用于标识不同区域数据量大小。
基础配置
配置项 | 说明 |
层级 | 层级越高，图层被渲染在越上层。 |
可见级别 | 图层的可见级别范围，当地图的缩放级别大于(小于)这个范围，图层不可见。 |
地图数据 | 支持自定义上传热力区对应GeoJSON数据，通过adcode捕捉区块。 |
*上传区域热力的地图数据及效果
样式配置
配置项 | 说明 |
描边 | 支持对地图描边的颜色和粗细进行修改。 |
颜色模式 | 选择不同映射模式，配置散点颜色类型。无数据时配置一个默认颜色。 连续映射根据固定的渐变色自动配置；分段映射根据数值区间配置不同颜色。 |
数据
根据真实地理经纬度数据驱动。
字段 | 说明 |
adcode | 行政区域编码 |
name | 行政区域名称 |
value | 数值大小 |
*组件数据格式说明
数据样例
[
{
"adcode": "330000",
"name": "浙江省",
"value": 100
},
{
"adcode": "310000",
"name": "上海市",
"value": 95
}
]4、点聚合
主要用于海量点位分布的呈现，根据点位的距离及地图层层级进行聚合。
基础配置
配置项 | 说明 |
层级 | 层级越高，图层被渲染在越上层 |
可见级别 | 图层的可见级别范围，当地图的缩放级别大于(小于)这个范围，图层不可见 |
最大聚合等级 | 最大聚合等级与地图缩放级别对应。当地图发生缩放时，聚合等级会对应改变；当可见级别大于最大聚合等级时，点位不再发生聚合。 |
聚合程度 | 决定聚合的范围，在范围内的点位会进行聚合 |
*最大聚合等级说明
数据配置
配置项 | 说明 |
散点类型 | 可选择散点的样式。 矢量图形支持对半径、填充颜色、描边效果进行配置。 自定义图片支持对图片样式、尺寸、透明度进行配置。 |
类型 | 类型名与数据源内「type」字段值对应。 |
名称配置 | 支持对文字样式、偏移进行设置。 |
聚合样式
配置项 | 说明 |
散点类型 | 可选择散点的样式。 矢量图形支持对样式、半径进行配置。 自定义图片支持对图片样式、尺寸、透明度进行配置。 |
填充方式 | 选择不同映射模式，配置散点颜色类型。 不映射则配置固定颜色；聚合数映射则根据最小到最大的渐变范围内映射颜色。 |
描边 | 支持修改聚合散点的描边颜色和粗细。 |
文本样式 | 支持修改散点的文本样式。 |
数据
根据真实地理经纬度数据驱动。
字段 | 说明 |
lng | 经度 |
lat | 纬度 |
name | 散点名称 |
type | 散点类型 |
*组件数据格式说明
数据样例
[
{
"lng": 116.845399,
"lat": 40.378488,
"name": "",
"type": 1
},
{
"lng": 116.493837,
"lat": 39.671814,
"name": "",
"type": 2
}
]5、聚合热力
主要用于标识不同区域数据量聚合程度。
基础配置
配置项 | 说明 |
层级 | 层级越高，图层被渲染在越上层。 |
可见级别 | 图层的可见级别范围，当地图的缩放级别大于(小于)这个范围，图层不可见。 |
样式配置
可通过调节半径、模拟因子来调整热力聚合样式，同时支持数据范围来控制数据聚合区的填充。
数据
根据真实地理经纬度数据驱动。
字段 | 说明 |
lng | 经度 |
lat | 纬度 |
value | 值 |
*组件数据格式说明
数据样例
[
{
"lng": 116.339362,
"lat": 39.724042,
"value": 100
},
{
"lng": 123.504194,
"lat": 43.52114,
"value": 80
},
{
"lng": 121.137429,
"lat": 41.097683,
"value": 50
}
]6、飞线图层
主要用于标识展示两地间数据往来、交互。
基础配置
配置项 | 说明 |
层级 | 层级越高，图层被渲染在越上层。 |
可见级别 | 图层的可见级别范围，当地图的缩放级别大于(小于)这个范围，图层不可见。 |
动画配置
配置项 | 说明 |
飞行时间 | 载入动画持续时间，数值越大，速度越慢。 |
发射间隔时间 | 动画间隔时间。 |
模拟随机 | 勾选可随即进行飞线发射。 |
样式配置
支持定义飞线飞行效果。
配置项 | 说明 |
飞线样式 | 支持定义飞线的长度、弧度、颜色。 |
头部图片 | 飞线的展示图片，可以调节尺寸和自动旋转。 |
发光 | 实现飞线的发光效果。 |
随机开始 | 勾选可随机进行飞线发射。 |
底线样式 | 支持定义底线的粗细、颜色。 |
落地效果 | 即飞线至目标点时，可显示着陆晕开效果，可自定义颜色、涟漪层次及消失时间。 |
数据
根据真实地理经纬度数据驱动。
字段 | 说明 |
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"
}
]7、图片散点
主要用于做点位分布密度的标识。
基础配置
配置项 | 说明 |
层级 | 层级越高，图层被渲染在越上层。 |
可见级别 | 图层的可见级别范围，当地图的缩放级别大于(小于)这个范围，图层不可见。 |
散点配置
通过上传自定义散点图片来确定散点样式，根据「type」字段值对应。
数据
根据真实地理经纬度数据驱动。
字段 | 说明 |
lng | 经度 |
lat | 纬度 |
type | 类型 |
*组件数据格式说明
数据样例
[
{
"lng": 118.405458,
"lat": 36.631539,
"type": 1,
"value": 32
},
{
"lng": 113.615419,
"lat": 34.667695,
"type": 1,
"value": 45
},
{
"lng": 104.035341,
"lat": 40.545663,
"type": 1,
"value": 32
}
]8、路径
主要用于展示地图路径流动。
基础配置
配置项 | 说明 |
层级 | 层级越高，图层被渲染在越上层。 |
可见级别 | 图层的可见级别范围，当地图的缩放级别大于(小于)这个范围，图层不可见。 |
样式配置
配置项 | 说明 |
底线样式 | 可调节底线类型和颜色。 |
流动效果 | 支持多种流动效果（图片跟踪动画、流光动画、蚂蚁线动画），及相应动画配置。 |
*蚂蚁线动画效果
*图片跟踪+流光动画效果
数据
根据真实地理经纬度组数数据驱动。
字段 | 说明 |
coordinates | 路径坐标 |
*组件数据格式说明
数据样例
[
{
"coordinates": [
[
120.38299687474967,
30.25732015973579
],
[
120.91034062474967,
30.825044045511792
]
],
"id": 1
},
{
"coordinates": [
[
117.43866093859077,
27.037755076912045
],
[
116.91131718859077,
26.920266509886847
]
],
"id": 2
}
]9、标牌
主要用于提示各区域标牌/数据信息
基础配置
配置项 | 说明 |
层级 | 层级越高，图层被渲染在越上层。 |
可见级别 | 图层的可见级别范围，当地图的缩放级别大于(小于)这个范围，图层不可见。 |
样式配置
配置项 | 说明 |
定位点 | 可自定义上传顶点图片，支持尺寸、偏移调节。 |
类别 | 标牌支持选择固定尺寸或自适应尺寸。 |
背景样式 | 根据不同标牌类别，可调整相应背景样式。其中，固定尺寸可支持上传自定义图片，可通过基准点调节标牌背景与定位点的位置关系。 |
内容样式 | 可配置标牌内容样式，包含前缀、主内容、后缀内容配置。 |
轮播动画
开启轮播动画后，可配置当前轮播点位的自定义样式，轮播动画间隔以及鼠标交互方式。
交互方式支持点击和悬停，效果图如下：
*鼠标点击交互效果
数据
根据真实地理经纬度数据驱动。
字段 | 说明 |
lng | 经度 |
lat | 纬度 |
value | 值 |
*组件数据格式说明
数据样例
[
{
"lng": 118.405458,
"lat": 36.631539,
"value": "-"
},
{
"lng": 113.615419,
"lat": 34.667695,
"value": 45
},
{
"lng": 104.035341,
"lat": 40.545663,
"value": 32
}
]10、视口控制
通过数据驱动视口聚焦点，达到初始视口控制。
*初始视口控制操作示范
数据
根据真实地理经纬度和显示层级进行数据驱动。
字段 | 说明 |
lng | 经度 |
lat | 纬度 |
zoom | 层级 |
*组件数据格式说明
数据样例
[
{
"lng": 105,
"lat": 34,
"zoom": 4
}
]交互
自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑；
详细的自定义事件教学👉自定义事件教学
adcode参考
提示：此处提供全国各城市、区域adcode编码，可下载获取。
欢迎您在评论区留下您对该组件的意见，管理员会及时回复您，如长时间未回复欢迎您搜索钉钉群：33782396或者扫描以下二维码添加微信群 @谨禧 说出您的想法，采纳后将送出定制礼品。
也可以通过问卷来向我们反馈需求：https://jinshuju.net/f/XyCXU0