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 aol.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.