我有一个openlayers地图,它有绘制互动。当用户开始在地图上绘制线串时,绘制的线串部分应该与用户下一个绘制的部分不同。
简而言之,当用户在地图上放置一个点时,直到该点的线应该是阻塞,没有破折号或任何其他样式选项。
为了说明我想在这里做的是截图 -
我们可以看到用户即将在线上添加另一个点,因此直到该点应该变成蓝色块。
我维护了要添加到地图中的点集合,当用户选择删除最后一个点时,它将从地图中删除,但最后一个段也应该从地图中消失。找不到任何可以实现的目标。
此外,我添加了ol.style.RegularShape()
来显示一个正方形,但它显示一个圆圈,而不知道我做错了什么。
这是jsbin链接到我的代码 - Draw interaction line style problem
您需要为绘制样式使用样式函数,并将几何图形划分为两个部分以进行样式设置:
var drawStyle = function(feature) {
var styles = [];
if (feature.getGeometry().getType() == 'LineString') {
var coordinates = feature.getGeometry().getCoordinates();
styles.push(new ol.style.Style({
geometry: new ol.geom.LineString(coordinates.slice(-2)),
stroke: new ol.style.Stroke({
color: '#0000FF',
lineDash: [1, 20],
width: 5,
lineCap:'square',
lineJoin:'round',
lineDashOffset:10
})
}));
styles.push(new ol.style.Style({
geometry: new ol.geom.MultiPoint(coordinates),
image: new ol.style.RegularShape({
points: 4,
radius: 6,
angle: Math.PI / 4,
fill: new ol.style.Fill({
color: 'blue'
}),
stroke: new ol.style.Stroke({
color: 'blue'
}),
})
}));
if (coordinates.length > 2) {
styles.push(new ol.style.Style({
geometry: new ol.geom.LineString(coordinates.slice(0,-1)),
stroke: new ol.style.Stroke({
color: '#0000FF',
width: 2,
lineCap:'square',
lineJoin:'round'
})
}));
}
}
return styles;
}
要从线交互中删除最后一个点,只需使用
line.removeLastPoint();
确保声明var line;
,因此它在按钮单击功能的范围内