How to draw an Ellipse using Openlayers3

Question

I'm working on a project where we're using OpenLayers3.

We need to give users the ability to draw various features on map. Here is an official example to draw features on map.

We need to draw an ellipse on map but there is not such a functionality given officially. I'm wondering if its possible to customize the circle geometry in such a way that we can draw an ellipse on map.

Ezri Y · Answer 1 · 2019-03-18T08:22:07.107

For people that will search this in the future, I hope that It will help. Working code for creating an ellipse in open layer V5.3:

// this works for a static image (pixels) but the idea can be on any coordinate system 
addEllipseFeature(center, semiMajor, semiMinor) {
    let coordinates = [] ;
    const radinas = Math.PI / 180 ;
    for (let angle = 1; angle <= 360; angle ++) {
      const px = center[0] + semiMajor * Math.cos(radinas * angle);
      const py = center[0] + semiMinor * Math.sin(radinas * angle);
      coordinates.push([px, py]);
    }
    const geoJson = {
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        'coordinates': []
      }
    };
    const featureId = source.getFeatures().length;
    coordinates = this.convertCoordinates('Polygon', [coordinates]);
    geoJson.geometry.coordinates = coordinates ;
    const polygonFeature = (new GeoJSON()).readFeature(geoJson);
    polygonFeature.setId(featureId );
    const layerStyle = [  new Style({
      stroke: new Stroke({
        color: 'blue',
        width: 3
      }),
      fill: new Fill({
        color: 'rgba(0, 0, 255, 0.1)'
      })
    })];
    polygonFeature.setStyle(layerStyle);
    source.addFeature(polygonFeature);
    return featureId;
}

Mike · Answer 2 · 2019-04-01T09:38:59.303

Draw a circle, convert it to a circular polygon and then scale the x and y directions. Two clicks are sufficient to define the center and radii of an ellipse along the axes. For an oblique ellipse three clicks would be needed, one for the center, and one click for each radius with the third click also setting the rotation.

  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var source = new ol.source.Vector({wrapX: false});

  var vector = new ol.layer.Vector({
    source: source,
  });

  var map = new ol.Map({
    layers: [raster, vector],
    target: 'map',
    view: new ol.View({
      center: [-11000000, 4600000],
      zoom: 4
    })
  });

  var typeSelect = document.getElementById('type');

  var draw; // global so we can remove it later
  function addInteraction() {
    var value = typeSelect.value;
    var maxPoints;
    if (value !== 'None') {
      var geometryFunction;
      if (value === 'Square') {
        value = 'Circle';
        geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
      } else if (value === 'Box') {
        value = 'Circle';
        geometryFunction = ol.interaction.Draw.createBox();
      } else if (value === 'Star') {
        value = 'Circle';
        geometryFunction = function(coordinates, geometry) {
          var center = coordinates[0];
          var last = coordinates[1];
          var dx = center[0] - last[0];
          var dy = center[1] - last[1];
          var radius = Math.sqrt(dx * dx + dy * dy);
          var rotation = Math.atan2(dy, dx);
          var newCoordinates = [];
          var numPoints = 12;
          for (var i = 0; i < numPoints; ++i) {
            var angle = rotation + i * 2 * Math.PI / numPoints;
            var fraction = i % 2 === 0 ? 1 : 0.5;
            var offsetX = radius * fraction * Math.cos(angle);
            var offsetY = radius * fraction * Math.sin(angle);
            newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
          }
          newCoordinates.push(newCoordinates[0].slice());
          if (!geometry) {
            geometry = new ol.geom.Polygon([newCoordinates]);
          } else {
            geometry.setCoordinates([newCoordinates]);
          }
          return geometry;
        };
      } else if (value === 'Ellipse') {
        value = 'Circle';
        geometryFunction = function(coordinates, geometry) {
          var center = coordinates[0];
          var last = coordinates[1];
          var dx = center[0] - last[0];
          var dy = center[1] - last[1];
          var radius = Math.sqrt(dx * dx + dy * dy);
          var circle = new ol.geom.Circle(center, radius);
          var polygon = ol.geom.Polygon.fromCircle(circle, 64);
          polygon.scale(dx/radius, dy/radius);
          if (!geometry) {
            geometry = polygon;
          } else {
            geometry.setCoordinates(polygon.getCoordinates());
          }
          return geometry;
        };
      } else if (value === 'Oblique Ellipse') {
        value = 'LineString';
        maxPoints = 3;
        geometryFunction = function(coordinates, geometry) {
          var center = coordinates[0];
          var first = coordinates[1];
          var dx = center[0] - first[0];
          var dy = center[1] - first[1];
          var radius1 = Math.sqrt(dx * dx + dy * dy);
          if (coordinates.length > 2) {
            var last = coordinates[2];
            dx = center[0] - last[0];
            dy = center[1] - last[1];
          }
          var radius2 = Math.sqrt(dx * dx + dy * dy);
          var rotation = Math.atan2(dy, dx);
          var circle = new ol.geom.Circle(center, radius1);
          var polygon = ol.geom.Polygon.fromCircle(circle, 64);
          polygon.scale(radius2/radius1, 1);
          polygon.rotate(rotation, center);
          if (!geometry) {
            geometry = polygon;
          } else {
            geometry.setCoordinates(polygon.getCoordinates());
          }
          return geometry;
        };
      }
      draw = new ol.interaction.Draw({
        source: source,
        type: value,
        maxPoints: maxPoints,
        geometryFunction: geometryFunction
      });
      map.addInteraction(draw);
    }
  }


  /**
   * Handle change event.
   */
  typeSelect.onchange = function() {
    map.removeInteraction(draw);
    addInteraction();
  };

  addInteraction();

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.map {
    width: 100%;
    height: 90%;
}

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>
<form class="form-inline">
  <label>Shape type &nbsp;</label>
  <select id="type">
    <option value="Ellipse">Ellipse</option>
    <option value="Oblique Ellipse">Oblique Ellipse</option>
    <option value="Circle">Circle</option>
    <option value="Square">Square</option>
    <option value="Box">Box</option>
    <option value="Star">Star</option>
    <option value="None">None</option>
  </select>
