跳至主要內容

地图图层

2026年7月20日大约 10 分钟

地图图层（map-*）

图层是真正在地图上出图的图元，放在 map-2d 的 pieces 里，叠放顺序 = 数组顺序（靠后在上）。每个图层是同一种节点：{ uid, type, enabled, options }。本页逐个列出图层的用途、数据来源、关键参数与最小示例。

在线演示

多图层叠加：一个空白 CAD 网格底座 + 折线（管线）、圆点（站点）、文本（名称）三个图层引用两个 GeoJSON 源出图，叠放顺序 = pieces 数组顺序（文本在最上）。可拖拽缩放。

图层的数据来源（data-input）

几乎所有标绘 / 特效图层共享一套数据绑定，二选一：

  • bind-fields（默认）：直接绑工程连接三元组。点类绑 marker-lng / marker-lat（各 1）+ marker-name / marker-value（0~1）；线类绑 line-lng / line-lat + line-group（分组）/ line-order（组内排序）；飞线绑起讫。
  • source：引用本图下的 map-source-*（data-source-uid），再用 src-* 映射字段（src-lng-field / src-lat-field / src-name-prop / src-value-prop / src-key-field；线的 src-group-field / src-order-field；飞线的 src-from-* / src-to-*）。

所有图层通用项：enable-zoom + min-zoom / max-zoom（缩放区间显隐）、feature-panel-uid + feature-panel-offset（点击要素开锚定窗口）、tooltip-enable + tooltip-fields（悬停浮层）、filter-expr + filter-combine（属性过滤 DSL）、数据驱动样式（任一样式标量可 *-mode = const / field / zoom + *-field / *-stops）。

下面每个图层的示例只写该层特有项；data-input / 通用项按需补。示例均为 map-2d.pieces 内的一个节点。

标绘类

点 / 面类可点选，派发 marker-click / region-click（见事件）。

标记 map-marker

DOM 标记（样式灵活，中小数量）。关键：marker-kind（pin / dot / 自定义 HTML）、marker-color、marker-size、marker-anchor、marker-label。

{ "type": "map-marker", "uid": "ly_mk", "enabled": true, "options": {
  "data-input": "source", "data-source-uid": [{ "refType": "element", "targetPath": ["src_geo"] }],
  "src-lng-field": "lng", "src-lat-field": "lat", "src-name-prop": "name",
  "marker-kind": "pin", "marker-color": "#38BDF8", "marker-size": 32 } }

圆点 map-circle

WebGL 圆点（高性能，可聚合）。关键：point-color、point-radius、point-stroke-color / point-stroke-width、cluster + cluster-radius。

{ "type": "map-circle", "uid": "ly_pt", "enabled": true, "options": {
  "data-input": "bind-fields",
  "marker-lng": [["conn","tbl","经度"]], "marker-lat": [["conn","tbl","纬度"]],
  "point-color": "#38BDF8", "point-radius": 6 } }

图标点 map-symbol

WebGL 图标 + 文字（海量点）。关键：symbol-color、symbol-size（像素，默认 8）、symbol-label + symbol-label-size / symbol-label-color，图标引本体 map-images 的 key。文字取 src-name-prop 映射到的名称。

{ "type": "map-symbol", "uid": "ly_sym", "enabled": true, "options": {
  "data-input": "source", "data-source-uid": [{ "refType": "element", "targetPath": ["src_geo"] }],
  "src-name-prop": "name",
  "symbol-color": "#f7b500", "symbol-size": 16, "symbol-label": true, "symbol-label-size": 13 } }

聚合点 map-cluster / 标记聚合 map-marker-cluster / 符号聚合 map-symbol-cluster

海量点聚合。map-cluster 天然聚合（没有 cluster 开关，那是 map-circle / map-symbol 上的）：关键是 cluster-radius、cluster-max-zoom，以及 cluster-t1 / cluster-t2 两个分档阈值配 cluster-color-1/2/3 + cluster-radius-1/2/3 得到三档气泡；未聚合散点走 point-*。

