3D高德地图
文档基于3D高德地图v1.1.0版本
组件说明
该组件主要以高德地图服务为依托对相对精细的地理位置信息进行展示，如精细到区域、街道或楼栋级别的点标记、热力分布等地理信息的呈现。同时支持地貌、矢量地形渲染，丰富了3D子组件展示形态（聚合热力、飞线等）。
效果案例
*3D高德地图效果配置示例
组件结构
3D高德地图组件主要由「父组件」及「子组件」两部分组成，可根据实际场景分别定义对应配置项。
*组件结构说明
模块 | 说明 |
父组件 | 高德地图底座部分，支持对地图展示模式切换，自定义地图底图样式、图层设置、对场景效果进行更改配置以及场景管理及切换。 |
子组件 | 地图内点、热力、线等数据叠加，可单独定义样式风格及相关数据。 |
一、父组件配置
子组件管理
组件创建之初，系统会默认携带常用子组件，使用者可根据实际场景对子组件进行新增或编辑。
支持对已添加子组件进行隐藏、重命名、复制、删除操作。
*子组件管理
样式
1、基本属性
位置尺寸：
位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。
尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。
*组件位置尺寸说明
默认隐藏：
控制组件在页面中隐藏，在预览和发布页面中不显示该组件，通常配合交互事件使用该配置项。
2、展示模式
可根据地图样式切换不同的展示模式（卫星地图会渲染在最上层，故不跟随样式进行切换展示）
*展示模式
展示模式 （样式为靛青蓝） | 3D模式 | 3D（矢量地形图渲染） | 3D（卫星地形图渲染） |
图例 |
|
|
|
介绍 | 保留原先「高德地图」基础3D模式，3D模式下可定义天空色彩、俯仰角度，也可进入场景管理进行视角定位和切换。 | 矢量地形图在保留了行政区划边界、路网、POI、楼块等地图要素的基础上，呈现完整且清晰描绘地形走势的标准地图，即呈现了地形走势，又展示了更多图面信息。 | 以丰富的影像细节去表现区域的地理外貌，可以真实地还原实景中的自然要素。 |
3、地图来源
EasyV高德地图组件默认配置了公共的地图样式，可进行直接选择，同时也支持接入高德地图自定义样式。
*默认样式 *自定义样式
Key、密钥、地图样式ID，由高德控制台获取，使用者可通过高德控制台对地图底座风格样式进行编辑，定义好获取对应的Key及ID键入至此处即可。
🌐 获取自定义地图样式及Key请您查看👇
3、图层设置
道路、建筑、标记、路况，可根据实际需求选择性开启。
4、场景管理
单击父组件内「场景管理」按钮，进入辅助编辑视图，可以自定义创建多个场景，每个场景可以设置动画类型、环绕速度等配置；
*场景管理编辑配置
动画类型
主要为「环绕」、「多点巡航」两种动画类型。
环绕：添加好场景后可直接左侧鼠标编辑三维视图，镜头视角处点击保存即可录入，支持设置环绕速度配置信息。
*镜头保存
多点巡航：可以添加多个镜头，镜头视角处点击保存即可录入，各镜头串联及可完成连贯场景的配置，支持设置各镜头间切换时间等配置信息。默认开启「循环播放」，开启可以实现多个镜头之间自动切换播放的效果。
*多点巡航
动画预览
点击
可以开始开始、暂停或停止镜头的动画效果。
视角信息
即在场景管理里辅助进行视角定位。缩放级别支持小数级别。
地图范围： 支持adcode或行政区名称来进行定位，行政区名称支持中国、省、市、区/县名称。
*视角信息
与其他组件交互
支持通过交互组件的自定义事件控制多场景切换，如使用选项卡组件，鼠标点击可以切换至特定场景。
*通过自定义事件控制多场景切换
数据
高德地图父组件数据相对固定，系统默认对全球范围数据进行预置，故此处一般场景下无需进行编辑操作。
交互
载入动画
所有组件均提供移入、移入(小)、划变三种组件载入动画。
载入动画选择无时，则组件没有载入动画。
载入动画仅在可视化应用预览、发布组件加载时显示。
载入动画配置项：
配置项 | 说明 |
渐隐渐显 | 启用后载入动画增加渐隐渐显过渡 |
速率 | 匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1)) |
方向 | 动画方向 |
持续时间 | 载入动画持续时间，单位为ms |
延时 | 载入动画延时长，单位为ms |
自定义事件
自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑；
详细的自定义事件教学👉自定义事件教学
定位至城市：接收的数据需要返回含有城市名称或adcode的对象，例如切换到上海市，可输入 return 310000；
场景切换：
二、子组件配置
1、点标记
主要用于做点位分布密度的标识。
基础配置
配置项 | 说明 |
层级 | 当地图中有很多子组件产生叠加时，层级越高则在上层显示，该数字没有明确数字，与其他子组件有对比即可。 |
可见级别 | 图层的可见级别范围，当地图的缩放级别大于(小于)范围，地图层不可见。 |
样式配置
支持设置点的形状、颜色、大小、方向以及尺寸类型是否随数据映射，且支持自定义上传标识图标或视频。
交互动画
触发方式可选择悬停和点击。当鼠标选择点击/悬浮时，鼠标点击/悬浮时，显示当前点的效果。
当前样式支持自定义上传。
数据
根据真实地理经纬度数据驱动。
字段 | 说明 |
Name | 点名称 |
lng | 经度 |
lat | 纬度 |
Value | 数值大小 |
type | 支持多类型样式配置散点 |
*组件数据格式说明
数据样例
[
{
"lng": 116.3,
"lat": 39.9,
"type": 1,
"value": 99
},
{
"lng": 121.48,
"lat": 31.22,
"type": 1,
"value": 8
},
{
"lng": 140,
"lat": 35,
"type": 2,
"value": 38
},
{
"lng": 114.05,
"lat": 22.55,
"type": 2,
"value": 89
}
]交互
回调：匹配动作支持点击、悬浮。（用法同平台常规回调一致，详细可参见交互数据联动）。
自定义事件：支持 1.当请求完成或数据变化时 2.支持鼠标点击 3.支持鼠标悬浮（交互事件及自定义事件用法与其他常规组件一致。）
2、信息面板
主要用于提示各区域标牌/数据信息。支持添加设置不同的状态样式。
基础配置
配置项 | 说明 |
层级 | 当地图中有很多子组件产生叠加时，层级越高则在上层显示，该数字没有明确数字，与其他子组件有对比即可。 |
可见级别 | 图层的可见级别范围，当地图的缩放级别大于(小于)这围，地图层不可见。 |
样式配置
配置项 | 说明 |
状态配置 |
定位点样式：包括默认样式和当前样式（当前样式配合交互动画，当鼠标选择 点击/悬浮时，鼠标点击/悬浮时，显示当前点的效果。） |
内容样式 | 信息面板支持对应字段名的内容显示，支持设置标签、值、后缀样式。 |
交互动画
触发方式可选择悬停和点击。当鼠标选择点击/悬浮时，鼠标点击/悬浮时，显示当前点的效果。
可选择是否轮播，并设置轮播时长。
数据
字段 | 说明 |
lng | 经度 |
lat | 纬度 |
state | 状态 |
数据样例
[
{
"lng": 120.405458,
"lat": 28.631539,
"state": "优",
"value1": "监测点#01",
"value2": "24.3",
"value3": "优"
},
{
"lng": 90.405458,
"lat": 41.631539,
"state": "良",
"value1": "监测点#02",
"value2": "56.4",
"value3": "良"
},
{
"lng": 116.405458,
"lat": 38.631539,
"state": "差",
"value1": "监测点#03",
"value2": "102.7",
"value3": "差"
}
]交互
3、点聚合
点聚合子组件通过将同类散点聚合的方式综合显示数据，主要解决地图中点要素很多时候的表示困难的问题。点聚合可以用少量的点或图标来表示地图中的所有点，让地图显示更清晰明朗。
基础配置
配置项 | 说明 |
层级 | 当地图中有很多子组件产生叠加时，层级越高则在上层显示，该数字没有明确数字，与其他子组件有对比即可。 |
可见级别 | 图层的可见级别范围，当地图的缩放级别大于(小于)这围，地图层不可见。 |
最大聚合级别 | 最大的聚合级别，大于该级别则不进行相应的聚合。 |
聚合半径 | 可用来调节聚合范围，聚合半径越大，聚合的范围越大。 |
图标配置
支持配置图表列表的散点类型、半径、描边等。支持名称配置，对文本样式进行修改。
聚合配置
支持修改聚合图标的散点类型和半径大小，填充方式可选择1.不映射 2.持续映射（可根据聚合的最大最小值进行相应的颜色映射）
数据
点聚合仍然以真实地理位置信息为数据基础。
字段 | 说明 |
lng | 经度 |
lat | 纬度 |
value | 数值 |
type | 类型 |
name | 聚合点显示名称 |
数据样例
[
{
"lng": "116.408032",
"lat": "39.909729",
"value": 8,
"type": "类型2",
"name": "名称六"
},
{
"lng": "121.461743",
"lat": "31.231584",
"value": 8,
"type": "类型2",
"name": "名称一"
},
{
"lng": "113.265942",
"lat": "23.08983",
"value": 8,
"type": "类型1",
"name": "名称二"
},
{
"lng": "104.059399",
"lat": "30.562253",
"value": 8,
"type": "类型2",
"name": "名称六"
},
{
"lng": "108.939621",
"lat": "34.343147",
"value": 1,
"type": "类型2",
"name": "名称四"
},
{
"lng": "112.985037",
"lat": "23.15046",
"value": 1,
"type": "类型3",
"name": "名称八"
}
]
交互
回调：匹配动作支持点击。（用法同平台常规回调一致，详细可参见交互数据联动）。
（注：最终发出的回调会定位到的是具体的单个点标记的位。）
自定义事件：支持 1.当请求完成或数据变化时 2.支持鼠标点击 （交互事件及自定义事件用法与其他常规组件一致。）
4、聚合热力
主要用户点位聚合热力分布情况。
基础配置
配置项 | 说明 |
层级 | 当地图中有很多子组件产生叠加时，层级越高则在上层显示，该数字没有明确数字，与其他子组件有对比即可。 |
可见级别 | 图层的可见级别范围，当地图的缩放级别大于(小于)这围，地图层不可见。 |
样式配置
配置项 | 说明 |
半径 | 可调节聚合热力的大小 |
模糊因子 | 可用来调节透明度 |
最大高度 | 支持设置聚合热力的最大高度 |
颜色模式 | 支持连续和分段映射 注： 1.分段映射中，value值的大小会映射在对应的区间内）。 2.颜色中的透明度不支持调整，透明度的调整可在模糊因子中进行调整。 |
数据
根据真实地理经纬度数据驱动。
字段 | 说明 |
lng | 经度 |
lat | 纬度 |
value | 数值大小 |
*组件数据格式说明
数据样例
[
{
"lng": 116.191031,
"lat": 39.988585,
"value": 10
},
{
"lng": 116.389275,
"lat": 39.925818,
"value": 11
},
{
"lng": 116.287444,
"lat": 39.810742,
"value": 12
}
]5、飞线
主要用于标识展示两地间数据往来、交互。
基础配置
配置项 | 说明 |
层级 | 当地图中有很多子组件产生叠加时，层级越高则在上层显示，该数字没有明确数字，与其他子组件有对比即可。 |
可见级别 | 图层的可见级别范围，当地图的缩放级别大于(小于)范围，地图层不可见。 |
样式配置
支持定义飞线粗细、长度、宽度、飞线速度及飞线颜色（支持渐变色）。
动画配置
配置项 | 说明 |
飞行时间 | 载入动画持续时间，数值越大，速度越慢。 |
模拟随机 | 勾选可随即进行飞线发射。 |
数据
根据真实地理经纬度数据驱动。（数据的来源可在Easymap中获取）
字段 | 说明 |
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"
}
]6、路径
主要用于地图上路线的展示。（数据的来源可在Easymap中获取）
基础配置
配置项 | 说明 |
层级 | 当地图中有很多子组件产生叠加时，层级越高则在上层显示，该数字没有明确数字，与其他子组件有对比即可。 |
可见级别 | 图层的可见级别范围，当地图的缩放级别大于(小于)范围，地图层不可见。 |
路径配置
配置项 | 说明 |
底线样式 | 支持虚线和实线类型，支持更改线的粗细和颜色。 |
流动样式 | 支持流光样式和图片跟踪样式 |
数据
根据真实地理经纬度组数数据驱动。
字段 | 说明 |
coordinates | 路径坐标 |
*组件数据格式说明
数据样例
[
{
"coordinates": [
[
120.38299687474967,
30.25732015973579
],
[
120.91034062474967,
30.825044045511792
]
],
"id": 1
},
{
"coordinates": [
[
117.43866093859077,
27.037755076912045
],
[
116.91131718859077,
26.920266509886847
]
],
"id": 2
}
]7、多边形组
主要用于地图上区块面的展示。（数据的来源可在Easymap中获取）
基础配置
配置项 | 说明 |
层级 | 当地图中有很多子组件产生叠加时，层级越高则在上层显示，该数字没有明确数字，与其他子组件有对比即可。 |
可见级别 | 图层的可见级别范围，当地图的缩放级别大于(小于)范围，地图层不可见。 |
样式配置
区域配置，支持自定义上传所对应的区域GeoJSON数据（组件优先使用数据面板中配置的数据，未配置数据面板中的数据时，使用此处数据）。可编辑对边框、面、名称样式（若数据中无名称字段，则无需配置）。
数据
数据有样式处自定义上传区域GeoJSON，数据源处一般场景下无需进行编辑操作。
字段 | 说明 |
source | 可以是url也可以是geojson |
数据样例
[
{
"source": "https://easyv-develop.oss-cn-hangzhou.aliyuncs.com/components/static-image/aMapComponent/polygon_0.json"
},
{
"source": {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"value": 25,
"name": "polygon_3"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
116.39420270919798,
39.91208163596137
],
[
116.3977324962616,
39.910838994683154
],
[
116.39842987060545,
39.9125753944492
],
[
116.39624118804932,
39.91323373356285
],
[
116.39433145523071,
39.9129127940354
],
[
116.39420270919798,
39.91208163596137
]
]
]
}
},
{
"type": "Feature",
"properties": {
"value": 35,
"name": "polygon_4"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
116.39907360076903,
39.91337362980931
],
[
116.39907360076903,
39.91095420740544
],
[
116.40237808227538,
39.91088837158785
],
[
116.4014446735382,
39.91211455330463
],
[
116.39999628067015,
39.91148912107766
],
[
116.39907360076903,
39.91337362980931
]
]
]
}
}
]
}
}
]8、标牌
主要用于提示各区域标牌/数据信息。
基础配置
配置项 | 说明 |
层级 | 当地图中有很多子组件产生叠加时，层级越高则在上层显示，该数字没有明确数字，与其他子组件有对比即可。 |
可见级别 | 图层的可见级别范围，当地图的缩放级别大于(小于)范围，地图层不可见。 |
样式配置
配置项 | 说明 |
定位点 | 可自定义上传顶点图片，支持尺寸、偏移调节。 |
类别 | 标牌支持选择固定尺寸或自适应尺寸。 |
背景样式 | 根据不同标牌类别，可调整相应背景样式。其中，固定尺寸可支持上传自定义图片，可通过基准点调节标牌背景与定位点的位置关系。 |
内容样式 | 可配置标牌内容样式，包含前缀、主内容、后缀内容配置。 |
交互动画
触发方式可选择悬停和点击。当鼠标选择点击/悬浮时，鼠标点击/悬浮时，显示当前点的效果。
当前样式支持自定义上传。
可选择是否轮播，并设置轮播时长。
可选择是否点击聚焦，并设置聚焦动画时长。
数据
字段 | 说明 |
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": "文字"
},
{
"lng": 87.643739,
"lat": 43.801359,
"value": 32
}
]交互
回调：匹配动作支持状态改变、点击、悬浮。（用法同平台常规回调一致，详细可参见交互数据联动）。
自定义事件：支持 1.当请求完成或数据变化时 2.支持鼠标点击 3.支持鼠标悬浮 4.支持状态改变（交互事件及自定义事件用法与其他常规组件一致。）
adcode参考
提示：此处提供全国各城市、区域adcode编码，可下载获取。