ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Simplify example

Browse Source
This commit is contained in:
Marc Jansen
2018-03-29 08:34:29 +02:00
parent d42de41af3
commit 1f0e9abfdd
2 changed files with 15 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/chaikin.html
+1 -7
View File
@@ -3,7 +3,7 @@ layout: example.html
title: Smoothing lines using Chaikins algorithm title: Smoothing lines using Chaikins algorithm
shortdesc: This uses Chaikins algorithm to smooth drawn lines. shortdesc: This uses Chaikins algorithm to smooth drawn lines.
docs: > docs: >
This example uses the npm package [`chaikin-smooth`](https://www.npmjs.com/package/chaikin-smooth) which 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) implements [Chaikins algorithm](http://graphics.cs.ucdavis.edu/education/CAGDNotes/Chaikins-Algorithm/Chaikins-Algorithm.html)
to smooth drawn lines. to smooth drawn lines.
@@ -13,12 +13,6 @@ tags: "smooth, smoothing, chaikin"
--- ---
<div id="map" class="map"></div> <div id="map" class="map"></div>
<form class="form-inline"> <form class="form-inline">
<label for="type">Geometry type &nbsp;</label>
<select id="type">
<option value="LineString">LineString</option>
<!-- Right now the package only supports lines, not closed rings -->
<!-- <option value="Polygon">Polygon</option> -->
</select><br>
<label for="shall-smoothen">Smooth drawn geometry?</label> <label for="shall-smoothen">Smooth drawn geometry?</label>
<input id="shall-smoothen" type="checkbox" checked><br> <input id="shall-smoothen" type="checkbox" checked><br>
<label for="iterations">Number of smoothings</label> <label for="iterations">Number of smoothings</label>
examples/chaikin.js
+14 -32
View File
@@ -36,39 +36,21 @@ const map = new Map({
}) })
}); });
const typeSelect = document.getElementById('type');
const shallSmoothen = document.getElementById('shall-smoothen'); const shallSmoothen = document.getElementById('shall-smoothen');
const numIterations = document.getElementById('iterations'); const numIterations = document.getElementById('iterations');
let draw; // global so we can remove it later const draw = new Draw({
function addInteraction() { source: vectorSource,
const value = typeSelect.value; type: 'LineString'
if (value !== 'None') { });
draw = new Draw({ map.addInteraction(draw);
source: vectorSource, draw.on('drawend', function(event) {
type: typeSelect.value if (!shallSmoothen.checked) {
}); return;
map.addInteraction(draw);
draw.on('drawend', function(event) {
const feat = event.feature;
const geometry = feat.getGeometry();
const isPoly = geometry.getType() === 'Polygon';
const isLine = geometry.getType() === 'LineString';
if (shallSmoothen.checked && (isPoly || isLine)) {
const coords = geometry.getCoordinates();
const smoothened = makeSmooth(isPoly ? coords[0] : coords, parseInt(numIterations.value, 10) || 5);
geometry.setCoordinates(isPoly ? [smoothened] : smoothened);
}
});
} }
} const feat = event.feature;
const geometry = feat.getGeometry();
/** const coords = geometry.getCoordinates();
* Handle change event. const smoothened = makeSmooth(coords, parseInt(numIterations.value, 10) || 5);
*/ geometry.setCoordinates(smoothened);
typeSelect.onchange = function() { });
map.removeInteraction(draw);
addInteraction();
};
addInteraction();