如何为多边形顶点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