唯杰地图 logo唯杰地图
VJMAP
EN

layer-types

vjmap/references/symbol/layer-types.md 3.2 KB122 行
原文

本文回答：circle / symbol / heatmap 图层选型 —— 三种"点图层"对比。

一、对比表

图层 形状 驱动 图标支持 文字支持 碰撞避让 典型场景
circle 圆 WebGL ✗ ✗ ✗（always show） 大数据点云 / 散点图
symbol 图标 + 文字 WebGL ✓（sprite / addImage） ✓ ✓（碰撞自动剔除） POI / 图表标注
heatmap 密度色斑 WebGL ✗ ✗ ✗ 热力

二、Circle 层

map.addLayer({
  id: "pts", type: "circle", source: "src",
  paint: {
    "circle-radius": 5,
    "circle-color": "#f00",
    "circle-stroke-width": 1,
    "circle-stroke-color": "#fff"
  }
});

优点：最轻；几百万点不卡。

三、Symbol 层

map.addLayer({
  id: "poi", type: "symbol", source: "src",
  layout: {
    "icon-image": "pin",
    "icon-size": 0.6,
    "text-field": ["get", "name"],
    "text-size": 12,
    "text-offset": [0, 1],
    "text-anchor": "top"
  },
  paint: {
    "text-color": "#000",
    "text-halo-color": "#fff",
    "text-halo-width": 1
  }
});

优点：支持碰撞避让、多字体、图标变色（SDF）、旋转、随 zoom 插值。

四、Heatmap 层

map.addLayer({
  id: "heat", type: "heatmap", source: "src",
  paint: {
    "heatmap-weight": ["get", "weight"],
    "heatmap-intensity": 1,
    "heatmap-radius": 30,
    "heatmap-color": [
      "interpolate", ["linear"], ["heatmap-density"],
      0, "rgba(0,0,255,0)",
      0.5, "rgba(0,255,0,0.5)",
      1, "rgba(255,0,0,1)"
    ]
  }
});

五、vjmap 的封装类

原生 layer type vjmap 类
circle vjmap.Circle
symbol vjmap.Symbol
heatmap vjmap.Heatmap
line vjmap.Polyline
fill vjmap.Polygon
fill-extrusion vjmap.FillExtrusion

好处：

  • 不区分 paint/layout，一个配置写完
  • 内建 clickLayer / hoverLayer / hoverPopup / hoverFeatureState
  • 接受 CAD 坐标（需 map.toLngLat）

六、同一份 GeoJSON 三种渲染

map.addSource("src", { type: "geojson", data: features, generateId: true });

// 小 zoom：heatmap
map.addLayer({
  id: "heat", type: "heatmap", source: "src",
  maxzoom: 12,
  paint: { "heatmap-radius": 30 }
});

// 中 zoom：cluster circle
map.addSource("src-cluster", {
  type: "geojson", data: features, cluster: true, clusterRadius: 50
});
map.addLayer({
  id: "clusters", type: "circle", source: "src-cluster",
  filter: ["has", "point_count"],
  paint: { "circle-color": "#0af", "circle-radius": 20 }
});

// 大 zoom：symbol
map.addLayer({
  id: "poi", type: "symbol", source: "src",
  minzoom: 14,
  layout: { "icon-image": "pin", "text-field": ["get", "name"], "text-size": 10 }
});

七、常见坑

  1. circle-radius 单位是像素：与 zoom 无关；要随 zoom 变大用 interpolate。
  2. symbol 碰撞导致文字消失：设 text-allow-overlap: true 硬显示。
  3. heatmap 看起来平：heatmap-weight 太低；提权 "heatmap-weight": ["*", ["get", "weight"], 2]。
  4. 同层大量 feature 导致卡顿：开 cluster，或按 zoom 分层。