openlayers - 在 SLD 中获取图层名称
问题描述
我们可以使用任何元素或函数来获取 SLD 中的当前层名称吗?我们要求多个图层,并希望对每个图层使用相同的样式,但根据图层进行小的自定义,例如颜色更改等。
如果没有为每种层类型创建新的 SLD,我还没有找到任何允许这样的用例的文档。
解决方案
[世界粮食首脑会议]
在这里,我为您做了一个示例,向您展示如何进行您提到的简单修改。
在下面的示例中,我没有修改图层样式,而是修改了要素样式,这与我刚刚发现的简单示例相同。因此,为了在您的情况下工作,您只需要获取图层样式并以与示例相同的方式进行更改。
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
<title>Simple Style Change</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
// base style default of features
// features
const radius = 20000;
const cx = -80;
const cy = 35;
const fonts = [
'1.2em "Fira Sans", sans-serif',
'italic 1.2em "Fira Sans", serif',
'italic small-caps bold 16px/2 cursive',
'small-caps bold 24px/1 sans-serif',
'caption'
];
const baseStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 1)',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 0, 0.1)'
}),
text: new ol.style.Text({
stroke: new ol.style.Stroke({color: '#ffffff', width: 3})
})
});
// map
const view = new ol.View({
center: ol.proj.fromLonLat([cx-6, cy]),
zoom: 7
});
const vlayer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: baseStyle
});
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vlayer
],
view
});
// add features
const features = [];
let feat, style, fill, text;
for (let i = 0; i < 20; i++) {
feat = new ol.Feature({
geometry: ol.geom.Polygon.circular([cx-i, cy], radius)
.transform('EPSG:4326', 'EPSG:3857')
});
style = vlayer.getStyle().clone();
fill = vlayer.getStyle().getFill().clone();
fill.setColor(`rgba(${i*12},${i*12},${i*12},0.5)`)
style.setFill(fill);
text = vlayer.getStyle().getText().clone();
text.setFont(fonts[i % fonts.length]);
text.setText(`${i}`);
style.setText(text);
feat.setStyle(style);
features.push(feat);
}
vlayer.getSource().addFeatures(features);
</script>
</body>
</html>
WMS 更新
对于 WMS,您可以使用两个参数根据请求动态更改样式。
- styles : 要应用的样式名称的逗号分隔值,默认样式适用于空值。在这种情况下,您必须使用所需的简单更改定义一组样式,然后将这些样式的名称与 OL 中的图层一起使用。
- sld_body:要应用于地图的 SLD XML 文本。在这种情况下,您有一个基础 SLD,您可以使用 JavaScript 对其进行修改,并将其与 OL 中的层一起使用。
在 OL 上,您可以指定此参数,假设您使用TileWMS
, 在创建时使用选项参数params
或方法updateParams
。
推荐阅读
- django - 如何在python3中的MongoDB中找到具有某些条件的最新文档?
- java - 这是在 java 中合并两个 JSONObject(org.json) 对象的最佳方法
- python - 根据列表中的字典中的相同键对创建字典
- angular - 无法获取角度 2 中放置在资产文件夹中的数据
- java - 如何将 Liferay 7 与 Apache POI 集成?- 额外的细节
- android - 如何在 Gitlab CI for android 中管理签名密钥库
- x3d - X3D 无法识别
- php - Wordpress 返回 preg_replace - 内容消失
- angular - Angular6地图不是一个功能
- excel - 为什么我会从此代码中收到 VBA 运行时错误“424”对象必需错误?