【利用oplayers任意更换WMTS瓦片颜色】

2023-11-27 03:40

本文主要是介绍【利用oplayers任意更换WMTS瓦片颜色】,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

利用oplayers任意更换WMTS瓦片颜色

  • 利用oplayers任意更换WMTS瓦片颜色
    • 官方案例
    • 直接上代码自己干

利用oplayers任意更换WMTS瓦片颜色

从官方代码得到启示,然后咱们举一反三去实现

官方案例

openlayers3开始,其底层渲染从SVG切换到了canvas,据说渲染效率提高了不少
openlayers官方给出了标准案例:
链接: https://openlayers.org/en/latest/examples/color-manipulation.html自己看;
原理就是:

map.on('precompose', function(evt){var ctx = evt.context;ctx.filter = filter;//设置滤镜值})map.render();

filter值类型为字符串,默认值为"none";
precompose事件会在地图渲染前发生,因此在渲染前,改变filter值,即可让地图按设置的滤镜进行渲染。

直接上代码自己干

先看原图
在这里插入图片描述
设置成灰色
1)灰度滤镜: 设置filter值为 grayscale(100%)
在这里插入图片描述
2)褐色: 设置filter值为 sepia(100%)
在这里插入图片描述
3)复合滤镜
可以使用多个滤镜,值之间用空格隔开,如:contrast(150%) saturate(200%)
在这里插入图片描述

js代码片.

var app = {baseLayer: undefined,map: undefined,filter: 'none',key: undefined,init: function(){this.baseLayer = new ol.layer.Tile({source: new ol.source.XYZ({url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'})});this.map = new ol.Map({target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [118, 36],zoom: 7}),layers: [this.baseLayer]});this.map.on('precompose', function(evt){let ctx = evt.context;ctx.filter = this.filter;}.bind(this))}
}app.init();function fs(type){switch (type) {//反色case 'invert':type = 'invert' + '(100%)'break;//褐色case 'sepia':type = 'sepia' + '(100%)'break;//灰度case 'grayscale':type = 'grayscale' + '(100%)'break;//复合case 'complex':type = 'contrast(150%) saturate(200%)'break;//默认default:type = 'none';break;}app.filter = type;app.map.render();
}

html代码片.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"><title>滤镜</title><script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script><style>head,body, #map{height: 100%;width: 100%;margin: 0%;padding: 0%;}.ol-attribution{display: none;}.ol-zoom{display: none;}.input-group-btn{top: 2%;left: 1%;z-index: 1;position: absolute;}</style>
</head>
<body><div id="app"><div id="map"></div>        <div class="input-group-btn"><button type="button" class="btn btn-default" onclick="fs('invert')">反色</button><button type="button" class="btn btn-default" onclick="fs('sepia')">褐色</button><button type="button" class="btn btn-default" onclick="fs('grayscale')">灰度</button><button type="button" class="btn btn-default" onclick="fs('complex')">复合滤镜</button><button type="button" class="btn btn-default" onclick="fs('none')">原色</button></div></div><script src="./app.js"></script>
</body>
</html>

这篇关于【利用oplayers任意更换WMTS瓦片颜色】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/426984

相关文章

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》:本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色(红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解

OpenCV实现实时颜色检测的示例

《OpenCV实现实时颜色检测的示例》本文主要介绍了OpenCV实现实时颜色检测的示例,通过HSV色彩空间转换和色调范围判断实现红黄绿蓝颜色检测,包含视频捕捉、区域标记、颜色分析等功能,具有一定的参考... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间

苹果macOS 26 Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色

《苹果macOS26Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色》在整体系统设计方面,macOS26采用了全新的玻璃质感视觉风格,应用于Dock栏、应用图标以及桌面小部件等多个界面... 科技媒体 MACRumors 昨日(6 月 13 日)发布博文,报道称在 macOS 26 Tahoe 中

使用Python实现获取屏幕像素颜色值

《使用Python实现获取屏幕像素颜色值》这篇文章主要为大家详细介绍了如何使用Python实现获取屏幕像素颜色值,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、一个小工具,按住F10键,颜色值会跟着显示。完整代码import tkinter as tkimport pyau

python+opencv处理颜色之将目标颜色转换实例代码

《python+opencv处理颜色之将目标颜色转换实例代码》OpenCV是一个的跨平台计算机视觉库,可以运行在Linux、Windows和MacOS操作系统上,:本文主要介绍python+ope... 目录下面是代码+ 效果 + 解释转HSV: 关于颜色总是要转HSV的掩膜再标注总结 目标:将红色的部分滤

macOS怎么轻松更换App图标? Mac电脑图标更换指南

《macOS怎么轻松更换App图标?Mac电脑图标更换指南》想要给你的Mac电脑按照自己的喜好来更换App图标?其实非常简单,只需要两步就能搞定,下面我来详细讲解一下... 虽然 MACOS 的个性化定制选项已经「缩水」,不如早期版本那么丰富,www.chinasem.cn但我们仍然可以按照自己的喜好来更换

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo

秒变高手:玩转CentOS 7软件更换的方法大全

在 CentOS 7 中更换软件源可以通过以下步骤完成。更换源可以加快软件包的下载速度,特别是当默认源速度较慢时。以下是详细步骤: 前言 为了帮助您解决在使用CentOS 7安装不了软件速度慢的问题,我们推出了这份由浪浪云赞助的教程——“CentOS7如何更换软件源加快下载速度”。 浪浪云,以他们卓越的弹性计算、云存储和网络服务受到广泛好评,他们的支持和帮助使得我们可以将最前沿的技术知识分

全英文地图/天地图和谷歌瓦片地图杂交/设备分布和轨迹回放/无需翻墙离线使用

一、前言说明 随着风云局势的剧烈变化,对我们搞软件开发的人员来说,影响也是越发明显,比如之前对美对欧的软件居多,现在慢慢的变成了对大鹅和中东以及非洲的居多,这两年明显问有没有俄语或者阿拉伯语的输入法的增多,这要是放在2019年以前,一年也遇不到一个人问这种需求场景的。 地图应用这块也是,之前的应用主要在国内,现在慢慢的多了一些外国的应用场景,这就遇到一个大问题,我们平时主要开发用的都是国内的地