更改 openlayers 中缓冲区的颜色
Change colour of buffers in openlayers
我有以下 JS 代码，可以使用 JSTS 在 Openlayers 中创建一个 1 英里的缓冲区。但是，我想添加 2 或 3 个缓冲区，但更改默认颜色以便于查看。
到目前为止，我已经尝试过这种样式，因为它改变了我之前 fill/stroke 的观点
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]
}
)
}
)
}
)
});
但是，默认颜色仍然存在 - 我可以更改它吗？
正如@Mike 在他的评论中指出的那样：“ol.style.Style 中的图像选项用于使用图标或规则形状（例如圆形）来设置点特征的样式。您的缓冲几何图形是一个多边形，并且设置了样式通过 ol.style.Style
的描边和填充选项
更改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]
})
})
})
要删除 image: new ol.styld.Circle，类似于：
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)',
}),
}),
});
代码片段
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/jsts@2.3.0/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>
我有以下 JS 代码，可以使用 JSTS 在 Openlayers 中创建一个 1 英里的缓冲区。但是，我想添加 2 或 3 个缓冲区，但更改默认颜色以便于查看。
到目前为止，我已经尝试过这种样式，因为它改变了我之前 fill/stroke 的观点
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]
}
)
}
)
}
)
});
但是，默认颜色仍然存在 - 我可以更改它吗？
正如@Mike 在他的评论中指出的那样：“ol.style.Style 中的图像选项用于使用图标或规则形状（例如圆形）来设置点特征的样式。您的缓冲几何图形是一个多边形，并且设置了样式通过 ol.style.Style
的描边和填充选项更改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]
})
})
})
要删除 image: new ol.styld.Circle，类似于：
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)',
}),
}),
});
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/jsts@2.3.0/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>