3D地球(超图)v1.0.3
文档基于3D地球(超图) v1.0.3版本
组件说明
3D地球(超图)组件对接超图相关服务支持对接超图矢量瓦片地图、超图栅格地图服务、S3M倾斜摄影、白模服务。能够以三维地球形式动态展示相对宏观的地理位置数据，也能够结合矢量地图数据、模型展示相对微观的城市场景，支持定义地球内点位、标记、飞线、中心场景切换等。
效果案例
组件结构
3D地球(超图)组件主要由「父组件」及「子组件」两部分组成，可根据实际场景分别定义对应配置项。
*组件结构说明
模块 | 说明 |
父组件 | 外围的「地球容器」部分，支持对相机设定、旋转进行配置 |
子组件 | 地球内数据叠加、装饰形态，可单独定义样式风格及相关数据 |
一、父组件配置
子组件管理
组件创建之初，系统会默认携带常用子组件，使用者可根据实际场景对子组件进行新增或编辑。
支持对已添加子组件进行隐藏、重命名、复制、删除操作。
*子组件管理
样式
1、基本属性
位置尺寸：
位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。
尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。
*组件位置尺寸说明
默认隐藏：
控制组件在页面中隐藏，在预览和发布页面中不显示该组件，通常配合交互事件使用该配置项。
2、基础配置
默认相机位置：
相机位置：
配置相机视点的经纬度以及距离视点的位置高度。
*偏航角、俯仰角、翻滚角说明
偏航角：实际航向与计划航向之间的夹角。
俯仰角：机体轴（沿机头方向）与地平面（水平面 ）之间的夹角。
翻滚角：物体绕前后轴线转动的角度为横滚角。
旋转配置：
速度：数值大小控制转速，正负控制地球旋转方向。
距离：距离视点的位置高度。
3、效果配置
*效果配置对应配置项
泛光设置：
亮度阈值：调节实现控制场景亮度
泛光强度：调整场景泛光的强度
HDR：
勾选后启用高动态光照渲染
数据
3D地球(超图)主组件数据相对固定，系统默认对全球范围数据进行预置，故此处一般场景下无需进行编辑操作。
交互
载入动画
所有组件均提供移入、移入(小)、划变三种组件载入动画。
载入动画选择无时，则组件没有载入动画。
载入动画仅在可视化应用预览、发布组件加载时显示。
载入动画配置项：
配置项 | 说明 |
渐隐渐显 | 启用后载入动画增加渐隐渐显过渡 |
速率 | 匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1)) |
方向 | 动画方向 |
持续时间 | 载入动画持续时间，单位为ms |
延时 | 载入动画延时长，单位为ms |
自定义事件
自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑；
详细的自定义事件教学👉自定义事件教学
二、子组件配置
1、XYZ图层
样式
服务地址：
支持对接XYZ格式的瓦片地图服务，填入对应XYZ格式的地图服务地址即可
参照地图服务地址：
河流水系：http://thematic.geoq.cn/arcgis/rest/services/ThematicMaps/WorldHydroMap/MapServer/tile/{z}/{y}/{x}
山地阴影http://thematic.geoq.cn/arcgis/rest/services/ThematicMaps/hillshade/MapServer/tile/{z}/{y}/{x}
植被：http://thematic.geoq.cn/arcgis/rest/services/ThematicMaps/vegetation/MapServer/tile/{z}/{y}/{x}
深蓝色主题：http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}
暖色系主题：http://thematic.geoq.cn/arcgis/rest/services/StreetThematicMaps/Warm_OnlySymbol/MapServer/tile/{z}/{y}/{x}
灰色版：http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}
卫星地图：https://webst03.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}
范围：
地图服务的经纬度范围
2、单图片瓦片
样式
组件默认添加该子组件，将子组件删除（子组件列表无该子组件）/隐藏时，组件也渲染单图片瓦片的默认样式
图片：
上传单图片瓦片的图片资源，同时也可在数据中填写对应图片资源地址进行上传
范围：
单图片瓦片的经纬度范围，图片左上角对应最大经纬度，图片右下角对应最小经纬度
3、S3M倾斜摄影
样式
基础配置
服务地址：
支持对接超图S3M倾斜摄影服务，填入对应服务地址即可，配置项默认填入的地址为超图的参照数据（哈尔滨-圣索菲亚大教堂）地址，如需获取其他S3M倾斜摄影数据，需采购超图对应服务
自动居中：
勾选后组件镜头默认跳转至S3M倾斜摄影区域
样式配置
调整倾斜摄影模型样式
*样式配置对应配置项
4、光源
样式
光源类型：
配置场景光源类型：方向光、点光源、聚光
方向光配置：
*方向光配置对应配置项
点光源配置：
*点光源配置对应配置项
聚光配置：
*点光源配置对应配置项
5、Geojson面
样式
基础配置：
上传GeoJSON数据，以绘制边界轮廓
样式配置：
配置项 | 说明 |
填充颜色 | 配置边界填充样式 |
边线 | 启用后绘制边线 |
边线颜色 | 配置调整边界轮廓的颜色与粗细 |
基础高度 | 配置该GeoJSON面距离地面的高度 |
拉伸高度 | 配置该GeoJSON拉伸后距离地面的高度 |
上封闭 | 勾选后，拉伸后将上底面封闭 |
下封闭 | 勾选后，拉伸后将下底面封闭 |
数据
组件数据格式
字段 | 说明 |
name | 区域名称 |
color | 配置指定区域的颜色填充 |
extrudedHeight | 配置制定区域的颜色填充 |
*组件数据格式说明
JSON数据案例
[
{
"name": "浙江省",
"color": "rgba(255, 70, 70, 1)",
"extrudedHeight": 20000
}
]6、点标记
主要用于做点位分布密度的标识。
样式
样式配置
配置项 | 说明 |
图片 | 配置点标记图片素材 |
叠加颜色 | 如图片上传灰度图片，可配置叠加颜色 |
尺寸 | 飞线以及飞线流向光效的粗细 |
可见范围 | 配置最小可见高度以及最大可见高度，范围为0-99999999为缩放何种情况均可见 |
数据
根据真实地理经纬度数据驱动。
字段 | 说明 |
lng | 经度 |
lat | 纬度 |
height | 抬升高度 |
*组件数据格式说明
数据样例
[
{
"lng": 105.177919,
"lat": 34.73995,
"height": 500000,
"id": "1"
},
{
"lng": 84.172059,
"lat": 38.752506,
"height": 500000,
"id": "1"
},
{
"lng": 77.404481,
"lat": 20.877453,
"height": 500000,
"id": "1"
},
{
"lng": 105.617372,
"lat": 14.262423,
"height": 500000,
"id": "1"
},
{
"lng": 134.88495,
"lat": 52.213099,
"height": 500000,
"id": "1"
},
{
"lng": 112.912294,
"lat": 23.642671,
"height": 500000,
"id": "1"
},
{
"lng": 53.498231,
"lat": 19.971448,
"height": 500000,
"id": "1"
},
{
"lng": 81.886903,
"lat": -6.055173,
"height": 500000,
"id": "1"
},
{
"lng": 160.19745,
"lat": 10.139941,
"height": 500000,
"id": "1"
},
{
"lng": 94.367372,
"lat": -18.897806,
"height": 500000,
"id": "1"
}
]7、标牌
样式
配置项 | 说明 |
图片 | 标牌图片背景，支持尺寸、偏移调节。 |
基准点 | 调节标牌背景与定位点的位置关系。 |
文字样式 | 配置文本样式 |
Y偏移 | 调整文字纵向偏移 |
图片缩放 | 背景图片缩放倍数 |
数据
根据真实地理经纬度数据驱动。
字段 | 说明 |
name | 标牌名称 |
lng | 经度 |
lat | 纬度 |
height | 抬升高度 |
*组件数据格式说明
数据样例
[
{
"name": "地点#1",
"lng": 90.398801,
"lat": 39.919237,
"height": 700000
},
{
"name": "地点#2",
"lng": 117.123899,
"lat": 36.643101,
"height": 700000
},
{
"name": "地点#3",
"lng": 120.222043,
"lat": 30.222312,
"height": 700000
},
{
"name": "地点#4",
"lng": 100.533079,
"lat": 23.526889,
"height": 700000
}
]交互
回调参数
回调参数可以理解为参数变量，用于控制组件之间参数的传递，从而达到交互的目的。
字段值即参数变量，变量名是对字段值的重命名
自定义事件
添加自定义事件控制交互效果
8、超图栅格地图服务
样式
基础配置
服务地址：
支持对接超图栅格地图服务，填入对应服务地址即可，配置项默认填入的地址为超图的参照数据（成都-甘孜藏族自治州地区）地址，如需获取其他栅格地图数据，需采购超图对应服务
*超图栅格地图服务默认数据
9、超图矢量瓦片服务
样式
基础配置
服务地址：
支持对接超图矢量瓦片地图服务，填入对应服务地址即可，配置项默认填入的地址为超图的参照数据（京津地区）地址，如需获取其他栅格地图数据，需采购超图对应服务
*超图矢量瓦片服务默认数据
数据
默认数据中的JSON数据为Mapbox地图样式规范（https://jingsam.github.io/mapbox-gl-style-spec/）通过此进行矢量瓦片地图样式的调整
10、地理围栏
即地理围栏，主要划定所需的地理边界范围。
样式
支持自定义上传地理围栏边界数据（同时支持数据中上传围栏边界数据），即geojson数据。
支持设定对应高度及围栏的颜色。
数据
根据真实地理经纬度数据驱动。
数据样例
[ [ [ 105.55145390331745, 23.25967597682725 ], [ 105.59539921581745, 23.01721463303358 ], [ 106.65008671581745, 22.936296969979455 ], [ 108.84735234081745, 21.67596873712301 ], [ 109.41864140331745, 21.348897360393153 ], [ 109.90203984081745, 21.4716353247642 ], [ 109.68231327831745, 20.897981820196954 ], [ 109.81414921581745, 20.44570723438932 ], [ 107.52899296581745, 25.22299044137084 ], [ 107.30926640331745, 25.580260953474184 ], [ 106.91375859081745, 25.540616541058082 ], [ 106.82586796581745, 25.143453680535682 ], [ 106.34246952831745, 25.024051346127436 ] ] ]
11、飞线
主要用于标识展示两地间数据往来、交互。
样式
样式配置
支持定义飞线飞行效果。
配置项 | 说明 |
飞线颜色 | 配置飞线颜色 |
飞线长度 | 飞线流向光效的长度 |
粗细 | 飞线以及飞线流向光效的粗细 |
高度 | 配置飞线最高点距离地面高度 |
底线线颜色 | 底线颜色 |
动画配置
飞行时间：
飞线流向光效的动画时长
数据
根据真实地理经纬度数据驱动。
字段 | 说明 |
startLng | 起点经度 |
startLat | 起点纬度 |
endLng | 终点经度 |
endLat | 终点纬度 |
*组件数据格式说明
数据样例
[
{
"startLng": 116.55975468859071,
"startLat": 40.244447684113766,
"endLng": 102.40936406359071,
"endLat": 30.52267096404252
},
{
"startLng": 116.55975468859071,
"startLat": 40.244447684113766,
"endLng": 95.64178593859071,
"endLat": 35.67350439035918
},
{
"startLng": 116.55975468859071,
"startLat": 40.244447684113766,
"endLng": 112.07733281359071,
"endLat": 30.975874967347746
},
{
"startLng": 116.55975468859071,
"startLat": 40.244447684113766,
"endLng": 119.98748906359071,
"endLat": 32.98853906377537
},
{
"startLng": 116.55975468859071,
"startLat": 40.244447684113766,
"endLng": 118.05389531359071,
"endLat": 25.798070185146475
},
{
"startLng": 116.55975468859071,
"startLat": 40.244447684113766,
"endLng": 121.13006718859071,
"endLat": 23.40090868418718
},
{
"startLng": 116.55975468859071,
"startLat": 40.244447684113766,
"endLng": 109.70428593859071,
"endLat": 19.143257457449188
},
{
"startLng": 116.55975468859071,
"startLat": 40.244447684113766,
"endLng": 85.27069218859071,
"endLat": 41.309304611481
},
{
"startLng": 116.55975468859071,
"startLat": 40.244447684113766,
"endLng": 87.46795781359077,
"endLat": 30.825044044360123
},
{
"startLng": 116.55975468859071,
"startLat": 40.244447684113766,
"endLng": 128.51287968859071,
"endLat": 46.97887242040106
}
]12、冲击环
主要用于标记点位
样式
基础配置
配置项 | 说明 |
颜色 | 配置冲击环的颜色 |
半径 | 冲击环晕开的最大半径 |
时间 | 冲击环晕开的时间 |
数据
根据真实地理经纬度数据驱动。
字段 | 说明 |
lng | 经度 |
lat | 纬度 |
height | 抬升高度 |
*组件数据格式说明
数据样例
[
{
"lng": 116.398801,
"lat": 39.919237,
"height": 10
},
{
"lng": 117.123899,
"lat": 36.643101,
"height": 10
},
{
"lng": 120.222043,
"lat": 30.222312,
"height": 10
},
{
"lng": 106.533079,
"lat": 29.526889,
"height": 10
}
]13、glft模型
主要展示业务场景所需的模型
样式
基础配置
提示：如上传模型后模型不可见，可结合缩放进行调试
配置项 | 说明 |
数据 | 上传模型，将模型数据压缩上传为zip，选择gltf后缀文件 |
位置 | 配置模所在经度、纬度、以及抬升高度 |
缩放 | 模型缩放比例 |
偏航角 | 实际航向与计划航向之间的夹角。 |
俯仰角 | 机体轴（沿机头方向）与地平面（水平面 ）之间的夹角。 |
翻滚角 | 物体绕前后轴线转动的角度为横滚角。 |
*偏航角、俯仰角、翻滚角说明
14、白模型服务
样式
基础配置
服务地址：
支持对接超图白模型服务，填入对应服务地址即可，配置项默认填入的地址为超图的参照数据（重庆）地址，如需获取其他白模型数据，需采购超图对应服务
自动居中：
勾选后组件镜头默认跳转至白模型数据区域
样式配置
基础效果：
配置模型颜色、以及贴图（纹理随机贴图）
*基础效果对应配置项
后期效果：
*后期效果对应配置项
15、相机控制
*配置案例
样式
初始化开启：初始化时是否执行相机控制动画
数据
根据真实地理经纬度数据驱动。
字段 | 说明 |
lng | 相机所在经度 |
lat | 相机所在纬度 |
heigh | 相机距离地面高度 |
heading | 偏航角 |
pitch | 俯仰角 |
roll | 翻滚角 |
duration | 从上一镜头视角到下一镜头视角的动画时长 |
*组件数据格式说明
数据样例
[
{
"lng": 120,
"lat": 40,
"height": 10000000,
"heading": 90,
"pitch": -90,
"roll": -90,
"duration": 1
}
]16、流光
样式
支持自定义上传地理围栏边界数据（同时支持数据中上传围栏边界数据），即geojson数据。
支持设定对应高度及围栏的颜色。
配置项 | 说明 |
飞线颜色 | 配置飞线颜色 |
飞线长度 | 飞线流向光效的长度 |
粗细 | 飞线以及飞线流向光效的粗细 |
高度 | 配置飞线最高点距离地面高度 |
底线线颜色 | 底线颜色 |
支持设定飞行的时间来控制流光速度。
欢迎您在评论区留下您对该组件的意见，管理员会及时回复您，如长时间未回复欢迎您搜索钉钉群：33782396或者扫描以下二维码添加微信群 @谨禧 说出您的想法，采纳后将送出定制礼品。
也可以通过问卷来向我们反馈需求：https://jinshuju.net/f/XyCXU0