polygon-fill

本文回答：vjmap.Polygon 面填充 —— 颜色 / 描边 / 图案 / 缕空 / 过滤 / 高亮。

一、最小示例

const polygon = new vjmap.Polygon({
  data: map.toLngLat(featureCollection),
  fillColor: "#00ffff",
  fillOpacity: 0.8,
  fillOutlineColor: "#f00",
  isHoverPointer: true,
  isHoverFeatureState: true
});
polygon.addTo(map);

二、核心参数

三、数据驱动色

new vjmap.Polygon({
  data,
  fillColor: [
    "case",
    ["boolean", ["feature-state", "hover"], false], "#ff0",
    ["get", "color"]
  ],
  fillOpacity: ["interpolate", ["linear"], ["get", "area"], 0, 0.3, 1000, 0.9]
});

四、平铺图案（Pattern）

await map.loadImageEx("hatch", "/images/hatch.png");

new vjmap.Polygon({
  data,
  fillPattern: "hatch",
  fillOpacity: 0.6
});

• 图案图自带 alpha 可做镂空纹理
• 密度不变（像素级），和 zoom 无关

五、带孔（Hole）多边形

GeoJSON Polygon 的 coordinates 第 0 个环是外边界，后续是孔：

{
  type: "Feature",
  geometry: {
    type: "Polygon",
    coordinates: [
      [[x0,y0], [x1,y1], ..., [x0,y0]],   // 外环（逆时针，RFC7946）
      [[hx0,hy0], ..., [hx0,hy0]]         // 孔（顺时针）
    ]
  }
}

六、MultiPolygon

{
  type: "Feature",
  geometry: {
    type: "MultiPolygon",
    coordinates: [
      [ [外环坐标串], [孔1], [孔2] ],    // 子多边形 1
      [ [外环坐标串] ]                   // 子多边形 2
    ]
  }
}

七、过滤 filter

new vjmap.Polygon({
  data,
  fillColor: "#0af",
  filter: [">=", ["to-number", ["get", "level"]], 3]
});

polygon.setFilter(["==", ["get", "status"], "ok"]);

八、描边

fillOutlineColor 是 WebGL 实现，描边宽度固定 ≈ 1 像素，不可调。

需要粗描边：用独立 line 图层（同一份 source）：

map.addSource("fills", { type: "geojson", data, generateId: true });
map.addFillLayer("fill-body", "fills", { fillColor: "#0af", fillOpacity: 0.6 });
map.addLineLayer("fill-line", "fills", { lineColor: "#003", lineWidth: 2 });

九、hover 高亮（FeatureState）

const polygon = new vjmap.Polygon({
  data,
  fillColor: [
    "case",
    ["boolean", ["feature-state", "hover"], false], "#f00",
    "#0af"
  ],
  fillOpacity: 0.7,
  isHoverFeatureState: true       // vjmap 自动维护 hover feature-state
});
polygon.addTo(map);

十、大数据量性能

• 几万 polygon：用 vjmap 的 fill 图层已经 GPU 加速，流畅。
• 超 10 万：考虑切瓦片（MVT）改 type: vector。

十一、修改 / 删除

polygon.setData(newFc);
polygon.setFillColor("#0f0");
polygon.setFillOpacity(0.3);
polygon.setFillPattern("newPattern");
polygon.setProperty("fillOutlineColor", "#000");
polygon.hide();
polygon.remove();

十二、常见坑

1. 外环方向 → GeoJSON 规范要求外环逆时针、孔顺时针；vjmap 不强依赖，但建议遵守以便和其他 GIS 工具互通。
2. fillColor rgba 透明度被 fillOpacity 又叠一次 → 选一个。
3. fillOutlineColor 只能 1px → 要粗边用额外 line 图层。
4. hover 不生效 → 要素没有非 0 的 id；或数据 id 冲突。封装类不透传 generateId（且 generateId 从 0 编号，而 hoverFeatureState 忽略 id 0）：FeatureCollection 须自带非 0 id；或传 [{points, properties}] 形式（自动 id = 序号 + 1）；或先自建源（promoteId）再传 sourceId。
5. 面叠加看不清 → fillAntialias: false 可关闭反锯齿提升细碎边界；大部分场景保持 true。