我想为线要素指定一个边框。在下面的代码中，我可以根据道路类型分配描边颜色，但我想在其上分配另一个边框。 例如我想为最后一个 else 语句分配一个边框。属于该类别的任何特征都应与笔划颜色接壤。 我怎样才能做到这一点？
图片:
<!doctype html>
<html>
<head>
<title>Vector Tiles</title>
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css" />
<style>
.map {
width: 100%;
height: 100vh;
}
body {
margin: 0;
}
</style>
</head>
<body>
<body>
<div id="map" class="map">
<div id="popup"></div>
</div>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script>
var popup = new ol.Overlay({
element: document.getElementById('popup')
});
var osmLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var styleFunction = function(feature) {
console.log(feature);
//assign symbology of roads based on road type
var color;
if (feature.get("type")=='primary' && 'secondary' && 'trunk'){
color = 'rgba(252, 214, 112, 1)';
} else if (feature.get("type")=='motorway'){
color = 'rgba(245, 171, 53, 1)';
}else if (feature.get("type")=='cycleway'){
color = 'rgba(3, 166, 120, 1)';
} else {
color = 'rgba(236, 236, 236, 1)'
}
var retStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: color,
width: 5
})
});
return retStyle;
};
var vectorLayer1 = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
url: 'http://localhost:8080/tiles/roads/{z}/{x}/{y}.mvt'
}),
style: styleFunction
})
var selectInteraction = new ol.interaction.Select({
layers: function (layer) {
return layer.get('name');
}
});
var map = new ol.Map({
target: 'map',
layers: [osmLayer,vectorLayer1],
view: new ol.View({
center: ol.proj.fromLonLat([103.8198,1.3521]),
zoom: 13
})
});
map.addOverlay(popup);
function pickRandomProperty() {
var prefix = ['bottom', 'center', 'top'];
var randPrefix = prefix[Math.floor(Math.random() * prefix.length)];
var suffix = ['left', 'center', 'right'];
var randSuffix = suffix[Math.floor(Math.random() * suffix.length)];
return randPrefix + '-' + randSuffix;
}
var container = document.getElementById('popup');
var displayFeatureInfo = function(pixel, coordinate) {
var features = [];
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
features.push(feature);
});
if (features.length > 0) {
var info = [];
for (var i = 0, ii = features.length; i < ii; ++i) {
info.push(features[i].get('name'));
}
container.innerHTML = info.join(', ') || '(unknown)';
var randomPositioning = pickRandomProperty();
popup.setPositioning(randomPositioning);
popup.setPosition(coordinate);
} else {
container.innerHTML = ' ';
}
};
map.on('click', function(evt) {
var coordinate = evt.coordinate;
displayFeatureInfo(evt.pixel, coordinate);
});
</script>
</body>
</html>
最佳答案
只要您的内部颜色没有任何透明度，您就可以使用一系列重叠的笔触样式
var retStyle = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: outerColor,
width: 7,
}),
zIndex: 0,
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: color,
width: 5,
}),
zIndex: 1,
})
];
关于html - Openlayers:如何在线条特征周围添加彩色边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62512673/