i´ve got a drawing interaction to draw points. It is only allowed to draw these points if the boundary of features of an other source are snapped. Now, i the overlay feature has to change his own style, if the other features boundary is snapped.
var snapCondition = function(evt){
var features = [];
mapEntry.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
if(layer != null && layer.get('name') === 'specialLayerName') {
features.push(feature);
}
});
if(features.length === 1 ) {
return checkBoundary(features[0], evt.coordinate);
} else {
return false;
};
};
var checkBoundary = function(feature, coords) {
var geom = feature.getGeometry();
var closestPoint = geom.getClosestPoint(coords);
console.log(closestPoint);
console.log(coords)
if((closestPoint[0] === coords[0]) && (closestPoint[1] === coords[1])) {
return true;
}
return false;
}
var drawBuildingEntry = new ol.interaction.Draw({
source: buildingEntrySource,
type: 'Point',
condition: snapCondition,
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: entryDrawColor,
}),
stroke: new ol.style.Stroke({
color: 'white',
width: 3
})
})
})
});
The code above is working, but i´ve got the problems by changing the style. I tested the following code:
mapEntry.on("pointermove", function (event) {
var features = [];
mapEntry.forEachFeatureAtPixel(event.pixel, function(feature, layer) {
if(layer != null && layer.get('name') === 'specialLayerName') {
features.push(feature);
}
});
if(features.length === 1 ) {
console.log(checkBoundary(features[0], event.coordinate));
if(checkBoundary(features[0], event.coordinate) === true) {
entryDrawColor = '#40FF00'
} else {
entryDrawColor = '#FF0000';
};
} else {
entryDrawColor = '#FF0000';
};});
The console.log of checkBoundary is even false, because the event coordinates, are the coordinates befor the overlay element is snapped. best regards Tim
The snap interaction doesn't change the pointer position, but it changes what is reported to the draw interaction, so you will probably need to test in a style function for the draw
style: function(feature) {
var entryDrawColor = '#FF0000';
var geometry = feature.getGeometry();
if (geometry.getType() = 'Point') {
var coordinates = geometry.getCoordinates();
var pixel = getPixelFromCoordinate(coordinate);
...
}
return new ol.style.Style({
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: entryDrawColor,
}),
stroke: new ol.style.Stroke({
color: 'white',
width: 3
})
})
})
}