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

## 一、最小示例

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

## 二、核心参数

| 参数 | 默认 | 说明 |
|---|---|---|
| `data` | — | GeoJSON Polygon / MultiPolygon / FeatureCollection |
| `fillColor` | `#000` | 填充色 |
| `fillOpacity` | 1 | 透明度 |
| `fillOutlineColor` | — | 描边色（不设则无描边） |
| `fillPattern` | — | 平铺图案名 |
| `fillAntialias` | true | 抗锯齿 |
| `fillTranslate` | `[0,0]` | 平移（像素） |
| `fillTranslateAnchor` | `map` | map / viewport |
| `fillSortKey` | — | 同层排序 |
| `minzoom` / `maxzoom` | — | 可见 zoom 区间 |
| `filter` | — | vjmap 样式过滤表达式 |
| `visibility` | `visible` | 可见性 |
| `isHoverPointer` | false | hover 改 cursor |
| `isHoverFeatureState` | false | hover 自动 setFeatureState |

## 三、数据驱动色

```js
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）

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

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

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

## 五、带孔（Hole）多边形

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

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

## 六、MultiPolygon

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

## 七、过滤 filter

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

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

## 八、描边

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

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

```js
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）

```js
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`。

## 十一、修改 / 删除

```js
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。