ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

openlayer,地图底图白色 修改为深色显示

2022-05-17 15:00:17  阅读:281  来源: 互联网

标签:canvas 底图 openlayer img filter 深色 let openlayers evt


1. (3条消息) openlayers设置黑色底图,自定义修改天地图颜色_Southejor的博客-CSDN博客_openlayers天地图颜色 

 首先找到的是这篇文章,文中有demo,在线演示是有效果的,查看源码放到自己的代码里地图加载不出来,有报错,猜测是openlayers的版本不对,没有深究。

OpenLayers example  这是演示地址

https://share.weiyun.com/4n3m5trc   代码存一下以后备用

 

2.(3条消息) openlayers中巧用canvas滤镜,自由切换你的地图风格_此爱如少年的博客-CSDN博客

这是第二个办法,利用canvas滤镜实现的,

this.map.on('precompose', function(evt){
            let ctx = evt.context;
            ctx.filter = 'grayscale' + '(100%)';
        }.bind(this))

放到项目中底图确实变色了,但所有图层都会变色,尝试过只给layer加滤镜,但没有效果,还是全部都变色。

 

3.(3条消息) openlayers6上加载天地图 ,并改变其颜色_行走的钢丝绳的博客-CSDN博客_openlayers 修改地图颜色

后面又找到这篇文章,在 tileLoadFunction 的回调中进行变色,结合第二步中的filter,

 //离线
                let ftlayer = new ol.layer.Tile({
                    name: 'fengtuLayer',
                    source: new ol.source.TileImage({
                        projection: mapObj?.projection,
                        tileUrlFunction: function (tileCoord) {
                            var z = tileCoord[0]
                            var x = tileCoord[1]
                            var y = tileCoord[2]
                            y = -y - 1
                            return mapObj?.mapUrl.replace('{z}', z).replace('{x}', x).replace('{y}', y)
                        },
                        tileLoadFunction: function (imageTile, src) {
                            // 使用滤镜 将白色修改为深色
                            let img = new Image()
                            // img.crossOrigin = ''
                            // 设置图片不从缓存取,从缓存取可能会出现跨域,导致加载失败
                            img.setAttribute('crossOrigin', 'anonymous')
                            img.onload = function () {
                                let canvas = document.createElement('canvas')
                                let w = img.width
                                let h = img.height
                                canvas.width = w
                                canvas.height = h
                                let context = canvas.getContext('2d')
                                context.filter = 'grayscale(98%) invert(100%) sepia(20%) hue-rotate(180deg) saturate(1600%) brightness(80%) contrast(90%)'
                                context.drawImage(img, 0, 0, w, h, 0, 0, w, h)
                                imageTile.getImage().src = canvas.toDataURL('image/png')
                            }
                            img.src = src
                        },
                    }),
                })
                // ftlayer.on('precompose', (evt) => {
                //     if (evt && evt.target) {
                //         let obj = evt.target.getProperties()
                //         if (obj && obj.name === 'fengtuLayer') {
                //             console.log('--------------------------------')
                //             evt.context.filter = 'grayscale(98%) invert(100%) sepia(20%) hue-rotate(180deg) saturate(1600%) brightness(80%) contrast(90%)'
                //         } else {
                //             console.log('1111111111111111111111111111111111111')
                //         }
                //     }
                // })

                // let layerColor = new ol.layer.Image({
                //     name: '天地图矢量图层',
                //     source: xMapUtil.getSource(resultlayer, 'blue'),
                // })
                // layer.push(layerColor)
                layer.push(ftlayer)
filter = 'grayscale(98%) invert(100%) sepia(20%) hue-rotate(180deg) saturate(1600%) brightness(80%) contrast(90%)'

该滤镜转换后的对比图如下:

 

标签:canvas,底图,openlayer,img,filter,深色,let,openlayers,evt
来源: https://www.cnblogs.com/m7777/p/16280817.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有