map-marker-cluster 用的是 cluster-cell（网格边长）+ cluster-color + point-kind / point-color / point-size——不是 marker-*。

{ "type": "map-cluster", "uid": "ly_cl", "enabled": true, "options": {
  "data-input": "source", "data-source-uid": [{ "refType": "element", "targetPath": ["src_geo"] }],
  "cluster-radius": 60, "cluster-t1": 20, "cluster-t2": 80,
  "cluster-color-1": "#2fb6c8", "cluster-color-2": "#ffca68", "cluster-color-3": "#ff5f7d",
  "cluster-radius-1": 18, "cluster-radius-2": 28, "cluster-radius-3": 40,
  "point-color": "#38BDF8" } }

折线 map-polyline / 曲线 map-curve / 箭头线 map-arrowline

线要素。关键：line-color、line-width、line-opacity、line-dasharray；曲线 curve-tension；箭头 arrow-size。线类绑 line-lng / line-lat（+ line-group / line-order）。

{ "type": "map-polyline", "uid": "ly_ln", "enabled": true, "options": {
  "data-input": "bind-fields",
  "line-lng": [["conn","tbl","经度"]], "line-lat": [["conn","tbl","纬度"]],
  "line-group": [["conn","tbl","线路"]], "line-color": "#5cc8ff", "line-width": 3 } }

飞线 map-flyline

起讫 → 弧线。样式走通用的 line-color / line-width / line-opacity（没有 flyline-color 这种名字）；fly-arc 是 boolean，开启才是抛物弧。几何不取自 LineString，而是由四个起讫字段算出来。

{ "type": "map-flyline", "uid": "ly_fly", "enabled": true, "options": {
  "data-input": "source", "data-source-uid": [{ "refType": "element", "targetPath": ["src_od"] }],
  "src-from-lng-field": "fromLng", "src-from-lat-field": "fromLat",
  "src-to-lng-field": "toLng", "src-to-lat-field": "toLat",
  "line-color": "#36e0ff", "line-width": 2.5, "fly-arc": true } }

流动线 map-animate-line / 路径动画 map-path-animate / 符号沿路径 map-symbol-path-animate

沿线的动态效果。三者的选项各成一套，都没有 animate-speed / animate-color：

  • map-animate-line（流光）：flow-color、flow-width、flow-dash、flow-gap、flow-period、flow-reverse + 静态轨道 base-color / base-opacity。
  • map-path-animate（圆点巡游）：dot-color、dot-radius、dot-blur、dot-count、dot-period + 轨道 path-color / path-width / path-opacity。
  • map-symbol-path-animate（符号沿线并自动转向）：arrow-shape、arrow-color、arrow-size、arrow-count、move-period + path-*。

速度统一由 *-period 控制，单位毫秒（跑完一轮的时长），越小越快。

{ "type": "map-animate-line", "uid": "ly_flow", "enabled": true, "options": {
  "data-input": "source", "data-source-uid": [{ "refType": "element", "targetPath": ["src_route"] }],
  "flow-color": "#36e0ff", "flow-width": 7, "flow-dash": 3, "flow-gap": 2,
  "flow-period": 900, "base-color": "#0d3a5c" } }

多边形 map-polygon / 区域 map-region / 综合 map-geojson

面要素。关键：fill-color、fill-opacity、line-color；区域填色 region-color-ramp、region-agg（sum / avg / max / count）、region-name-prop。

{ "type": "map-region", "uid": "ly_rg", "enabled": true, "options": {
  "data-input": "source", "data-source-uid": [{ "refType": "element", "targetPath": ["src_area"] }],
  "region-name-prop": "name", "src-value-prop": "value",
  "region-color-ramp": "blues", "region-agg": "sum" } }

地理圆 / 扇形 map-geocircle

