圆点 map-circle

2026年7月20日大约 4 分钟

圆点 `map-circle`

WebGL 圆点（高性能，可聚合）。

放在 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`
`circle-blur`	模糊	`slider(min=0,max=100,step=1,unit=%)`	`0`
`circle-stroke-opacity`	描边不透明度	`slider(min=0,max=100,step=1,unit=%)`	`100`
`circle-translate`	平移(px)	`string`	—
`circle-translate-anchor`	平移参考	`select`	`map`	可选：`map` / `viewport`
`circle-pitch-scale`	倾斜时缩放	`select`	`map`	可选：`map` / `viewport`
`circle-pitch-alignment`	倾斜时对齐	`select`	`viewport`	可选：`map` / `viewport`
`point-color-mode`	颜色·取值	`select(radioGroup)`	`const`	可选：`const` / `field` / `zoom`
`point-color-field`	颜色·字段	`string`	—
`point-color-stops`	颜色·映射	`string(textarea,rows=3)`	—
`point-radius-mode`	半径·取值	`select(radioGroup)`	`const`	可选：`const` / `field` / `zoom`
`point-radius-field`	半径·字段	`string`	—
`point-radius-stops`	半径·映射	`string(textarea,rows=3)`	—
`point-opacity-mode`	不透明度·取值	`select(radioGroup)`	`const`	可选：`const` / `field` / `zoom`
`point-opacity-field`	不透明度·字段	`string`	—
`point-opacity-stops`	不透明度·映射	`string(textarea,rows=3)`	—
`point-stroke-color-mode`	描边颜色·取值	`select(radioGroup)`	`const`	可选：`const` / `field` / `zoom`
`point-stroke-color-field`	描边颜色·字段	`string`	—
`point-stroke-color-stops`	描边颜色·映射	`string(textarea,rows=3)`	—
`point-stroke-width-mode`	描边宽度·取值	`select(radioGroup)`	`const`	可选：`const` / `field` / `zoom`
`point-stroke-width-field`	描边宽度·字段	`string`	—
`point-stroke-width-stops`	描边宽度·映射	`string(textarea,rows=3)`	—
`cluster`	聚合显示	`boolean`	`false`
`cluster-radius`	聚合半径	`number(unit=px,min=10)`	`50`
`point-color`	颜色	`color`	`#3aa1ff`
`point-radius`	半径	`number(unit=px,min=1)`	`6`
`point-opacity`	不透明度	`slider(min=0,max=100,step=1,unit=%)`	`90`
`point-stroke-color`	描边颜色	`color`	`#ffffff`
`point-stroke-width`	描边宽度	`number(unit=px,min=0)`	`1`
`point-hover-color`	悬停颜色	`color`	`#ffd666`
`point-selected-color`	选中颜色	`color`	`#ff7875`
`point-selected-radius`	选中半径	`number(unit=px,min=1)`	`9`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`filter-expr`	过滤条件	`string(textarea,rows=4)`	—
`filter-combine`	组合方式	`select(radioGroup)`	`all`	可选：`all` / `any`
`tooltip-enable`	启用悬停提示	`boolean`	`false`
`tooltip-fields`	显示字段	`string`	—
`tooltip-title-field`	标题字段	`string`	—
`feature-panel-uid`	点击弹出画面	`window`	`[]`
`feature-panel-offset`	弹窗偏移(px)	`vector<水平,垂直>`	`[0,0]`
`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-circle",
  "uid": "ly_x",
  "enabled": true,
  "options": {
    "data-input": "source",
    "data-source-uid": [{ "refType": "element", "targetPath": ["src_x"] }]
  }
}

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