3D边界地图 v1.9.2(已下架)

文档基于3D边界地图 v1.9.2版本

组件说明

该组件主要以三维形态对相对宏观地图数据进行展示,支持添加点位、热力、标牌、柱图、飞线等地图子图层。

效果案例

*3D边界图效果展示


组件结构

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

*组件结构说明

模块

说明

父组件

3D边界地图底座部分,支持对地图底座样式、中心点位、俯仰角度、地图信息显隐进行配置

子组件

地图内点、热力、线等数据叠加,可单独定义样式风格及相关数据


一、父组件配置

子组件管理

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

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

*子组件管理


样式

1、基本属性

位置尺寸:

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

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

*组件位置尺寸说明


默认隐藏:

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


2、基础配置

设备像素比,可根据实际屏幕场景调节, 数值越大清晰度越高(同样对设备配置的要求也越高)。

旋转,默认为0即不进行转到,数字越大转速越快,正负可定义旋转方向。

交互配置:

  • 交互方式,支持定义地图下钻时动画形态。
  • 主地图控制,可选择性开启地图主层级的鼠标视角控制。
  • 子地图控制,可选择性开启地图子层级的鼠标视角控制。

相机配置,支持自定义调节相机位置、视点。

经纬度映射比例:

修改经纬与维度的映射比例,例:比例为1时经纬度1:1映射地图。

3、名称配置

可切换地图内行政区划名称显隐,显示名称时可配置字体样式。

4、倒影配置

支持选择开启三维地图倒影,可调节倒影与原地图相隔距离,且可控制所需显示倒影的地图层级。

5、场景雾化

可选择性开启地图平面的雾化效果,即地图表面的 颜色模糊叠加效果。


6、地图数据

默认:

地图数据来源,系统默认提供标准省市区域的标准边界数据,可自行选择所需的区域范围。

也可自行引用其他地图数据,填入对应地图geojson地址即可。

自定义:

  1. 文件格式:3D边界地图目前只支持json格式地图文件的自定义上传(必须是以.json结尾,以.geosjon结尾的文件需要改后缀)。
  2. 文件数据格式:组件需要的json文件其数据结构中必须包含以下最基本的数据结构和字段。
  3. 上传文件:地图文件需要打包成zip包上传,若需要下钻功能时,zip包中需要同时包含父级地图和对应子级地图的数据文件
  4. 命名规范:地图数据文件的命名需要是六位的数字,如123456.json。当不需要下钻功能时,文件名可以是任意的六位数字,但是当需要地图下钻功能时,地图文件的名称需要是有意义的adcode,用于确保父级对子级地图文件的引用
  5. 字段解释:

父级地图文件中 properties.adcode表示其下属的一个子级地图区块

properties.name是子级地图的区域名称

properties.parent.adcode是父级地图自己的区域编号

  1. 单文件附件 📎140000.json (1).zip
  2. 多文件附件📎zhejiang (1).zip



7、主、子地图配置

拉伸高度,即3D地图的厚度。

支持定义地图各个面的色彩(同时支持自定义上传材质贴出,如表面颜色贴纸、法线贴图、置换贴图),边线的色彩、粗细。


8、自发光

支持开启并设定自发光效果。

光强:数值越大地图上逐渐的光效越强烈。(提示当前仅针对「标牌柱子」子组件生效)


9、特效配置

支持定义区域轮播凸起效果。


10、轮播配置

可选择性开启自动轮播,支持设定其轮播切换时长。


11、返回按钮

地图可点击下钻,支持自定义返回按钮、文本样式。


数据

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


交互

载入动画

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

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

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


载入动画配置项:

配置项

说明

渐隐渐显

启用后载入动画增加渐隐渐显过渡

速率

匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1))

方向

动画方向

持续时间

载入动画持续时间,单位为ms

延时

载入动画延时长,单位为ms


回调

支持分别定义下钻进入子地图及返回父地图回调参数。

回调参数即为全局性的参数变量,用于控制组件之间参数的传递,可通过设置回调参数来实现数据驱动交互。

其中,字段值即参数变量,变量名即对字段值的重命名。

详细的回调参数教学👉 回调的使用

自定义事件

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

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


二、子组件配置

1、光标

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


样式配置

位置高度,即对应点位距离地图水平面的的高度(一般情况都需大于地图厚度)。

显示等级,即对应光标所需显示的地图层级(所有层级,父级、子级)。

可选择性开始点位轮播,并设置轮播间隔时间。

支持分别定义默认光标及当前选中光标的样式、风格。


数据

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

字段

说明

lng

经度

lat

纬度

add

区域名称

adcode

唯一行政区域编码

count

对应位置下数值

*组件数据格式说明

数据样例

[
	{
		"lng": 119.6104,
		"lat": 29.516852,
		"add": "杭州市",
		"adcode": "330100",
		"count": 68
	},
	{
		"lng": 120.114648,
		"lat": 30.736215,
		"add": "湖州市",
		"adcode": "330500",
		"count": 60
	},
	{
		"lng": 120.760596,
		"lat": 30.513504,
		"add": "嘉兴市",
		"adcode": "330400",
		"count": 67
	}
]


2、标牌柱子

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


样式配置

显示等级,即标牌柱子在地图上所需展示的层级(所有层级,父级、子级)

光柱配置,即对应位置下柱形图的样式、风格。

配置项

说明

颜色

支持柱子纯色及渐变颜色调节

粗细

柱子的粗细控制

宽度比例

柱子粗细缩放比例,值越大柱子越粗

高度比例

