边界地图v1.10.3
文档基于边界地图v1.10.3版本
组件说明
边界地图以边界轮廓数据绘制地图,支持自定义地图的展示内容,可以通过添加不同的子组件,来配置地图上的展示效果。
效果案例
*边界地图效果案例
组件结构
边界地图组件由「父组件」及「子组件」两部分组成,可根据实际场景分别定义对应调整配置项。
*边界地图组件结构
一、父组件配置项
子组件管理
组件创建之初,系统会默认携带常用子组件,使用者可根据实际场景对子组件进行新增或编辑。
支持对已添加子组件进行隐藏、重命名、复制、删除操作。
*子组件管理
样式
1、基本属性
位置尺寸:
位置包括组件的横坐标和纵坐标,单位为px;横坐标为组件左上角距离页面左边界的像素距离,纵坐标为组件左上角距离页面上边界的像素距离。
尺寸包括组件的宽度和高度,单位为px;可单击比例锁锁定组件宽高比,等比例调整组件的宽高,比例锁默认不锁定。
定点气泡图组件尺寸不影响组件内容显示、组件动画。
*组件位置尺寸说明
默认隐藏:
控制组件在页面中隐藏,在预览和发布页面中不显示该组件,通常配合交互事件使用该配置项。
2、全局样式
配置边界地图父组件样式。
*全局配置项说明
全局混合模式:
地图组件与下层底色的混合模式。
全局是否接受事件:
禁用后父组件以及子组件都将不支持点击交互事件。
投影方式:
组件提供墨卡托、WGS84投影方式。
*投影方式对比
内边距:
地图与组件边框的边距,通常用于地图下钻上卷时控制地图范围不覆盖周边指标。
地图配置:
数据:
用于调整地图范围,支持上传单个自定义的GeoJSON地图数据文件。
文件中包含需下钻的地图数据,并启用点击下钻时,地图配置则支持地图的下钻上卷。
GeoJSON数据案例(解压后上传单个.json文件):
adcode映射表:
📎AMap_adcode_citycode (1).xlsx
背景图片:
地图背景支持上传自定义图片填充。
线宽:
配置地图描边线宽,单位为px。
描边包括地图外轮廓以及内部行政区域的边界轮廓,不支持分别配置。
线颜色:
配置地图描边颜色。
描边包括地图外轮廓以及内部行政区域的边界轮廓,不支持分别配置。
线类型:
配置地图描边类型,实线、虚线。
*线类型对比
width缩减:
地图本身宽度缩减,单位为px。
宽度缩减时高度按比例也同时缩减。
heigth缩减:
地图本身高度缩减,单位为px。
高度缩减时宽度按比例也同时缩减。
填充:
支持单色、渐变填充方式。
填充类型为渐变时,支持调整渐变方向,横向、纵向。
*比例配置项说明
地图背景与填充的渲染顺序:
地图背景、填充单独绘制两层,当填充透明度非100%时,可透出地图背景。
*地图背景与填充的渲染顺序说明
交互配置:
点击:
点击交互启用时,地图支持点击下钻上卷交互。
*返回按钮&当前名称
返回按钮
地图下钻后出现返回按钮返回上层地图数据。
配置项 | 说明 |
文本 | 配置返回按钮文本内容 |
字号 | 配置返回按钮文本字体大小 |
颜色 | 配置返回按钮文本颜色 |
字体 | 配置返回按钮文本字体 |
位置X | X、Y指组件返回按钮与组件的相对位置,单位为px |
位置Y | |
宽度 | 返回按钮宽度px |
高度 | 返回按钮高度px |
背景 | 上传自定义背景图片 |
*返回按钮配置项说明
当前位置
地图下钻后出现当前位置提示当前地区位置。
配置项 | 说明 |
前缀 | 配置当前位置前缀文本内容 |
字号 | 配置返回按钮文本字体大小 |
颜色 | 配置返回按钮文本颜色 |
字体 | 配置返回按钮文本字体 |
位置X | X、Y指组件返回按钮与组件的相对位置,单位为px |
位置Y |
*当前位置配置项说明
鼠标覆盖:
启用时配置鼠标悬浮的区域样式。
阴影配置:
配置项 | 说明 |
颜色 | 气泡背景填充颜色 |
高斯模糊 | 阴影高斯模糊程度 |
X偏移 | 阴影X方向偏移距离,单位为px |
Y偏移 | 阴影Y方向偏移距离,单位为px |
*阴影配置配置项说明
名称配置:
区域名称样式配置。
*名称配置配置项
文字处理:
当区域名称密集存在遮挡时,可配置文字处理,对遮挡的区域名称文字进行偏移。
文字内容填写遮挡的区域名称。
边线配置:
地图描边支持多系列配置。
索引为-1时地图描边的渲染顺序位于地图背景后。
索引数值越大,渲染顺序越前。
*边线配置配置项
数据
边界地图父组件数据相对固定,故一般场景下此处无需进行编辑操作。
交互
载入动画
所有组件均提供移入、移入(小)、划变三种组件载入动画。
载入动画选择无时,则组件没有载入动画。
载入动画仅在可视化应用预览、发布组件加载时显示。
载入动画配置项:
配置项 | 说明 |
渐隐渐显 | 启用后载入动画增加渐隐渐显过渡 |
速率 | 匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1)) |
方向 | 动画方向 |
持续时间 | 载入动画持续时间,单位为ms |
延时 | 载入动画延时长,单位为ms |
其他交互配置参照进阶指南-自定义交互事件。
zoomIn回调
配置地图下钻时发出的回调。
返回Zoom0回调
配置地图上卷时发出的回调。
ZoomIn点击事件
配置地图下钻时的交互事件。
Zoom0点击事件
配置地图上卷时的交互事件。
载入动画配置项:
配置项 | 说明 |
渐隐渐显 | 启用是 |
速率 | 匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1)) |
方向 | 动画方向 |
持续时间 | 载入动画持续时间,单位为ms |
延时 | 载入动画延时长,单位为ms |
自定义事件
自定义事件为「交互事件」的增强模块,支持通过数据驱动组件状态、或变更组件样式配置,也可自定义编辑复杂的条件逻辑;
详细的自定义事件教学👉自定义事件教学
二、子组件配置
1、图片热力
样式
全局配置:
显示等级:
配置子组件在地图下钻上卷时的显示状态。
显示等级为-1时,子组件地图下钻前后时都显示。
显示等级为0时,子组件仅在地图下钻前显示。
显示等级为1时,子组件仅在地图下钻后显示。
分级配置:
通过系列配置热力分级样式
*分级配置说明
数据
子组件数据格式
字段 | 说明 |
area | 区域,图片热力显示所在区域 |
value | 值,热力对应数值 |
lng | 经度,图片中心所在经度 |
lat | 纬度,图片中心所在纬度 |
name | 名称,图片热力显示名称 |
2、标牌
用于展示简单展示地图数据,支持轮播。
样式
全局配置:
显示等级:
配置子组件在地图下钻上卷时的显示状态。
显示等级为-1时,子组件地图下钻前后时都显示。
显示等级为0时,子组件仅在地图下钻前显示。
显示等级为1时,子组件仅在地图下钻后显示。
数据
子组件数据格式
字段 | 说明 |
area | 区域,标牌显示所在区域 |
value | 值,标牌数值 |
3、热力标牌
样式
全局配置:
显示等级:
配置子组件在地图下钻上卷时的显示状态。
显示等级为-1时,子组件地图下钻前后时都显示。
显示等级为0时,子组件仅在地图下钻前显示。
显示等级为1时,子组件仅在地图下钻后显示。
分级配置:
*分级配置说明
数据
子组件数据格式
字段 | 说明 |
area | 区域,图片热力显示所在区域 |
value | 值,热力对应数值 |
lng | 经度,图片中心所在经度 |
lat | 纬度,图片中心所在纬度 |
name | 名称,图片热力显示名称 |
4、分类散点图
样式
全局配置:
显示等级:
配置子组件在地图下钻上卷时的显示状态。
显示等级为-1时,子组件地图下钻前后时都显示。
显示等级为0时,子组件仅在地图下钻前显示。
显示等级为1时,子组件仅在地图下钻后显示。
过滤散点:
当显示等级为-1时,可启用过滤散点,此时下钻后仅显示下钻区域的散点。
叠加方式:
配置散点重叠时的显示颜色模式。
*原色叠色对比
气泡尺寸:
分类散点图的散点气泡尺寸,根据数据中字段value值在尺寸的大小范围内映射。
数据中字段value值统一时,则气泡半径取最大最小尺寸的中间值。
*分类散点气泡尺寸与数值映射原理
图例:
图例的散点图标、文本、数值根据数据自动生成,图例文本、布局、背景、交互状态都支持配置样式。
支持点击图例,调整地图上散点选中状态。
*图例交互效果说明
颜色配置:
支持配置多系列散点样式,散点样式支持纯色、自定义。
类型:
填入数据中type字段的值。
*颜色配置类型说明
数据
子组件数据格式
字段 | 说明 |
area | 区域,图片热力显示所在区域 |
type | 类型,散点类型 |
lng | 经度,图片中心所在经度 |
lat | 纬度,图片中心所在纬度 |
交互
回调参数X:
组件默认点击触发回调,在配置回调时,字段值需要与当前子组件内数据字段保持一致,变量名可以理解为该字段值的别名可按需修改。
回调坐标X:
支持返回分类散点于组件的相对X坐标。
回调坐标参数Y:
支持返回分类散点于组件的相对Y坐标。
5、背景地图
样式
全局配置:
显示等级 | 配置子组件在地图下钻上卷时的显示状态。 显示等级为-1时,子组件地图下钻前后时都显示。 显示等级为0时,子组件仅在地图下钻前显示。 显示等级为1时,子组件仅在地图下钻后显示。 |
背景数据 | 支持自定义上传背景边界的GeoJSON数据。 |
样式配置:
支持底图边线和填充样式的配置。
十段线配置:
使用全国范围地图时,请务必开启十段线子组件。支持自定义上传图片组件(支持jpg、png等静态图片,同时可上传gif等动态图片)。
6、飞线图
样式
全局配置:
显示等级:
配置子组件在地图下钻上卷时的显示状态。
显示等级为-1时,子组件地图下钻前后时都显示。
显示等级为0时,子组件仅在地图下钻前显示。
显示等级为1时,子组件仅在地图下钻后显示。
数据
根据真实地理经纬度数据驱动。
字段 | 说明 |
from | 飞线开始位置,起点经纬度 |
to | 飞线结束位置,终点经纬度 |
speedValue | 速度 |
widthValue | 宽度 |
numberValue | 条数 |
lengthValue | 长度 |
*组件数据格式说明
7、区域热力
样式
全局配置:
显示等级:
配置子组件在地图下钻上卷时的显示状态。
显示等级为-1时,子组件地图下钻前后时都显示。
显示等级为0时,子组件仅在地图下钻前显示。
显示等级为1时,子组件仅在地图下钻后显示。
默认配置:
配置无数据区域地图样式。
分级配置:
*分级配置说明
数据
字段 | 说明 |
name | 区域名称,热力显示对应行政区域名称 |
value | 值,热力对应数值 |
8、渐变区域热力
样式
配置最大、最小、无值状态地图填充样式。
相较于区域热力来说,渐变区域热力子组件数据与热力颜色配置的映射关系是连续映射,区域热力是分段映射。
数据
字段 | 说明 |
name | 区域名称,热力显示对应行政区域名称 |
value | 值,热力对应数值 |
9、图片蒙版
上传自定义图片,可根据场景需求在数据设定行政区域设置图片蒙版。
数据
字段 | 说明 |
name | 名称,蒙版显示对应行政区域名称 |
10、标牌2
标牌2如下示例图所示用来轮播展示各个地区的数据情况。
全局配置
显示等级 | 当前组件地图分为不同等级,设置为0或-1为在当前中国地图显示,设置为1即下钻的第一级显示。 |
显示层级 | 画布中不同组件有层级之分,数值越大则显示的级别越高,如设置为20则可以“覆盖”其他组件显示。 |
轮播时间 | 标牌轮播时间。 |
按钮配置
图片 | 标牌2按钮图片,可自定义上传图片。 |
位置X | 按钮X坐标值。 |
位置Y | 按钮Y坐标值。 |
宽度 | 坐标图片宽度。 |
高度 | 坐标图片高度。 |
名称配置
位置X | 标牌内标牌名称X轴位置。 |
位置Y | 标牌内标牌名称Y轴位置。 |
字号 | 标牌内标牌名称字号。 |
颜色 | 标牌内标牌名称颜色。 |
字体 | 标牌内标牌名称字体。 |
状态配置
标牌2可设置不同状态,每个状态可设置图标和标牌状态,点击“+”即可添加一个新的状态。
状态值
状态名称,自定义即可。
图标配置
分为默认icon和当前icon,当前icon即示例中显示的图标图片。两者配置项相同,配置项如下。
图片 | icon图片,上传图片文件即可更改。 |
宽度 | icon宽度。 |
高度 | icon高度。 |
X偏移 | iconX轴偏移量。 |
Y偏移 | iconY轴偏移量。 |
标牌配置
图片 | 标牌图片,上传图片文件即可更改。 |
宽度 | 标牌宽度。 |
高度 | 标牌高度。 |
X偏移 | 标牌X轴偏移量。 |
Y偏移 | 标牌Y轴偏移量。 |
值配置
在值配置中可以针对每个不同状态的标牌内的水位值状态修改样式。
值字段 | 可针对每个不同状态设置值字段值。 |
值名称 | 对应字段值对应的值名称。 |
位置X | 在标牌内X偏移量。 |
位置Y | 在标牌内Y偏移量。 |
名字配置、值配置、后缀配置,为区分三者以颜色为区分点,请您参考下图。
名字配置即某个状态名字,如下示例图所示为“红色 历史最高”;值配置即标牌内值的样式,如下示例图所示为“绿色 244.5”;后缀即某个状态后缀的样式,如下示例图所示为“蓝色m”。
名字配置
字号 | 状态名称字号。 |
颜色 | 状态名称颜色。 |
字体 | 状态名称字体。 |
右间距 | 状态内状态值的右间距。 |
值配置
字号 | 状态值字号。 |
颜色 | 状态值颜色。 |
字体 | 状态值字体。 |
后缀配置
值 | 状态后缀值。 |
字号 | 状态后缀值字号。 |
颜色 | 状态后缀值颜色。 |
字体 | 状态后缀值字体。 |
左间距 | 状态后缀值左间距。 |
数据
字段 | 说明 |
text | 文本 |
数据样式
[ { "lng": 105, "lat": 30, "name": "水库1", "state": "蓝色", "dqsw": 12.23, "jjsw": 23.12, "bzsw": 33.33, "lszg": 44.56 }, { "lng": 116, "lat": 40, "name": "水库2", "state": "黄色", "dqsw": 212.23, "jjsw": 223.12, "bzsw": 233.33, "lszg": 244.56 }, { "lng": 130, "lat": 25, "name": "水库3", "state": "红色", "dqsw": 312.23, "jjsw": 323.12, "bzsw": 333.33, "lszg": 344.56 }, { "lng": 100, "lat": 25, "name": "水库4", "state": "红色", "dqsw": 312.23, "jjsw": 323.12, "bzsw": 333.33, "lszg": 344.56 } ]
11、等值面
等值面子组件用来展示等值区域数据,比如温度、热力等具有覆盖面积形式的数据。
样式
基础配置:
配置项 | 说明 |
层级次序 | 配置子组件在地图渲染的顺序。层级越高,图层被渲染在越上层。 |
细分级别 | 细分等级越高,等值面越精细。 |
剪裁文件 | 支持自定义上传特定区域的Geojson数据,达到控制等值面的地理范围。 |
全局透明度 | 支持调节等值面的整体透明度。 |
线配置 | 支持等值面的边框样式配置。 |
样式配置:
支持不同状态等值面的样式配置。临界值越高,等值面数据范围更精细。
*等值面 - 临界值示例
数据
字段 | 说明 |
DSAA | 等值面数组 |
数据样式
[ { "DSAA": { "minValue": -9999, "maxValue": 4, "maxW": 50.047465, "minW": 25.380049, "maxJ": 127.676881, "minJ": 97.794069, "rows": 132, "cols": 129, "data": [ ... ] } } ]
12、网格淹没
样式
基础配置:
配置项 | 说明 |
层级次序 | 配置子组件在地图渲染的顺序。层级越高,图层被渲染在越上层。 |
网格数据 | 支持自定义上传所需网格的GeoJson数据。 |
全局透明度 | 支持调节等值面的整体透明度。 |
样式配置:
支持不同网格状态的样式配置。
数据
字段 | 说明 |
id | id |
state | 状态 |
13、多色线段
多色线段子组件用来在地图内标识“线段”类地理数据,比如河流、道路、线路等数据。
样式
基础配置:
配置项 | 说明 |
层级次序 | 配置子组件在地图渲染的顺序。层级越高,图层被渲染在越上层。 |
河堤数据 | 支持自定义上传线段的GeoJSON数据。 |
全局透明度 | 支持调节等值面的整体透明度。 |
线宽 | 线段宽度配置。 |
样式配置:
支持不同线段状态的样式配置,可设置线段状态和颜色。
数据
字段 | 说明 |
id | id |
state | 状态 |
14、自定义区域
该子组件通过真实地理位置数据进行驱动,添加后可在子组件数据内调整地理位置来设置自定义区域。
样式
配置项 | 说明 |
层级次序 | 配置子组件在地图渲染的顺序。层级越高,图层被渲染在越上层。 |
默认样式 | 支持区域默认样式的配置。 |
选中样式 | 支持区域选中样式的配置。 |
数据
字段 | 说明 |
source | 数据来源,支持url/geojson等数据源 |
数据样式
根据真实地理经纬度数据或url链接进行驱动。
[ { "source": "https://easyv.assets.dtstack.com/components/static-image/borderMap/zhejiang.json", "data": { "name": "浙江省", "type": "area" } }, { "source": { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "name": "line1" }, "geometry": { "type": "LineString", "coordinates": [ [ 94.74609375, 38.03078569382294 ], [ 102.39257812499999, 35.38904996691167 ], [ 110.74218749999999, 36.31512514748051 ], [ 125.41992187499999, 47.517200697839414 ] ] } }, { "type": "Feature", "properties": { "name": "line2" }, "geometry": { "type": "LineString", "coordinates": [ [ 92.94433593749999, 33.65120829920497 ], [ 101.5576171875, 33.46810795527896 ], [ 106.74316406249999, 31.615965936476076 ], [ 114.43359375, 34.19817309627726 ], [ 118.65234374999999, 31.12819929911196 ], [ 113.37890625, 23.68477416688374 ] ] } } ] }, "data": { "name": "group1" } }, { "source": { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "name": "polygon1" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 90.9228515625, 28.420391085674304 ], [ 88.41796875, 35.137879119634185 ], [ 82.6611328125, 37.61423141542417 ], [ 80.771484375, 31.42866311735861 ], [ 90.9228515625, 28.420391085674304 ] ] ] } } ] }, "data": { "name": "group2" } } ]
欢迎您在评论区留下您对该组件的意见,管理员会及时回复您,如长时间未回复欢迎您搜索钉钉群:33782396或者扫描以下二维码添加微信群 @谨禧 说出您的想法,采纳后将送出定制礼品。
也可以通过问卷来向我们反馈需求:https://jinshuju.net/f/XyCXU0