1

I have a openlayers map which has draw interaction. When user starts drawing a linestring on the map, the portion of linestring drawn should look different than what the user would draw next.

In brief when user drops a point on the map, the line till that point should be block, without dash or any other styling options.

To illustrate what I am trying to do here goes the screenshot -

Expected output

We can see user is about to add another point on the line so line till that point should turn block in blue color.

I have maintained the collection of points being added to the map, when user opts to delete the last point, it is being removed from the map but the last segment should also disappear from map. Can't find anything to achieve that.

Also I have added the ol.style.RegularShape() to display a square but it is displaying a circle instead don't know what I am doing wrong.

Here is jsbin link to my code - Draw interaction line style problem

capnam
  • 429
  • 9
  • 25

1 Answers1

6

You would need to use a style function for your draw style and divide the geometry into two parts for styling:

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;
}

To remove the last point from the line interaction simply use

line.removeLastPoint();

making sure var line; is declared so it is in the scope of the button click function

Mike
  • 16,042
  • 2
  • 14
  • 30
  • will check your solution once I complete my POC. How can I get a square `RegularShape` style on each point of drawn line ? I have added `drawPoint` of `Point` type interaction just to do that which is not working, it is showing circles. Here [https://jsbin.com/nimopez/edit?js,output] – capnam Mar 14 '19 at 12:40
  • You can style the vertices of a linestring as a multipoint geometry in the style function, which would make a separate point interaction unnecessary. – Mike Mar 14 '19 at 13:47
  • Thanks it works. Learning so many things in openlayers from you. – capnam Mar 14 '19 at 13:55