1

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

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.

  • I could have sworn that I had already tried that and also found out-commented snippets which just needed to be switched in.. Thanks – Carsten Farving Sep 14 '15 at 9:53

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.