OpenLayers - LineString 圆角

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 Inte.net 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>