柱子高度缩放比例,值越大主题越高

柱子类型

可选择使用方柱或圆柱


文字配置,标牌内相应文字的色彩、风格、偏移位置。

配置项

说明

整体部分

标牌整体坐标位置、宽高及背景色的配置

后缀

后缀文案、坐标位置、文本字号颜色的配置

序号部分

序号坐标位置、背景色彩、位置及宽高(支持自定义背景)

数值部分

数值文本字号、色彩数值及位置文本字号、色彩

地址部分

文本文本字号、色彩数值及位置文本字号、色彩


支持定义柱形图默认风格及被选中状态。



数据

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

字段

说明

lng

经度

lat

纬度

add

区域名称

adcode

唯一行政区域编码

count

对应位置下数值

*组件数据格式说明

数据样例

[
	{
		"lng": 119.4104,
		"lat": 29.916852,
		"add": "杭州市",
		"adcode": "330100",
		"count": 68
	},
	{
		"lng": 120.014648,
		"lat": 30.836215,
		"add": "湖州市",
		"adcode": "330500",
		"count": 60
	},
	{
		"lng": 120.860596,
		"lat": 30.713504,
		"add": "嘉兴市",
		"adcode": "330400",
		"count": 67
	}
]


3、突出区域

主要用于高亮所选中区域。

基础配置

来源

地图数据来源。

  1. 文件格式:3D边界地图目前只支持json格式地图文件的自定义上传(必须是以.json结尾,以.geosjon结尾的文件需要改后缀)。
  2. 文件数据格式:组件需要的json文件其数据结构中必须包含以下最基本的数据结构和字段
  3. 上传文件:地图文件需要打包成zip包上传,若需要下钻功能时,zip包中需要同时包含父级地图和对应子级地图的数据文件
  4. 命名规范:地图数据文件的命名需要是六位的数字,如123456.json。当不需要下钻功能时,文件名可以是任意的六位数字,但是当需要地图下钻功能时,地图文件的名称需要是有意义的adcode,用于确保父级对子级地图文件的引用
  5. 字段解释:

父级地图文件中 properties.adcode表示其下属的一个子级地图区块

properties.name是子级地图的区域名称

properties.parent.adcode是父级地图自己的区域编号

  1. 单文件附件📎140000.json.zip
  2. 多文件附件📎zhejiang.zip

位置高度

突出区域高度。

显示层级

所有等级:任何层级下都会突出显示对应地区。

0级地图:即地图数据最开始的层级。

1级地图:下钻后的第一级区域突出显示。

地图配置

自定义突出区域模型,风格样式,在地图配置中可通过如下图所示配置项进一步对突出显示区域进行自定义配置。


4、区域热力

主要用于展示各区域不同数值大小。


样式配置

支持设定最大、最小两个颜色值,系统将根据各区域对应的数值进行颜色的呈现。


数据

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

字段

说明

lng

经度

lat

纬度

add

区域名称

adcode

唯一行政区域编码

value

对应位置下数值

*组件数据格式说明

数据样例

[
	{
		"lng": 119.4104,
		"lat": 29.916852,
		"add": "杭州市",
		"adcode": "330100",
		"value": 68
	},
	{
		"lng": 120.014648,
		"lat": 30.836215,
		"add": "湖州市",
		"adcode": "330500",
		"value": 60
	},
	{
		"lng": 120.860596,
		"lat": 30.713504,
		"add": "嘉兴市",
		"adcode": "330400",
		"value": 67
	}
]


5、类型标牌

主要通过不同类型标牌展示各位置相关文本、数值指标。


样式配置

基础配置,可定义标牌需展示的地图层级,可自定义设定轮播时间,0即不进行轮播。

支持定义标牌宽高、大小,文本内容字号、颜色。

类型设置,可根据数据内不同 类型字段,自定义上传编辑标牌形态(类型值即对应数据内相应用以区分的类型的字段值)。

值配置,即可定义标配内所需展示的字段信息,根据实际数据返回的字段名称进行添加,可添加多个字段,且支持定义各字段的x、y坐标位置。


数据

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

字段

说明

lng

经度

lat

纬度

type

类型字段

预警主体

自定义标牌信息字段

预警内容

自定义标牌信息字段

*组件数据格式说明

数据样例

[
	{
		"lng": 116.813732,
		"lat": 32.310278,
		"type": "绿色",
		"预警主体": "上海益丰大药房徐闵店",
		"预警内容": "药店连续30天未销售特药"
	},
	{
		"lng": 116.121594,
		"lat": 33.509269,
		"type": "红色",
		"预警主体": "上海益丰大药房徐闵店,测试数据1",
		"预警内容": "药店连续30天未销售特药,测试数据1"
	}
]


6、图片

主要作为3D边界地图背景装饰。


样式配置

基础配置,支持定义图片背景所需显示的地图层级。

平面配置,可根据实际场景自定义上传背景图片,支持定义各背景图片的尺寸、位置、动画。

*圆盘背景图片示例

adcode参考

提示:此处提供全国各城市、区域adcode编码,可下载获取。

📎AMap_adcode_citycode.xlsx




欢迎您在评论区留下您对该组件的意见,管理员会及时回复您,如长时间未回复欢迎您搜索钉钉群:33782396或者扫描以下二维码添加微信群 @谨禧 说出您的想法,采纳后将送出定制礼品。

也可以通过问卷来向我们反馈需求:https://jinshuju.net/f/XyCXU0

400-8505-905复制
免费试用
在线咨询
微信社区
易知微-数据可视化
微信扫一扫入群