[GIS] Moving geom.Polygon.circular in OpenLayers 3

angularjsopenlayers

I'm using Angular and OpenLayers to build an web-app.

I have a map which is working and I have added a Vector (icon) which is also working. I have made a circle with the same center as the icon which also works.

Now when the user clicks on a button I want that icon and circle to move to a new location which works for the icon but the not circle using:

$scope.iconFeature.getGeometry().setCoordinates(ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857'));
$scope.circleFeature.getGeometry().setCoordinates(ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857'));

The iconFeature is implemented using:

var iconFeatures=[];
$scope.iconGeometry = new ol.geom.Point(ol.proj.transform([long, lat], "EPSG:4326", "EPSG:3857"));
$scope.iconFeature = new ol.Feature({
  geometry: $scope.iconGeometry,
});
iconFeatures.push($scope.iconFeature);
var vectorSource = new ol.source.Vector({
  features: iconFeatures
});
var iconStyle = new ol.style.Style({
  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
    anchor: [16, 32],
    anchorXUnits: 'pixels',
    anchorYUnits: 'pixels',
    opacity: 1,
    src: 'img/positions_marker.png'
  }))
});

The circleFeature is implemented using:

$scope.circleFeature = new ol.Feature(
  new ol.geom.Polygon.circular(
    new ol.Sphere(6378137), 
    [long, lat], 
    600, 
    64
  ).transform('EPSG:4326', 'EPSG:3857')
);

    var circle = new ol.layer.Vector({
        source: new ol.source.Vector({
    features: [ $scope.circleFeature ]
    }),
        style: [ new ol.style.Style({
                fill: new ol.style.Fill({
                color: 'rgba(76, 181, 248, 0.2)'
            })
        }) ]
    });

How come the iconFeature is moving fine but the circleFeature isn't?

UPDATE: Solution

$scope.circleFeature.getGeometry().setCenter(ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857'));

$scope.circleFeature = new ol.Feature({
        geometry: new ol.geom.Circle(
            ol.proj.transform([long, lat], "EPSG:4326", "EPSG:3857"),
            600
        )
    });

Best Answer

ol.geom.Polygon.fromCircle is a static method and returns a ol.geom.Polygon geometry, so according to the setCoordinates function api you can't set simply a coordinate, you need to specify all the coordinates of the polygon.

That means if you want to move your pseudo-circle you need to recreate it calling ol.geom.Polygon.fromCircle each time.

Why don't you use the ol.geom.Circle geometry instead ? with that you could set only the center of your circle.

Related Question