视角+全屏 map-control-view
2026年7月20日大约 3 分钟
视角+全屏 map-control-view
视角 / 俯仰 / 旋转 / 复位 / 全屏一体控件。
- 类型串:
map-control-view默认尺寸:[248, 46]分类:地图控件
实时预览
下面渲染的是真实组件(与编辑器 / 运行时同源)。修改右侧「样式参数」,左侧预览实时更新;点击底部「全页面查看」可放大。
示例开满全部功能位:俯仰滑杆(上限放宽到 75°,
view-pitch-max)、旋转微调、正北、复位全图与全屏按钮。右侧地图初始带 30° 旋转 + 50° 俯仰,拖动滑杆或点正北即可看视角联动;全屏按钮让地图容器进出浏览器全屏。
属性
下表为本组件特有的属性;
position/size/opacity/background/border/ 联动选中 / 筛选等通用参数见组件手册总览。
basic
| 属性 | 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|---|
target-map | 关联地图 | element(types=map-2d) | [] | |
view-show-pitch | 俯仰滑杆 | boolean | true | |
view-pitch-max | 最大俯仰角 | number(unit=°,min=10,max=85) | 60 | |
view-show-rotate | 旋转微调 | boolean | true | |
view-show-north | 正北按钮 | boolean | true | |
view-show-reset | 复位全图 | boolean | true | |
view-show-fullscreen | 全屏按钮 | boolean | true | |
view-layout | 排列方向 | select(radioGroup) | horizontal | 可选:horizontal / vertical |
appearance
| 属性 | 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|---|
panel-bg | 面板背景 | color | rgba(9,18,34,0.55) | |
panel-border-color | 边框色 | color | rgba(125,205,255,0.24) | |
panel-radius | 圆角 | number(unit=px,min=0) | 10 | |
btn-size | 按钮尺寸 | number(unit=px,min=16) | 30 | |
btn-bg | 按钮背景 | color | rgba(10,20,38,0.55) | |
btn-color | 图标色 | color | #eaf2ff | |
btn-hover-bg | 悬浮背景 | color | rgba(54,224,255,0.22) | |
accent | 主题色 | color | #36e0ff |
数据绑定
无组件特有数据绑定字段(纯样式 / 布局 / 装饰)。
事件
触发器
触发器在预览 / 播放态生效(编辑态点击 = 选中组件)。写在本组件
options.interactions的groups[].trigger里。
| 触发器 | 名称 | 触发时机 | payload(供动作公式 {:字段} 取值) |
|---|---|---|---|
click | 点击 | 点击本组件时触发 | 无 |
mouseEnter | 鼠标移入 | 指针移入组件时触发 | 无 |
mouseLeave | 鼠标移出 | 指针移出组件时触发 | 无 |
appear | 入场 | 组件出现时触发(配合进场动画) | 无 |
disappear | 离场 | 组件消失时触发(配合退场动画) | 无 |
receiveBehaviorEvent | 接收行为事件 | 收到 sendBehaviorEvent 动作或宿主 ctx.emit 投递的事件时触发(按 eventName 匹配) | 发送方携带的 data |
动作
触发器命中后执行的动作。本组件既可发起动作(配在自己的交互里),也可作为其它组件动作的目标。
| 动作 | 名称 | 说明 |
|---|---|---|
changeOption | 修改设置 | 把本组件(或其它组件)的某个属性改为静态值 / 公式动态值 |
switchState | 切换状态 | 切到多状态里的某个状态(state:"" 回默认态) |
appear / disappear | 进 / 退场动画 | 对目标 opacity 做 0↔100 插值的显隐动画 |
完整动作清单(switchScreen / switchWindow / openUrl / sendBehaviorEvent / transfer / executeScript / requestApi 等)与持久化写法见事件交互。
示例
{
"type": "map-control-view",
"uid": "w_map_control_view",
"options": {
"position": [40, 40],
"size": [248, 46]
}
}