JSTS options with OpenLayers 3 by ThomasG77

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Buffer example</title>
  <link rel="stylesheet" href="https://rawcdn.githack.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
  <link rel="stylesheet" href="https://rawcdn.githack.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.css" type="text/css">
  <style>
    html, body {
      height: 100%;
      padding: 0;
      margin: 0;
      font-family: sans-serif;
      font-size: small;
    }

    #map {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://rawcdn.githack.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
  <script src="https://rawcdn.githack.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.js"></script>
  <script src="https://unpkg.com/jsts@2.0.2/dist/jsts.min.js"></script>
  <script type="text/javascript">
    var linestring = {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {
            "name": "Line for buffer"
          },
          "geometry": {
            "type": "LineString",
            "coordinates": [
              [
                -6.723632812499999,
                40.84706035607122
              ],
              [
                -3.7353515625,
                40.84706035607122
              ],
              [
                -2.900390625,
                41.44272637767212
              ],
              [
                -0.8349609375,
                42.16340342422401
              ],
              [
                0.5712890625,
                42.16340342422401
              ],
              [
                1.8017578124999998,
                43.16512263158296
              ],
              [
                2.109375,
                44.809121700077355
              ],
              [
                2.197265625,
                45.920587344733654
              ],
              [
                4.04296875,
                46.195042108660154
              ],
              [
                4.2626953125,
                47.30903424774781
              ]
            ]
          }
        }
      ]
    }

    vectorSource = new ol.source.Vector({
      projection: 'EPSG:3857'
    });
    vectorSource.addFeatures((new ol.format.GeoJSON()).readFeatures(linestring, {
      featureProjection: 'EPSG:3857'
    }));

    var vectorLayer = new ol.layer.Vector({
      source: vectorSource,
      title: 'LineString',
      visible: true
    });

    var buffer_types = [
      'CAP_FLAT',
      'CAP_ROUND',
      'CAP_SQUARE'
    ];

    // We create an array of layers using the differnt buffer options
    var buffered_layers = buffer_types.map(function(buffer_type) {
      var visible = false;
      if (buffer_type == 'CAP_ROUND') {
        visible = true
      }
      return createLayerBuffer(linestring, buffer_type, {
        title: 'Layer ' + buffer_type,
        visible: visible
      });
    })

    // We add the original line layer to the array of layers
    buffered_layers.push(vectorLayer);

    var map = new ol.Map({
      layers: [
        new ol.layer.Group({
          title: 'Base maps',
          layers: [
            new ol.layer.Tile({
              title: 'OpenStreetMap',
              type: 'base',
              visible: true,
              source: new ol.source.OSM()
            }),
          ]
        }),
        new ol.layer.Group({
          'title': 'Overlays',
          layers: buffered_layers
        })
      ],
      target: 'map',
      controls: ol.control.defaults({
        attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
          collapsible: false
        })
      }),
      view: new ol.View({
        center: ol.proj.transform([0.46224, 42.26713],
          'EPSG:4326', 'EPSG:3857'),
        zoom: 5
      })
    });

    var layerSwitcher = new ol.control.LayerSwitcher();
    map.addControl(layerSwitcher);

    function createBuffer(geojsonCollection, distance, options) {
      var ns_buffer = jsts.operation.buffer.BufferParameters;
      var options = options || {};
      var quadrantSegments = options.quadrantSegments || ns_buffer.DEFAULT_QUADRANT_SEGMENTS;
      var endCapStyle = options.endCapStyle || ns_buffer.CAP_ROUND;
      if (['CAP_FLAT','CAP_ROUND','CAP_SQUARE'].indexOf(endCapStyle) != -1) {
        endCapStyle = ns_buffer[endCapStyle];
      }

      var reader = new jsts.io.GeoJSONReader();
      var features_buffered = geojsonCollection.features.map(function(el) {
        var inputGeometry = reader.read(el.geometry);
            inputGeometry = inputGeometry.buffer(distance, quadrantSegments, endCapStyle);
        var geometrybufferGeoJSON = new jsts.io.GeoJSONWriter().write(inputGeometry);
        return {
            "type": "Feature",
            "properties": el.properties,
            "geometry": geometrybufferGeoJSON
        };
      })
      return {
        "type": "FeatureCollection",
        "features": features_buffered
      }
    }

    function createLayerBuffer(geojson, style, options) {
      var options = options || {};
      var title = options.title;
      var visible = options.visible;
      var type = options.type;

      var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          projection: 'EPSG:3857'
        })
      });

      if (title !== undefined) {
        vectorLayer.set('title', title)
      }
      if (visible !== undefined) {
        vectorLayer.set('visible', visible)
      }
      if (type !== undefined) {
        vectorLayer.set('type', type)
      }

      var geojsonBufferObject = createBuffer(geojson, 1, {
        endCapStyle: style
      });

      var formatter = new ol.format.GeoJSON();

      var bufferGeoJSON = formatter.readFeatures(geojsonBufferObject, {
        featureProjection: 'EPSG:3857'
      });

      vectorLayer.getSource().addFeatures(bufferGeoJSON);
      return vectorLayer;
    }
  </script>
</body>
</html>