Openlayers 你如何设计与你将要绘制的不同的绘制线串

Question

我有一个具有绘图交互功能的 openlayers 地图。当用户开始在地图上绘制线串时，绘制的线串部分看起来应该与用户接下来要绘制的部分不同。

简而言之，当用户在地图上放置一个点时，到该点的线应该是块状的，没有破折号或任何其他样式选项。

为了说明我在这里要做的事情，截图 -

我们可以看到用户要在线上添加另一个点，所以直到那个点的线应该变成蓝色块。

我维护了添加到地图的点集合，当用户选择删除最后一个点时，它会从地图中删除，但最后一段也应该从地图中消失。找不到任何东西来实现它。

我还添加了 ol.style.RegularShape() 来显示一个正方形，但它显示的是一个圆圈，我不知道我做错了什么。

这是我的代码的 jsbin link - Draw interaction line style problem

Answer 1

您需要为绘制样式使用样式函数，并将几何图形分成两部分进行样式设置：

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;，使其在按钮点击功能的范围内

Openlayers 你如何设计与你将要绘制的不同的绘制线串

Openlayers how do you style drawn linestring different than what you are about to draw

javascript

openlayers

openlayers-3

openlayers-5