OpenLayers - LineString round corners

Question

i want to create a LineString with round corners in OpenLayers.

In an OL version there was still the possibility to realize this via cspline:

     var feature_line_one = new ol.Collection();
     feature_line_one.push(new ol.Feature(new ol.geom.LineString(line_one_coords)));

     var vector_line_one = new ol.layer.Vector({
          name: 'Line 1',
          source: new ol.source.Vector({ features: feature_line_one }),
          style: function(f) {
            var opt = {
              tension: 0.25,
              pointsPerSeg: 100
            };
------->    var csp = f.getGeometry().cspline(opt);
            return [ new ol.style.Style({
              stroke: new ol.style.Stroke({ color:"#011A27", width:6 }),
------->      geometry: csp
            })
            ]
          }
     })

But now in another OL version cspline doesn't exist anymore, I always get this error:

Uncaught TypeError: f.getGeometry(...).cspline is not a function....

it should not look like this

this is how it should look

thanks for help...

...any kind of help is welcome

Answer 1

As @Mike indicated in his comment, cspline has never been part of the OpenLayers library.

It is included in the ol-ext library

Include the ol-ext library on your page (from the jsdelivr CDN): https://cdn.jsdelivr.net/npm/ol-ext@3.1.7/dist/ol-ext.js

<script src="https://cdn.jsdelivr.net/npm/ol-ext@3.1.7/dist/ol-ext.js"></script>

working example

code snippet:

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({ // TileLayer({
      source: new ol.source.OSM()
    })
  ],
  target: 'map',
  view: new ol.View({
    center: ol.proj.fromLonLat([106.044189, -6.840865]),
    zoom: 7
  })
});

// modified from https://stackoverflow.com/questions/27210362/open-layers-3-how-to-draw-a-polygon-programmatically
var polyData = [
  [
    [2.15, 20.233],
    [2.0845, 20.293],
    [2.24, 20.343],
    [2.3015, 20.283]
  ],
  [
    [2.95, 21.733],
    [3.15, 21.733],
    [3.15, 21.033],
    [2.95, 21.033]
  ]
];

var coords = [];
for (var i = 0; i < polyData.length; i++) {
  for (var ii = 0; ii < polyData[i].length; ii++) {
    coords.push(polyData[i][ii]);
  }
}
var feature_line_one = new ol.Collection();
var line = new ol.geom.LineString(coords);
line.transform('EPSG:4326', 'EPSG:3857');
var feature = new ol.Feature(line);
feature_line_one.push(feature);

var vector_line_one = new ol.layer.Vector({
  name: 'Line 1',
  source: new ol.source.Vector({
    features: feature_line_one
  }),
  style: function(f) {
    var opt = {
      tension: 0.25,
      pointsPerSeg: 100
    };
    var csp = f.getGeometry().cspline(opt);
    return [new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: "#011A27",
        width: 6
      }),
      geometry: csp
    })]
  }
})

// Add the vector layer to the map.
map.addLayer(vector_line_one);

var extent = line.getExtent();
map.getView().fit(extent, {
  size: map.getSize(),
  padding: [50, 50, 50, 50]
});

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 100%;
  width: 100%;
}

<link rel="stylesheet" href="https://openlayers.org/en/v6.13.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol-ext@3.1.7/dist/ol-ext.js"></script>
<div id="map" class="map"></div>