我有一个绘画互动来画点。仅当捕捉其他源要素的边界时,才可以绘制这些点。现在,如果其他要素的边界被捕捉,则叠加要素必须更改自己的样式。
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
})
})
})
});
上面的代码正在工作,但是我通过更改样式来解决问题。我测试了以下代码:
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';
};});
checkBoundary的console.log甚至为false,因为事件坐标是叠加元素被捕捉之前的坐标。最好的祝福蒂姆
对齐交互不会更改指针位置,但是会更改报告给绘制交互的内容,因此您可能需要在绘制的样式函数中进行测试
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
})
})
})
}