Openlayers 5使地图变暗
Openlayers 5使地图变暗
提问于 2020-09-10 11:57:10
我想有一个黑暗的地图，就像在照片中，以使其他功能内的其他层更可见。实现这一目标的最佳方法是什么？
map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
wrapX: false
})
}),
trackLayer,
circleMarkerLayer,
missionLayer,
planeLayer,
vesselLayer
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
},
attribution: false
}),
loadTilesWhileAnimating: true,
view: view
});
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-09-16 18:01:36
您可以查看图文库在层上应用颜色过滤器。
参见联机示例：https://viglino.github.io/ol-ext/examples/filter/map.filter.colorize.html
Stack Overflow用户
发布于 2020-09-10 12:42:04
您可以在底层的postrender事件中应用全局复合操作来应用灰度和其他效果(请注意，Chrome的最新版本在这方面存在问题)。
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.map {
margin: 0;
padding: 0;
width: 100%;
height: 80%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<table><tr>
<th>Gray</th><th>Intensity</th>
</tr><tr>
<td><input id="gray" type="range" min="0" max="100" step="1" value="50"></td>
<td><input id="intensity" type="range" min="0" max="255" step="1" value="128"></td>
</tr></table>
<script type="text/javascript">
var map = new ol.Map({
layers : [
new ol.layer.Tile({source : new ol.source.OSM()}),
],
target : 'map',
logo: false,
controls: ol.control.defaults({ attributionOptions: { collapsible: false } }),
view : new ol.View({
center: ol.proj.fromLonLat([12.5, 55.7]),
zoom: 7
})
});
var intensityInput = document.getElementById('intensity');
var background = 255 - intensityInput.value;
intensityInput.onchange = function() {
background = 255 - intensityInput.value;
map.render();
};
var grayInput = document.getElementById('gray');
grayInput.onchange = function() {
map.render();
};
map.getLayers().getArray()[0].on('postcompose', function (evt) {
evt.context.globalCompositeOperation = 'color';
evt.context.fillStyle = 'rgba(255,255,255,' + grayInput.value/100 + ')';
evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
evt.context.globalCompositeOperation = 'overlay';
evt.context.fillStyle = 'rgb(' + [background,background,background].toString() + ')';
evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
evt.context.globalCompositeOperation = 'source-over';
});
</script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63829180
复制相关文章
相似问题
腾讯云开发者
