layer-styles

本文回答：vjmap 各图层类型（fill / line / circle / symbol / raster / fill-extrusion / heatmap / hillshade / background）常用属性。

一、background

{
  id: "bg", type: "background",
  paint: {
    "background-color": "#fff",
    "background-opacity": 1.0,
    "background-pattern": "sprite-name"    // 可选：平铺（不是拉伸）图片，图宽高须为 2 的幂
  }
}

二、fill

{
  id: "bldg", type: "fill", source: "src", "source-layer": "buildings",
  paint: {
    "fill-color": "#abc",
    "fill-opacity": 0.8,
    "fill-outline-color": "#333",
    "fill-pattern": "sprite-name",
    "fill-translate": [0, 0],
    "fill-antialias": true
  }
}

三、line

{
  id: "roads", type: "line", source: "src", "source-layer": "roads",
  layout: {
    "line-cap": "round",      // butt / round / square
    "line-join": "round",     // miter / bevel / round
    "line-miter-limit": 2
  },
  paint: {
    "line-width": 2,
    "line-color": "#0af",
    "line-opacity": 0.9,
    "line-gap-width": 0,       // 双线中间沟宽
    "line-offset": 0,
    "line-dasharray": [2, 2],
    "line-blur": 0,
    "line-pattern": "sprite-name"
  }
}

四、circle

{
  id: "pts", type: "circle", source: "markers",
  paint: {
    "circle-radius": 6,
    "circle-color": "#f00",
    "circle-opacity": 0.8,
    "circle-stroke-width": 2,
    "circle-stroke-color": "#fff",
    "circle-blur": 0,
    "circle-pitch-alignment": "map"  // "viewport"
  }
}

五、symbol（图标 + 文字）

{
  id: "poi", type: "symbol", source: "markers",
  layout: {
    "icon-image": "marker-15",
    "icon-size": 1,
    "icon-rotate": 0,
    "icon-anchor": "center",
    "icon-allow-overlap": false,
    "text-field": ["get", "name"],
    "text-font": ["Arial Unicode MS Regular"],   // 官方示例用的 fontstack；中文默认由浏览器本地字体绘制，与此无关
    "text-size": 12,
    "text-offset": [0, 1],
    "text-anchor": "top",
    "text-allow-overlap": false,
    "text-max-width": 8
  },
  paint: {
    "icon-opacity": 1,
    "icon-color": "#000",          // 只对 SDF 图标有效
    "icon-halo-color": "#fff",
    "icon-halo-width": 2,
    "text-color": "#000",
    "text-halo-color": "#fff",
    "text-halo-width": 1,
    "text-opacity": 1
  }
}

六、raster

{
  id: "tile", type: "raster", source: "raster-src",
  paint: {
    "raster-opacity": 1,
    "raster-hue-rotate": 0,
    "raster-brightness-min": 0,
    "raster-brightness-max": 1,
    "raster-saturation": 0,
    "raster-contrast": 0,
    "raster-fade-duration": 300
  }
}

七、fill-extrusion（3D 拉伸）

见 extrusion-3d。

{
  id: "bldg-3d", type: "fill-extrusion", source: "buildings",
  paint: {
    "fill-extrusion-color": ["get", "color"],
    "fill-extrusion-height": ["get", "h"],
    "fill-extrusion-base": ["get", "h0"],
    "fill-extrusion-opacity": 0.9,
    "fill-extrusion-translate": [0, 0],
    "fill-extrusion-pattern": "sprite-name"
  }
}

八、heatmap

{
  id: "heat", type: "heatmap", source: "pts",
  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)"
    ],
    "heatmap-opacity": 1
  }
}

九、hillshade（地形阴影）

{
  id: "hs", type: "hillshade", source: "dem",
  paint: {
    "hillshade-exaggeration": 0.5,
    "hillshade-illumination-anchor": "viewport",
    "hillshade-illumination-direction": 335,
    "hillshade-shadow-color": "#000",
    "hillshade-highlight-color": "#fff",
    "hillshade-accent-color": "#000"
  }
}

需要 type: raster-dem 的 source。

十、vjmap 封装类（替代 addLayer）

vjmap 提供了以下高级类，内部都是 addLayer/addSource 的简便包装：

十一、常见坑

1. line-offset 太大导致拐角变形：尽量别用大于线宽的 offset。

2. symbol 文字叠压：默认 text-allow-overlap: false，挤不下会消失；打开 allow-overlap 可硬显示。

3. circle 在高 pitch 下椭圆化：circle-pitch-alignment: "map" 会贴地，"viewport" 始终正圆。

4. icon-color 没效果：必须是 SDF 格式（单色模板图标）。

5. map.toggle(layer) 不是真翻转：MapGlUtils 的 toggle(layer, state) 实现为 state ? "visible" : "none"，不读当前可见性——toggle(layer) 无参恒隐藏。要翻转需自读 getLayoutProperty(layer,"visibility") 再取反。

6. 常用图层/源工具面（MapGlUtils mixin，均挂在 map 上）：hide/show/setVisibility、hideSource/showSource/toggleSource、layersBySource(sourceId)、removeSourceEx(sourceId)（先删依赖层再删源，规避 "source cannot be removed while layer is in use"）、setFilterEx、setLayerSource(layerId, sourceId)（换源且保层序）、setData(sourceId, data?)（无 data 参默认空 FeatureCollection）。

7. Map 级类型化存取器的 getter 返数组包装值：map.setFillColor(id,"#f00")/setLineWidth(id,4)/setCircleRadius(id,9) 等 setter 收裸值，但对应 getFillColor(id)→["#ff0000"]、getLineWidth(id)→[4]、getLineDasharray(id)→[[2,2]]、getFillOpacity(id)→[0.5]——全部 paint getter 返回数组包装形态（与 r33 BackgroundLayer 结论同型，是系统性行为不是个别实现）。比较时先 v?.[0] 或 Number(v) 归一；getFillColor 对不存在图层抛 Cannot read properties of undefined。map.repaint 是 boolean 旗标不是方法（d.ts repaint: boolean），map.repaint() 抛 TypeError——要强制重绘用 map.triggerRepaint()。queryTerrainElevation 无地形源时返 null 不抛。