[GIS] How to offset a polyline in Openlayers 3

geometryjts-topology-suiteopenlayers

I retrieve ways from OSM with Overpass API and display them in an Openlayers3 vector layer. In the case of a highway with a cycleway along it (e.g. cycleway:right=track) I want to draw a green line with a slight offset to the right of the original way, like on this raster image created with mapnik:

As there is no method in Openlayers I had a look at JSTS. Polyline buffering is coming close to what I am looking for:

var bufParams = new jsts.operation.buffer.BufferParameters();
bufParams.setSingleSided(true);
var jstsGeom = parser.read(feature.getGeometry());
var buffered = jstsGeom.buffer(2, bufParams);
feature.setGeometry(parser.write(buffered));

What I need is a similar function which results in just one half of the buffer polygon. Is there anyway to do this with JSTS or any other javascript library?

Best Answer

you could use https://github.com/Turfjs/turf-cut to cut the buffered polygon with the original polyline.

EDIT

jsts implements single sided buffer: https://github.com/bjornharrtell/jsts/blob/master/src/org/locationtech/jts/operation/buffer/BufferParameters.js#L69 Setting a negative or positive buffer value you decide which side to buffer.

Related Solutions

[GIS] How to remove points on the Openlayers map

The third example you linked to covers this pretty nicely I think.

You need to add another interaction - a select interaction - to allow selection of a feature when it's clicked. Something like the following -

var selectInteraction = new ol.interaction.Select();
map.addInteraction(selectInteraction);

Then you need to add some kind of event (like the user clicking a "Delete" button). In the handler for that event, you can use the following code to delete the feature:

//Get the feature that's selected
var selectedFeature = selectInteraction.getFeatures().item(0);
//Remove it from your feature source
featureOverlay.getSource().removeFeature(selectedFeature)

[GIS] OpenLayers Map Draw polygon Feature inside boundaries

You can use ol.geom.Point#getCoordinates() and ol.geom.Polygon#intersectsCoordinate(coordinate) methods together.

I changed your code like this:

function addDrawInteraction() {
    // remove other interactions
    map.removeInteraction(select_interaction);
    map.removeInteraction(modify_interaction);

    // create the interaction
    draw_interaction = new ol.interaction.Draw({
        source: vector_layer.getSource(),
        type: /** @type {ol.geom.GeometryType} */ ($geom_type.val())
    });
    // add it to the map
    map.addInteraction(draw_interaction);
    var isInsideThePolygon=true;
    // when a new feature has been drawn...
    draw_interaction.on('drawend', function(event) {
            if(isInsideThePolygon){
          // create a unique id
          // it is later needed to delete features
          var id = uid();
          // give the feature this id
          event.feature.setId(id);
          // save the changed data
          saveData();
        }
        else{
            setTimeout(function(){
            vector_layer.getSource().removeFeature(event.feature);
          }, 10
          );
        }
    });

    draw_interaction.on('drawstart', function(event) {        
        var drawnPointCoordinates= event.feature.getGeometry().getCoordinates();
        var polyGeometry=polyFeature.getGeometry();
        isInsideThePolygon=polyGeometry.intersectsCoordinate(drawnPointCoordinates);       
    });

}

New JsFiddle link

Best Answer

Related Solutions

[GIS] How to remove points on the Openlayers map

[GIS] OpenLayers Map Draw polygon Feature inside boundaries

Related Question