Search code examples
openlayers

what is the difference between Point and Circle in openlayers?

I want to add a circle feature into a map, I use the Circle geometry, but it doesn't work. while I change the Circle to Point, it works.

const feature = new ol.Feature(
  new ol.geom.Circle([0, 0], 100)
)

feature.setStyle(new ol.style.Style({
  image: new ol.style.Circle({
    raidus: 100,
    stroke: new ol.style.Stroke({ color: '#ff0000', width: 2 })
  })
}))

vectorLayer.getSource().addFeature(feature)

So, when Can I use the Circle geometry to create feature?

Solution

  • Circle style radius is in display pixels (not related to view zoom or distance on the planet) and is usually used to style a Point geometry:

    const feature = new ol.Feature(
  new ol.geom.Point([0, 0])
)

feature.setStyle(new ol.style.Style({
  image: new ol.style.Circle({
    raidus: 100,
    stroke: new ol.style.Stroke({ color: '#ff0000', width: 2 })
  })
}))

vectorLayer.getSource().addFeature(feature)

    Circle geometry radius is in view projection units (meters, degrees, etc) and represents a distance on the ground (so the visible size changes with view zoom) and should be styled in the same way as a Polygon geometry:

    const feature = new ol.Feature(
  new ol.geom.Circle([0, 0], 100)
)

feature.setStyle(new ol.style.Style({
  stroke: new ol.style.Stroke({ color: '#ff0000', width: 2 })
}))

vectorLayer.getSource().addFeature(feature)