</form>

Commenting to say I used the 'Ellipse' case code and it worked perfectly for my application, thanks! — wiregh0st, Mar 22 '22 at 18:02

score 1 · Answer 3 · answered Jul 27 '15 at 09:06

1

In the draw interaction you can specify a geometryFunction as parameter. This function will draw an additional geometry when you're drawing. That's currently what does the draw interaction in Circle mode, see the code

Have a look to the draw interaction api for more informations.

answered Jul 27 '15 at 09:06

oterral

471
3
9

Thanks for your help, I know these points already but don't know how to modifiy `geometryFunction ` to make feature an ellipse. Would you please help in this regard? – muzaffar Jul 27 '15 at 09:46
@muzaffar did you get to any solution? – Ezri Y Mar 13 '19 at 12:12
@EzriY sorry, I couldn't get any solution :( – muzaffar Mar 13 '19 at 12:28
@muzaffar check this code below if you still need it. – Ezri Y Mar 18 '19 at 08:23

score 1 · Answer 4 · answered May 14 '18 at 23:39

Most of the mapping systems don't provide an ellipse geometry or feature. I had the same requirement while working with google maps in Android, the way I solve it is using a polygon by calculating the vertices through the parametric equation of the ellipse.

x = h + a * cos(t)

y = k + b *sin(t)

Take a look to this post to see an example.

score 0 · Answer 5 · answered Feb 06 '20 at 11:03

From Mike's code, worked on OL 6.1.1:

const circle = new Circle(
    fromLonLat([longitude, latitude]),
    radius
)

// fromCircle is a function inside Polygon class
const ellipse = fromCircle(circle, 100)
ellipse.scale(1, bigRadius / smallRadius) 

// OL is counterclockwise rotation
ellipse.rotate(-(angleDegree * Math.PI) / 180, circle.getCenter())

this.yourLayer.getSource().addFeature(
    new Feature({
      geometry: ellipse
    })
)

Regards

score 0 · Answer 6 · answered Jun 22 '21 at 13:56

0

Thanks to @Ezri Y I made a Working example and added more functionality.

look here

answered Jun 22 '21 at 13:56

SIE-Coder

105
1
7

How to draw an Ellipse using Openlayers3

6 Answers6