真实地理半径的圆 / 扇形（半径随缩放一起变大，与 map-circle 的屏幕像素半径不同）。关键：geocircle-shape（circle / sector）、geocircle-radius-mode（fixed 按公里 / value 按数值 × geocircle-radius-factor）、geocircle-start / geocircle-end（扇形角度）。样式选项都带 geocircle- 前缀，不是通用的 fill-color。

{ "type": "map-geocircle", "uid": "ly_gc", "enabled": true, "options": {
  "data-input": "bind-fields", "marker-lng": [["conn","tbl","经度"]], "marker-lat": [["conn","tbl","纬度"]],
  "geocircle-radius-mode": "fixed", "geocircle-radius": 0.5,
  "geocircle-fill-color": "#36e0ff", "geocircle-fill-opacity": 26,
  "geocircle-line-color": "#7cffea", "geocircle-line-width": 2 } }

热力 map-heatmap

点密度 + 权重。关键：heat-radius、heat-intensity、heat-opacity、heat-color-preset / heat-color-ramp。

{ "type": "map-heatmap", "uid": "ly_heat", "enabled": true, "options": {
  "data-input": "source", "data-source-uid": [{ "refType": "element", "targetPath": ["src_pts"] }],
  "src-value-prop": "weight", "heat-radius": 24, "heat-intensity": 1 } }

文本 map-text

文本标注。关键：text-content（name 名称字段 / value 数值字段 / fixed 固定文本，配 text-fixed）、text-size、text-color、text-halo-color / text-halo-width / text-halo-blur。没有 text-field。

地理坐标系要出字必须有字体：本体配 glyphs-url，或配 service-url / service-token 由地图服务注入 glyphs，否则文字层一个字都不渲染。深色底图上一定要给 halo，否则字会糊进底图。

{ "type": "map-text", "uid": "ly_txt", "enabled": true, "options": {
  "data-input": "source", "data-source-uid": [{ "refType": "element", "targetPath": ["src_geo"] }],
  "src-name-prop": "name",
  "text-content": "name", "text-size": 14, "text-color": "#eaf2ff",
  "text-halo-color": "#03101f", "text-halo-width": 1.8 } }

立体面 map-fill-extrusion / 三维柱 map-bar3d / 立体线 map-line-extrusion

3D 拉伸（需本体 map-pitch > 0 才看到立体）。

  • 面：extrusion-height-mode（fixed 用 extrusion-height / value 用数值 × extrusion-height-factor）、extrusion-color / extrusion-opacity / extrusion-base、extrusion-vertical-gradient（顶亮底暗，体积感）。
  • 柱：bar-height-mode（同上）+ bar-height-factor + bar-size（柱平面边长，米）。数值来源是 src-value-prop，没有 bar-height-field。
  • 立体线（光墙 / 围栏）：wall-color / wall-opacity / wall-height / wall-base / wall-width，不是 line-* 或 extrusion-*。
{ "type": "map-bar3d", "uid": "ly_bar", "enabled": true, "options": {
  "data-input": "source", "data-source-uid": [{ "refType": "element", "targetPath": ["src_pts"] }],
  "src-value-prop": "value",
  "bar-height-mode": "value", "bar-height-factor": 5, "bar-size": 9,
  "bar-color": "#36e0ff", "bar-opacity": 92 } }

呼吸面 map-animate-fill / 跳动符号 map-animate-symbol / 生长立体面 map-fill-extrusion-animate

面 / 符号 / 立体的动态强调，同样没有 animate-speed：

  • 呼吸面：fill-color + breath-min / breath-max（不透明度上下限）+ breath-period + 常亮勾边 outline-color / outline-width / outline-opacity。它没有 fill-opacity。
  • 跳动符号：symbol-color、symbol-size（像素）、bounce-amplitude（百分比）、bounce-period。
  • 生长立体面：grow-min-height / grow-max-height / grow-period / grow-repeat-type（reverse 往复 / loop 重来），没有 extrusion-height。

