标记 map-marker

2026年7月20日大约 5 分钟

标记 `map-marker`

DOM 标记（样式灵活，中小数量）。

放在 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`
`marker-kind`	样式	`select`	`pin`	可选：`default` / `pin` / `dot` / `icon`
`marker-color`	颜色	`color`	`#f5552a`
`marker-color-mode`	颜色·取值	`select(radioGroup)`	`const`	可选：`const` / `field`
`marker-color-field`	颜色·字段	`string`	—
`marker-color-stops`	颜色·映射	`string(textarea,rows=3)`	—
`marker-size`	大小	`number(unit=px,min=0)`	`0`
`marker-icon-url`	图片地址	`string`	—
`marker-icon-width`	图片宽	`number(unit=px,min=0)`	`0`
`marker-icon-height`	图片高	`number(unit=px,min=0)`	`0`
`marker-anchor`	锚点	`select`	`auto`	可选：`auto` / `center` / `top` / `bottom` / `left` / `right`
`marker-offset`	偏移(px)	`vector<水平,垂直>`	`[0,0]`
`marker-label`	显示名称	`boolean`	`false`
`marker-label-color`	名称颜色	`color`	`#ffffff`
`marker-auto-cull`	仅渲染视野内	`boolean`	`true`
`marker-cull-padding`	视野外扩(px)	`number(unit=px,min=0)`	`500`
`marker-scale`	缩放	`number(min=0.1,step=0.1)`	`1`
`marker-rotation`	旋转角度	`number(step=1)`	`0`
`marker-rotation-align`	旋转参照	`select`	`auto`	可选：`auto` / `map` / `viewport`
`marker-pitch-align`	俯仰参照	`select`	`auto`	可选：`auto` / `map` / `viewport`
`marker-animation`	入场动画	`select`	`none`	可选：`none` / `bounce` / `drop`
`marker-draggable`	可拖拽	`boolean`	`false`
`marker-click-tolerance`	点击容差(px)	`number(unit=px,min=0)`	`0`
`marker-custom-html`	自定义HTML	`string(textarea,rows=4)`	—
`marker-popup-source`	信息窗来源	`select`	`html`	可选：`html` / `window` / `none`
`marker-popup-window`	信息窗画面	`window`	`[]`
`marker-popup-html`	信息窗HTML	`string(textarea,rows=3)`	—
`marker-popup-offset`	信息窗偏移(px)	`vector<水平,垂直>`	`[0,0]`
`marker-popup-anchor`	信息窗停靠	`select`	`auto`	可选：`auto` / `top` / `bottom` / `left` / `right`
`marker-popup-closeable`	显示关闭按钮	`boolean`	`false`
`marker-popup-close-on-click`	点击地图关闭	`boolean`	`false`
`marker-popup-close-on-move`	移动地图关闭	`boolean`	`false`
`marker-popup-max-width`	信息窗最大宽	`string`	—
`marker-popup-class`	信息窗类名	`string`	—
`marker-embed-source`	嵌入内容	`select`	`none`	可选：`none` / `window`
`marker-embed-window`	选择画面	`window`	`[]`
`marker-embed-max`	最多嵌入数	`number(min=0)`	`200`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`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`
`marker-draw-line-point`	线/面顶点也放点	`boolean`	`false`

按等级配色（数据驱动颜色）

标记的颜色可以按要素属性逐点取值，不必为了「按等级配色」退回 map-circle：marker-color-mode: 'field' + marker-color-field（字段名）+ marker-color-stops（映射表）。

{
  "marker-kind": "pin",
  "marker-color": "#8FB0D6",
  "marker-color-mode": "field",
  "marker-color-field": "riskCode",
  "marker-color-stops": "1 => #FF4D4F\n2 => #FF922B\n3 => #FFD43B\n4 => #4DA3FF"
}

映射键全为数字时按数值线性插值（命中端点原样取该色，区间外夹取端点色）；含文本时按字符串精确匹配。
未命中 / 字段取不到值 → 回退 marker-color 常量色。
四种样式都生效：default 改的是 vjmap 内置标记那段 SVG 的填充色（vjmap.Marker 的 color 构造项）， pin / dot 改的是自绘图形色；icon（图片）与自定义 HTML 不受影响。
只有「常量 / 按属性」两档：DOM 标记逐要素建元素，随缩放变色需整层重建，要那种效果请用 map-circle 等 GL 图层的 point-color-mode: 'zoom'。

数据绑定（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-marker",
  "uid": "ly_x",
  "enabled": true,
  "options": {
    "data-input": "source",
    "data-source-uid": [{ "refType": "element", "targetPath": ["src_x"] }]
  }
}

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