OpenLayers 中多边形每个点的样式 Vue.Js

Question

我尝试使用 OpenLayers 为我的多边形添加一些样式：

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

但我在 : 如何为多边形的每个点添加一些样式。

我试图为每个点画圆圈，但我不知道该怎么做。

如果有人可以帮助我:)

谢谢:)

Answer 1

Openlayers 接受图层数组中的多种样式。

在下面的代码片段中，您会看到 setStyle 函数 returns 一个包含两种样式的数组。一个代表多边形，一个代表多边形的角，带有几何的回调函数，returns 自定义几何（在本例中为多边形的角）

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
    })

OpenLayers 中多边形每个点的样式 Vue.Js

Style for each point of a polygon in OpenLayers Vue.Js

openlayers

vue.js