2

We use Vue.js and OpenLayers 4.6.5. I need to create one new feature of polygon type from existing point features that are actually used as coordinates for that polygon. The issue is these points have to be visible as small circles (points).

The picture looks as following:

enter image description here

The code looks as following:

async activateDrawTurningPoints (turningPoints) {
  const source = this.vectorLayer.getSource()
  const polyCoords = []

  const orderedTurningPoints = _orderBy(turningPoints, 'ordinalNumber', 'asc')

  for (const item of orderedTurningPoints) {
    const point = new WKT().readGeometry(item.geometry, {
      dataProjection: 'EPSG:3857'
    })
    const coord = point.getCoordinates()
    polyCoords.push(coord)
  }

  const polygon = new Polygon()
  polygon.setCoordinates([polyCoords])
  const polygonFeature = new Feature({
    name: 'My Polygon',
    geometry: polygon
  })

  polygonFeature.setStyle(
    new Style({
      stroke: new Stroke({
        color: 'black',
        width: 2
      })
    })
  )

  polyCoords.forEach((x, index) => {
    const point = new Point(x)
    const pointFeature = new Feature({
      name: 'My Point',
      geometry: point
    })
    const style = new Style({
      image: new StyleCircle({
        radius: 4,
        fill: new Fill({
          color: 'black'
        }),
        stroke: new Stroke({
          color: 'black',
          width: 2
        })
      }),
      text: new Text({
        text: index === 0 ? `` : `${index}`,
        font: '12px sans-serif',
        offsetY: -20,
        stroke: new Stroke({
          color: 'black'
        }),
        fill: new Fill({
          color: 'black'
        })
      })
    })

    pointFeature.setStyle(style)

    source.addFeature(pointFeature)
  })

  source.addFeature(polygonFeature)
},

As you can see, the issue is code block that is responsible for styling points. If I comment out this block I get what I want - single polygon, but without visible points. But, as I said, I have to have these points as visible circles and they represent additional features. In that way I have one single polygon, which is fine, but I also have a bunch of point features that I don't need as features.

Is is possible to include the points in new feature that should be polygon that I already have in the end?

The updated code:

async activateDrawTurningPoints (turningPoints) {
  const source = this.vectorLayer.getSource()
  const polyCoords = []

  const orderedTurningPoints = _orderBy(turningPoints, 'ordinalNumber', 'asc')

  for (const item of orderedTurningPoints) {
    const point = new WKT().readGeometry(item.geometry, {
      dataProjection: 'EPSG:3857'
    })
    const coord = point.getCoordinates()
    polyCoords.push(coord)
  }

  const polygon = new Polygon()
  polygon.setCoordinates([polyCoords])
  const polygonFeature = new Feature({
    name: 'My Polygon',
    geometry: polygon
  })

  let styles = []
  styles = [
    new Style({
      stroke: new Stroke({
        color: 'black',
        width: 2
      })
    }),
    new Style({
      image: new StyleCircle({
        radius: 4,
        fill: new Fill({
          color: 'black'
        }),
        stroke: new Stroke({
          color: 'black',
          width: 2
        })
      }),
      text: new Text({
        // text: index === 0 ? `` : `${index}`,
        text: '1',
        font: '12px sans-serif',
        offsetY: -20,
        stroke: new Stroke({
          color: 'black'
        }),
        fill: new Fill({
          color: 'black'
        })
      }),
      geometry: function (feature) {
        // return the coordinates of the first ring of the polygon
        var coordinates = feature.getGeometry().getCoordinates()[0]
        return new MultiPoint(coordinates)
      }
    })
  ]

  polygonFeature.setStyle(styles)
  source.addFeature(polygonFeature)
}
  • 1
    What about this solution: openlayers.org/en/latest/examples/polygon-styles.html? – TomazicM Mar 17 at 8:01
  • Thank you. I've already started looking at that example and drawn single polygon with points successfully. The first issue is how to set the text of points to be as in the screen shot above. – tesicg Mar 17 at 9:53
  • The updated code is up there. – tesicg Mar 17 at 9:59
  • The numbers next to the points should be indexes of points themselves. – tesicg Mar 17 at 11:08
2

I'm not some expert for OpenLayers, so I came up with rather primitive method, but it works. One possible solution is to create separate point style for each point, with it's index as text.

Solution could then look something like this (in old notation, I'm not familiar with ES6):

var polygon = new ol.geom.Polygon();
polygon.setCoordinates([polyCoords]);
var polygonFeature = new ol.Feature({
  name: 'My Polygon',
  geometry: polygon
});

function pointStyle(i, coordinate) {
  return new ol.style.Style({
    image: new ol.style.Circle({
      radius: 8,
      fill: new ol.style.Fill({
        color: 'orange'
      })
    }),
    text: new ol.style.Text({
      text: i.toString()
    }),
    geometry: function(feature) {
      return new ol.geom.Point(coordinate);
    }
  });
}

function featureStyle(feature) {
  var coordinates = feature.getGeometry().getCoordinates()[0];
  var styles = [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'blue',
        width: 3
      }),
      fill: new ol.style.Fill({
        color: 'rgba(0, 0, 255, 0.1)'
      })
    })
  ];

  for (var i = 0; i < (coordinates.length - 1); i++) {
    styles.push(pointStyle(i, coordinates[i]));
  }
  return styles;
};

polygonFeature.setStyle(featureStyle);
source.addFeature(polygonFeature);
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.