bufferopenlayers
Change colour of buffers in openlayers
I have the following JS code to create a 1 mile buffer in Openlayers using JSTS. However, I'd like to add 2 or 3 buffers but change the colour from the default for easier viewing.
So far, I've tried this as this styling as changed the fill/stroke of my points before
var source = new ol.source.Vector();
fetch('http://18.207.139.64:8080/geoserver/egm715/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=egm715:Mid_Ulster1&' +
'outputFormat=application/json&srsname=EPSG:3857').then(function(response) {
return response.json();
}).then(function(json) {
var format = new ol.format.GeoJSON();
var features = format.readFeatures(json, {featureProjection: 'EPSG:3857'});
var parser = new jsts.io.OL3Parser();
for (var i = 0; i < features.length; i++) {
var feature = features[i];
// convert the OpenLayers geometry to a JSTS geometry
var jstsGeom = parser.read(feature.getGeometry());
// create a buffer of 1 mile =1609 metres
var buffered = jstsGeom.buffer(1609);
// convert back from JSTS and replace the geometry on the feature
feature.setGeometry(parser.write(buffered));
}
source.addFeatures(features);
});
var buffer1 = new ol.layer.Vector({
source: source,
title: 'Mid Ulster Buffer - 1 mile',
visible: false,
style: new ol.style.Style(
{
image: new ol.style.Circle(
{
stroke: new ol.style.Stroke(
{
color: [0, 102, 77],
width: 2
}
),
fill: new ol.style.Fill(
{
color: [230, 255, 255, 0.6]
}
)
}
)
}
)
});
However, the default colour remains - is there any way I can change it?
Solution
As @Mike indicated in his comment: "The image option in ol.style.Style is used to style point features with an icon or regular shapes such as a circle. Your buffered geometry is a polygon, and is styled by stroke and fill options of ol.style.Style"
Change the style:
style: new ol.style.Style({
image: new ol.style.Circle({
stroke: new ol.style.Stroke({
color: [0, 102, 77],
width: 2
}),
fill: new ol.style.Fill({
color: [230, 255, 255, 0.6]
})
})
})
To remove the image: new ol.styld.Circle, something like:
var vectorLayer = new ol.layer.Vector({ // VectorLayer({
source: source,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3,
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.3)',
}),
}),
});
code snippet
html,
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
.map {
height: 100%;
width: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSTS Integration</title>
<link rel="stylesheet" href="https://openlayers.org/en/v6.5.0/css/ol.css" type="text/css">
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
<script src="https://unpkg.com/elm-pep"></script>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<script src="https://unpkg.com/[email protected]/dist/jsts.min.js"></script>
<style>
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var json = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"id": "FoodOutlets-MidUlst1.1",
"geometry": {
"type": "Point",
"coordinates": [-760868.77651775, 7266893.59283424]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.2",
"geometry": {
"type": "Point",
"coordinates": [-745762.5639359, 7273034.00676835]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.3",
"geometry": {
"type": "Point",
"coordinates": [-746154.82706286, 7273335.72201827]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.4",
"geometry": {
"type": "Point",
"coordinates": [-744607.30629421, 7255093.16775183]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.5",
"geometry": {
"type": "Point",
"coordinates": [-745202.69041239, 7255413.35399374]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.6",
"geometry": {
"type": "Point",
"coordinates": [-753889.58828371, 7266121.43420011]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.7",
"geometry": {
"type": "Point",
"coordinates": [-753078.05077876, 7267405.03419487]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.8",
"geometry": {
"type": "Point",
"coordinates": [-797828.64640079, 7249092.54222032]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.9",
"geometry": {
"type": "Point",
"coordinates": [-753881.35356931, 7266025.39133859]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.10",
"geometry": {
"type": "Point",
"coordinates": [-742327.05477715, 7302434.75328766]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.11",
"geometry": {
"type": "Point",
"coordinates": [-750757.26468702, 7294103.95069428]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.12",
"geometry": {
"type": "Point",
"coordinates": [-742442.85453496, 7302225.99299248]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.13",
"geometry": {
"type": "Point",
"coordinates": [-750678.90941561, 7293250.62728349]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.14",
"geometry": {
"type": "Point",
"coordinates": [-751029.88000637, 7293128.14558216]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.15",
"geometry": {
"type": "Point",
"coordinates": [-750678.90941561, 7293250.62728349]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.16",
"geometry": {
"type": "Point",
"coordinates": [-750757.26468702, 7294103.95069428]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.17",
"geometry": {
"type": "Point",
"coordinates": [-743083.01564625, 7280176.20812626]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.18",
"geometry": {
"type": "Point",
"coordinates": [-750837.75665786, 7294119.26420537]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.19",
"geometry": {
"type": "Point",
"coordinates": [-750757.26468702, 7294103.95069428]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.20",
"geometry": {
"type": "Point",
"coordinates": [-750790.13706862, 7294411.61511293]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.21",
"geometry": {
"type": "Point",
"coordinates": [-751029.88000637, 7293128.14558216]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.22",
"geometry": {
"type": "Point",
"coordinates": [-729059.04788702, 7288230.5536544]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.23",
"geometry": {
"type": "Point",
"coordinates": [-771157.83824017, 7283468.51757007]
},
"geometry_name": "the_geom",
"properties": {}
}, ],
"totalFeatures": 140,
"numberMatched": 140,
"numberReturned": 140,
"timeStamp": "2021-03-02T05:15:46.157Z",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:EPSG::3857"
}
}
};
var format = new ol.format.GeoJSON();
var features = format.readFeatures(json, {
featureProjection: 'EPSG:3857'
});
var source = new ol.source.Vector(); // VectorSource();
var parser = new jsts.io.OL3Parser();
parser.inject(
ol.geom.Point,
ol.geom.LineString,
ol.geom.LinearRing,
ol.geom.Polygon,
ol.geom.MultiPoint,
ol.geom.MultiLineString,
ol.geom.MultiPolygon
);
for (var i = 0; i < features.length; i++) {
var feature = features[i];
// convert the OpenLayers geometry to a JSTS geometry
var jstsGeom = parser.read(feature.getGeometry());
// create a buffer of 1 mile =1609 metres adjusted for the projection
var buffered = jstsGeom.buffer(1609 / ol.proj.getPointResolution('EPSG:3857', 1, ol.extent.getCenter(feature.getGeometry().getExtent())));
// create a buffer of 40 meters around each line
// var buffered = jstsGeom.buffer(1000);
// convert back from JSTS and replace the geometry on the feature
feature.setGeometry(parser.write(buffered));
}
source.addFeatures(features);
var vectorLayer = new ol.layer.Vector({ // VectorLayer({
source: source,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3,
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.3)',
}),
}),
});
var rasterLayer = new ol.layer.Tile({ // TileLayer({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [rasterLayer, vectorLayer],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.fromLonLat([126.979293, 37.528787]),
zoom: 15,
}),
});
map.getView().fit(source.getExtent());
</script>
</body>
</html>- Simple program that reads and writes to a pipe
- Java NIO ByteBuffer, write after flip
- how to append to a excel file in nodejs
- how the output and input mechanism work on the terminal of C++ in this example
- How to convert image buffer to form-data in node.js?
- Buffer Size for BufferedInputStream
- How to use Asset Manager API in NDK to read raw data?
- How many nginx buffers is too many?
- vim: How to search/replace in all opened files?
- Flutter Rapid input into TextField
- Canonical way to remove multiple bytes from buffer
- How do I close a single buffer (out of many) in Vim?
- String buffer gets skipped on the last loop iteration
- What exactly is a constant buffer (cbuffer) used for in hlsl?
- boost::asio::async_read_until with custom match_char to accept only JSON format
- What is file buffer in Node.js?
- Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in
- 'File is not defined' on file creation from zip buffer
- Intellij IDEA with ideavim. Cannot copy text from another source
- Gorilla Websocket WriteMessage leading Out of memory on using WriteBufferPool
- zookeeper large memory size
- Save Screen (program) output to a file
- Local variable allocation crashes the stack in embedded C on cortexm4 and operating system
- String buffers and slices in Zig
- HTML: How to start Sound playback from URL mid-file without buffering all sound data to that point
- Dummy output from an unsigned char buffer
- Is there a difference between using int and size_t for array initialisation in C?
- Multiple Buffers In One Device Memory
- Calculate average distance between all points in radius and reference point
- Why does printf flush or not flush depending on where the line is in a loop?