openlayers 实现几何体镂空

在 OpenLayers 中实现几何体镂空，可以使用 `ol.geom.Polygon` 类和 `ol.geom.GeometryCollection` 类来实现。具体步骤如下：

1. 创建一个要镂空的多边形 `polygon` 和一个用于镂空的圆形 `circle`，并将它们合并到一个几何集合 `geometryCollection` 中。

const polygon = new ol.geom.Polygon([[
  [0, 0], [100, 0], [100, 100], [0, 100], [0, 0]
]]);
const circle = new ol.geom.Circle([50, 50], 20);
const geometryCollection = new ol.geom.GeometryCollection([polygon, circle]);

2. 将几何集合 `geometryCollection` 转换为 OpenLayers 能够识别的格式，即 `ol.format.GeoJSON` 格式。

const geojsonFormat = new ol.format.GeoJSON();
const feature = new ol.Feature({
  geometry: geojsonFormat.writeGeometryObject(geometryCollection),
});

3. 创建一个具有填充和边框的样式，以及一个空心样式。

const fillStyle = new ol.style.Fill({
  color: 'rgba(255, 255, 255, 0.5)'
});
const strokeStyle = new ol.style.Stroke({
  color: 'blue',
  width: 1
});

const hollowStyle = [
  new ol.style.Style({
    fill: fillStyle,
    stroke: strokeStyle,
    geometry: polygon
  }),
  new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 255, 1)'
    }),
    stroke: new ol.style.Stroke({
      color: 'red',
      width: 1
    }),
    geometry: circle
  })
];

4. 创建一个矢量图层，并将镂空样式应用于该图层。

const vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [feature]
  }),
  style: hollowStyle
});

5. 将矢量图层添加到地图中。

const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    vectorLayer
  ],
  view: new ol.View({
    center: [50, 50],
    zoom: 2
  })
});

这样就可以在 OpenLayers 地图上实现几何体镂空。