Skip to content

Instantly share code, notes, and snippets.

@ThomasG77
Last active November 20, 2018 10:33
Show Gist options
  • Save ThomasG77/31037a8897b4980a0818 to your computer and use it in GitHub Desktop.
Save ThomasG77/31037a8897b4980a0818 to your computer and use it in GitHub Desktop.
JSTS options with OpenLayers 3
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment