信息窗 map-popup

2026年7月20日大约 3 分钟

数据驱动信息窗。

放在 map-2d 的 pieces 里；enabled 写在节点顶层。数据来源 data-input：bind-fields（绑工程连接）或 source（引用数据源）。

在线演示

预览使用内置公开演示服务 / 互联网底图，联网即可出图；可拖拽缩放。数据来自内联 GeoJSON 演示源。

属性

属性	名称	类型	默认	说明
`enable-zoom`	限制缩放区间	`boolean`	`false`
`min-zoom`	最小级别	`number(min=0,max=24,step=0.1)`	`0`
`max-zoom`	最大级别	`number(min=0,max=24,step=0.1)`	`24`
`popup-title-prop`	标题属性	`string`	`name`
`popup-show-all`	显示全部属性	`boolean`	`false`
`popup-fields`	显示字段	`string`	`value`
`popup-closeable`	可关闭	`boolean`	`false`
`popup-anchor`	锚点方位	`select`	`bottom`	可选：`top` / `bottom` / `left` / `right`
`popup-offset`	偏移	`number(unit=px,min=0)`	`12`
`popup-show-tip`	显示尖角	`boolean`	`true`
`popup-max-width`	最大宽度	`number(unit=px,min=80)`	`240`
`popup-font-size`	字号	`number(unit=px,min=8)`	`12`
`popup-title-color`	标题颜色	`color`	`#ffffff`
`popup-text-color`	文字颜色	`color`	`#d8e2ef`
`popup-bg`	背景	`string`	`rgba(20,30,48,0.92)`
`popup-accent`	强调色	`color`	`#5b9bff`
`popup-radius`	圆角	`number(unit=px,min=0)`	`8`
`popup-close-on-click`	点击地图关闭	`boolean`	`false`
`popup-close-on-move`	移动地图关闭	`boolean`	`false`
`popup-focus-after-open`	打开后聚焦	`boolean`	`false`
`popup-class`	CSS 类名	`string`	—
`popup-embed-source`	嵌入内容	`select`	`none`	可选：`none` / `window`
`popup-embed-window`	选择画面	`window`	`[]`
`popup-embed-max`	最多嵌入数	`number(min=0)`	`200`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`data-input`	来源方式	`select(radioGroup)`	`bind-fields`	可选：`bind-fields` / `source`
`data-source-uid`	选择数据源	`map-source`	`[]`
`src-lng-field`	经度/X 字段	`string`	—
`src-lat-field`	纬度/Y 字段	`string`	—
`src-name-prop`	名称属性	`string`	—
`src-value-prop`	数值属性	`string`	—
`src-key-field`	唯一键字段	`string`	—
`marker-lng`	经度/横坐标	`field(recommend=number,min=1,max=1)`	—
`marker-lat`	纬度/纵坐标	`field(recommend=number,min=1,max=1)`	—
`marker-name`	名称	`field(min=0,max=1)`	—
`marker-value`	数值	`field(recommend=number,min=0,max=1)`	—
`marker-points`	坐标点	`string`	`0,0;10,0;-10,5;20,-10`

数据绑定（bind-fields 档）

字段槽	类型 / 约束	说明
`marker-lng`	`field(recommend=number,min=1,max=1)`	经度/横坐标
`marker-lat`	`field(recommend=number,min=1,max=1)`	纬度/纵坐标
`marker-name`	`field(min=0,max=1)`	名称
`marker-value`	`field(recommend=number,min=0,max=1)`	数值

事件

触发器	名称	配在哪	payload
`marker-click`	点击点要素	`map-2d` 组件的 `options.interactions`（运行态按命中图层分流）	命中要素属性行，公式 `{:name}` / `{:value}` 取值
`region-click`	点击面要素	同上	同上
`map-select` / `map-unselect`	选中 / 取消	同上	选中项数据

事件写在地图组件上而非图层上。图层还支持 feature-panel-uid（点击要素弹锚定窗口）与 tooltip-enable（悬停浮层），见属性表。动作端可用 mapLayerVisible / mapSetLayerStyle / mapRefreshData 等 17 个地图动作，见 2D 地图 · 事件。

示例

{
  "type": "map-popup",
  "uid": "ly_x",
  "enabled": true,
  "options": {
    "data-input": "source",
    "data-source-uid": [{ "refType": "element", "targetPath": ["src_x"] }]
  }
}

延伸阅读：2D 地图子系统 · 地图数据源 · 地图图层总览。