Merge pull request #8003 from marcjansen/chaikin

Add an example showing Chaikins smoothing algorithm

examples/chaikin.html

@@ -0,0 +1,20 @@
+---
+layout: example.html
+title: Smoothing lines using Chaikins algorithm
+shortdesc: This uses Chaikins algorithm to smooth drawn lines.
+docs: >
+  This example uses the npm package [`chaikin-smooth`](https://www.npmjs.com/package/chaikin-smooth) which
+  implements [Chaikins algorithm](http://graphics.cs.ucdavis.edu/education/CAGDNotes/Chaikins-Algorithm/Chaikins-Algorithm.html)
+  to smooth drawn lines.
+
+  Start by drawing on the map. Once you finish a drawing, the feature's geometry will be smoothed
+  as configured via the form elements.
+tags: "smooth, smoothing, chaikin"
+---
+<div id="map" class="map"></div>
+<form class="form-inline">
+  <label for="shall-smoothen">Smooth drawn geometry?</label>
+  <input id="shall-smoothen" type="checkbox" checked><br>
+  <label for="iterations">Number of smoothings</label>
+  <input style="width: 250px;" type="range" id="iterations" min="2" max="10" step="1" value="5">
+</form>

examples/chaikin.js

@@ -0,0 +1,56 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import Draw from '../src/ol/interaction/Draw.js';
+
+import smooth from 'chaikin-smooth';
+
+function makeSmooth(path, numIterations) {
+  numIterations = Math.min(Math.max(numIterations, 1), 10);
+  while (numIterations > 0) {
+    path = smooth(path);
+    numIterations--;
+  }
+  return path;
+}
+
+const vectorSource = new VectorSource({});
+
+const map = new Map({
+  layers: [
+    new TileLayer({
+      source: new OSM(),
+      opacity: 0.5
+    }),
+    new VectorLayer({
+      source: vectorSource
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [1078373.5950, 6871994.5910],
+    zoom: 5
+  })
+});
+
+const shallSmoothen = document.getElementById('shall-smoothen');
+const numIterations = document.getElementById('iterations');
+
+const draw = new Draw({
+  source: vectorSource,
+  type: 'LineString'
+});
+map.addInteraction(draw);
+draw.on('drawend', function(event) {
+  if (!shallSmoothen.checked) {
+    return;
+  }
+  const feat = event.feature;
+  const geometry = feat.getGeometry();
+  const coords = geometry.getCoordinates();
+  const smoothened = makeSmooth(coords, parseInt(numIterations.value, 10) || 5);
+  geometry.setCoordinates(smoothened);
+});

package.json

@@ -47,6 +47,7 @@
     "babel-cli": "6.26.0",
     "babel-minify-webpack-plugin": "^0.3.0",
     "babel-plugin-jsdoc-closure": "1.3.2",
+    "chaikin-smooth": "1.0.4",
     "clean-css-cli": "4.1.11",
     "copy-webpack-plugin": "^4.0.1",
     "coveralls": "3.0.0",