如何为多边形顶点 OpenLayers 应用样式？

Question

我试过这段代码：

this.vector = new VectorLayer({
  source: this.source,
  zIndex: 400,
  style: new Style({
    fill: new Fill({
      color: "rgba(255, 255, 255, 0.6)",
    }),
    stroke: new Stroke({
      color: "#000",
      width: 2,
    }),
    image: new Circle({
      radius: 7,
      fill: new Fill({ color: "black" }),
      stroke: new Stroke({
        color: [255, 0, 0],
        width: 2,
      }),
    }),
  }),
});

但是这部分对我不起作用：

image: new Circle({
          radius: 7,
          fill: new Fill({ color: "black" }),
          stroke: new Stroke({
            color: [255, 0, 0],
            width: 2,
          }),
        });

结果我想在多边形的顶点上设置一个点

Answer 1

Circle 样式需要位于数组中的单独样式对象中，并且具有将顶点作为 MultiPoint 返回的几何函数

style: [
  new Style({
    fill: new Fill({
      color: "rgba(255, 255, 255, 0.6)",
    }),
    stroke: new Stroke({
      color: "#000",
      width: 2,
    }),
  }),
  new Style({
    image: new Circle({
      radius: 7,
      fill: new Fill({ color: "black" }),
      stroke: new Stroke({
        color: [255, 0, 0],
        width: 2,
      }),
    }),
    geometry: function (feature) {
      // return the coordinates of the first ring of the polygon
      const coordinates = feature.getGeometry().getCoordinates()[0];
      return new MultiPoint(coordinates);
    },
  }),
],

另见https://openlayers.org/en/latest/examples/polygon-styles.html