更改 openlayers map 颜色（深色和浅色样式）
[英]change openlayers map color (dark and light style)
问题描述
I like to use openlayers map with dark and light styles. so how can I change map color or map style?
我喜欢将 openlayers map 与深色和浅色 styles 一起使用。那么如何更改 map 颜色或 map 样式？ My friend(Dear morteza) found a simple way that I answered in this post.我的朋友（Dear morteza）找到了我在这篇文章中回答的简单方法。 my html file is:我的 html 文件是：
<: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; 50%: } </style> <script src="https.//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script> <title>OpenLayers example</title> </head> <body> <h2>My Map</h2> <div id="map" class="map"></div> <script type="text/javascript"> var map = new ol:Map({ target, 'map': layers. [ new ol.layer:Tile({ source. new ol.source,OSM() }) ]: view. new ol:View({ center. ol.proj.fromLonLat([37,41. 8,82]): zoom; 4 }) }); // function applies greyscale to every pixel in canvas </script> </body> </html>
3 个解决方案
解决方案1
3 2020-01-20 08:56:52
openlayes shows maps in <canvas> . openlayes 在<canvas>显示地图。 and <canvas> will be add to <div> container with openlayers library.并且<canvas>将被添加到带有 openlayers 库的<div>容器中。 So add bellow codes to add map and change it's color:因此，添加波纹管代码以添加地图并更改其颜色：
var map = new ol.Map({
target: 'map',//div with map id
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([61.2135, 28.2331]),
zoom: 13
})
});
//change map color
map.on('postcompose',function(e){
document.querySelector('canvas').style.filter="invert(90%)";
});
you can also test other filters您还可以测试其他过滤器
解决方案2
1 2020-01-20 19:33:56
The ol-ext library lets you set filters on openlayers layers. ol-ext 库允许您在 openlayers 层上设置过滤器。 It uses canvas composite operations to achieve the effects.它使用画布合成操作来实现效果。
See code sample online: https://viglino.github.io/ol-ext/examples/filter/map.filter.colorize.html在线查看代码示例： https : //viglino.github.io/ol-ext/examples/filter/map.filter.colorize.html
解决方案3
0 2023-01-28 10:21:26
const tile = new TileLayer({
source: new OSM()
});
tile.on('prerender', (evt) => {
// return
if (evt.context) {
const context = evt.context as CanvasRenderingContext2D;
context.filter = 'grayscale(80%) invert(100%) ';
context.globalCompositeOperation = 'source-over';
}
});
tile.on('postrender', (evt) => {
if (evt.context) {
const context = evt.context as CanvasRenderingContext2D;
context.filter = 'none';
}
});
Before the tile layer rendered set the canvas filter and reset back to none after the rendering, by doing this, the following layers will not be affected in any way, Here is the effect:在tile图层渲染前设置canvas滤镜，渲染后重置为none，这样后面的图层不会受到任何影响，效果如下：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.