信息窗 map-popup / DIV 覆盖物 map-divoverlay

数据驱动的信息窗 / 自定义 DIV。关键：popup-title-prop / popup-show-all；overlay-html（模板 ${字段}）、overlay-anchor。

{ "type": "map-divoverlay", "uid": "ly_ov", "enabled": true, "options": {
  "data-input": "source", "data-source-uid": [{ "refType": "element", "targetPath": ["src_geo"] }],
  "overlay-html": "<div class='tag'>${name}：${value}</div>" } }

服务 / 环境类

多数无业务数据源，直接配 URL / 参数。

底图瓦片 map-tile

XYZ 栅格底图。关键：tile-url（{z}/{x}/{y} 模板）、tile-size（256）、tile-opacity。

{ "type": "map-tile", "uid": "ly_tile", "enabled": true, "options": {
  "tile-url": "https://{a-c}.tile.example.com/{z}/{x}/{y}.png", "tile-opacity": 1 } }

WMS map-wms / WMTS map-wmts

wms-source-kind（或 wmts-source-kind）二选一：ogc（标准 OGC 服务）/ vjmap（把另一张 vjmap 图按坐标系叠加，含 CAD↔互联网互叠）。详见服务图层与叠加。

{ "type": "map-wms", "uid": "ly_wms", "enabled": true, "options": {
  "wms-source-kind": "ogc", "wms-url": "https://geo.example.com/wms",
  "wms-layers": "layer0", "wms-format": "image/png", "wms-transparent": true } }

静态影像 map-image / 视频 map-video

四角坐标贴一张影像 / 一段视频。关键：四角坐标 + *-url。

矢量瓦片 map-mvt

MVT 矢量瓦片。关键：瓦片 URL + 源图层名 + 样式。

背景 map-background / 天空 map-sky / 山体阴影 map-hillshade / 画布 map-canvas / SVG 覆盖物 map-svgoverlay

环境与自定义绘制层。背景纯色 / 天空氛围 / 地形山体阴影 / 自定义 Canvas / 经纬度贴 SVG。

{ "type": "map-background", "uid": "ly_bg", "enabled": true, "options": { "background-color": "#0b1a2b" } }

特效类（vjmapext GPU，万级不掉帧）

数据来源同标绘（点 / 线）。所有特效层共享 fx-color / fx-opacity / fx-size（点）或 fx-line-color / fx-line-width / fx-line-speed（线）。

  • 特效点（11）：map-fx-fire 火焰 / map-fx-pulse-ring 脉冲环 / map-fx-halo 光晕 / map-fx-radar 雷达扫描 / map-fx-smoke 烟雾 / map-fx-lightning 闪电 / map-fx-meteor 流星 / map-fx-vortex 漩涡 / map-fx-shield 能量盾 / map-fx-firework 烟花 / map-fx-crosshair 准星。
  • 特效线（5）：map-fx-flowline 流光 / map-fx-meteor-line 流星线 / map-fx-lightning-line 闪电线 / map-fx-arrow-flow 箭头流 / map-fx-dash-flow 蚂蚁线。
  • 其它：map-effect-marker（DOM 呼吸光圈）、map-fx-symbol（fx 离屏渲成图标）、map-fx-shadertoy-point / map-fx-shadertoy-line / map-fx-shadertoy-fullscreen（自定义 Shadertoy 着色器）。
{ "type": "map-fx-pulse-ring", "uid": "ly_fx", "enabled": true, "options": {
  "data-input": "source", "data-source-uid": [{ "refType": "element", "targetPath": ["src_geo"] }],
  "fx-color": "#36e0ff", "fx-size": 1, "fx-opacity": 0.9 } }

延伸阅读：2D 地图子系统（本体、坐标系、服务叠加、事件动作）· 地图数据源 · 地图控件组件 · 窗口系统（要素点击 → 信息窗）。

上次编辑于: 2026/8/17 22:24:54
贡献者: vjmap,Cursor