3D边界地图 v1.14.1（已下架）

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

组件说明

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

效果案例

*3D边界图效果展示

组件结构

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

*组件结构说明

一、父组件配置

子组件管理

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

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

*子组件管理

样式

1、基本属性

位置尺寸：

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

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

*组件位置尺寸说明

默认隐藏：

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

2、基础配置

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

纹素密度，是纹素与像素的比。 纹素密度会随着物体相对摄像机的距离而改变。 纹素密度影响内存的使用量，也会影响三维场景的视觉品质。

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

交互配置：

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

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

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

位置回调，勾选支持后可以根据点击传出topkey和leftkey的位置参数作为回调参数给其他组件，这两个参数分别对应点击点的坐标在整个大屏中，距离上边缘和左边缘的距离。

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

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

3、地图数据

默认：

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

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

自定义：

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

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

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

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

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

4、主、子地图、1级地图配置

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

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

5、自发光配置

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

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

6、特效配置

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

7、名称配置

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

自定义配置，可以更改底图上的名称大小和位置偏移。（如下图）

8、轮播配置

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

9、返回按钮

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

数据

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

交互

载入动画

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

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

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

载入动画配置项：

回调

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

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

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

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

自定义事件

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

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

二、子组件配置

1、光标

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

样式配置

渲染层级，层级越大越晚绘制（后绘制的对象会覆盖先绘制的对象）

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

显示等级，即对应光标所需显示的地图层级（所有层级，父级、子级）。

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

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

数据

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

*组件数据格式说明

数据样例

[
	{
		"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": 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是父级地图自己的区域编号

6. 单文件附件📎140000.json.zip
7. 多文件附件📎zhejiang.zip

位置高度

突出区域高度。

显示层级

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

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

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

地图配置

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

4、文字面

主要用于自定义3D边界地图表面的文字样式和位置。

基础配置

显示等级，即对应光标所需显示的地图层级（所有层级，父级、子级）。

支持设置文字面的大小、高度、颜色以及字体。

数据

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

*组件数据格式说明

数据样例

[
	{
		"lng": 115.930706,
		"lat": 38.873863,
		"name": "雄安新区"
	}
]

5、区域热力

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

样式配置

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

数据

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

*组件数据格式说明

数据样例

[
	{
		"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
	}
]

6、类型标牌

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

样式配置

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

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

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

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

数据

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

*组件数据格式说明

数据样例

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

7、图片

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

样式配置

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

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

*圆盘背景图片示例

8、流光

主要作为3D边界地图表面装饰。

基础配置

支持设置流光特效的开始和结束颜色、长度、线形。

动画配置

可以选择是否随机起点开始，可设定速度。

9、粒子系统

主要作为3D边界地图环境装饰。

通过粒子系统进入编辑界面。

基础配置

支持自定义上传粒子样式（注意：gif动图不会生效）

支持设置粒子密度、尺寸、透明度。

支持设置粒子范围位置以及范围大小。

动画配置

支持配置粒子垂直和水平方向粒子的运送速度，支持风向模拟。

10、上升粒子

主要作为3D边界地图环境装饰。

通过上升粒子进入编辑界面。

基础配置

支持自定义上传数码贴图（注意：gif动图不会生效）

支持设置刷新频率，粒子的宽高限度。

支持设置粒子范围位置以及范围大小。

动画配置

支持配置粒子垂直和水平方向粒子的运送速度。

11、聚合热力

主要用于标识不同区域数据量聚合程度。

配置

数据

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

*组件数据格式说明

数据样例

[
	{
		"lng": 119.4104,
		"lat": 29.916852,
		"value": 68
	},
	{
		"lng": 120.014648,
		"lat": 30.836215,
		"value": 60
	},
	{
		"lng": 120.860596,
		"lat": 30.713504,
		"value": 67
	},
	{
		"lng": 120.60111,
		"lat": 29.878755,
		"value": 74
	},
	{
		"lng": 121.468491,
		"lat": 29.818994,
		"value": 127
	},
	{
		"lng": 119.972924,
		"lat": 29.152805,
		"value": 84
	},
	{
		"lng": 121.147338,
		"lat": 28.881641,
		"value": 112
	},
	{
		"lng": 118.88,
		"lat": 28.97,
		"value": 41
	},
	{
		"lng": 119.72561,
		"lat": 28.187378,
		"value": 53
	},
	{
		"lng": 120.65,
		"lat": 28.01,
		"value": 144
	},
	{
		"lng": 122.169872,
		"lat": 30.03601,
		"value": 33
	}
]

12、散点

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

基础配置

散点配置

值区间，可用配置或者数据的形式设置值区间。

轮播，可选择是否开启轮播，支持更改轮播图标样式。

系列，支持设置系列以及不同系列对应的样式（包括自定义图片，标牌图片和文字的偏移以及透明度等相关配置的更改）。

数据

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

*组件数据格式说明

数据样例

[
	{
		"lng": 119.4104,
		"lat": 29.916852,
		"value": 68
	},
	{
		"lng": 120.014648,
		"lat": 30.836215,
		"value": 60
	},
	{
		"lng": 120.860596,
		"lat": 30.713504,
		"value": 67
	},
	{
		"lng": 120.60111,
		"lat": 29.878755,
		"value": 74
	},
	{
		"lng": 121.468491,
		"lat": 29.818994,
		"value": 127
	},
	{
		"lng": 119.972924,
		"lat": 29.152805,
		"value": 84
	},
	{
		"lng": 121.147338,
		"lat": 28.881641,
		"value": 112
	},
	{
		"lng": 118.88,
		"lat": 28.97,
		"value": 41
	},
	{
		"lng": 119.72561,
		"lat": 28.187378,
		"value": 53
	},
	{
		"lng": 120.65,
		"lat": 28.01,
		"value": 144
	},
	{
		"lng": 122.169872,
		"lat": 30.03601,
		"value": 33
	}
]

13、地图路径

可根据实际的地理坐标生成地图路径。

线样式，支持更改路径的颜色和粗细。

数据

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

*组件数据格式说明

数据样例

[
	[
		{
			"lng": 120.177855,
			"lat": 30.25859
		},
		{
			"lng": 121.630182,
			"lat": 29.870107
		},
		{
			"lng": 121.432424,
			"lat": 28.661679
		}
	]
]

实操模板

链接点击链接可以查看教程和创建模板---3D地图下钻联动交互

链接点击链接可以查看教程和创建模板---3D边界地图场景切换

教学视频--3D边界地图场景切换

adcode参考

📎AMap_adcode_citycode.xlsx

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

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