OpenLayers Vue.Js中多邊形每個點的樣式

Question

我嘗試使用 OpenLayers 為我的多邊形添加一些樣式：

https://openlayers.org/en/latest/examples/draw-and-modify-features.html

但我沒有找到任何內容：如何為多邊形的每個點添加一些樣式。

我試圖為每個點畫圈，但我不知道該怎么做。

如果有人可以幫助我:)

謝謝：）

Answer 1

Openlayers 在一個層的數組中接受多個 styles。

在下面的代碼片段中，您可以看到setStyle function 返回一個包含兩個 styles 的數組。 一個代表多邊形，一個代表多邊形的角，帶有回調 function 用於返回自定義幾何的幾何（在本例中為多邊形的角）

layer.setStyle(feature => {
      const styles = [new Style({
        fill: new Fill({
          color: 'rgba(100, 100, 100, 0.5)'
        }),
        stroke: new Stroke({
          color: 'black',
          width: 3
        })
      }),
      // adding style for polygon corners
      new Style({
        image: new Circle({
          radius: 5,
          fill: new Fill({
            color: 'white'
          }),
          stroke: new Stroke({
            color: 'black',
            width: 3
          })
        }),
        // telling openlayers to extract corner geometries for styling purpose 
        geometry: (e) => {
          const coordinates = e.getGeometry().getCoordinates()[0]
          return new MultiPoint(coordinates)
        }
      })]
      return styles
    })