ArcGis JS天地图 暗色地图

方法一:使用css filter

  1. 在body下增加svg,并增加需要用到的滤镜,这边用到x-rays
  <svg id="svgfilters" aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden"version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="x-rays" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox"primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values=".33 .33 .33 0 0.33 .33 .33 0 0.33 .33 .33 0 00 0 0 1 0" in="SourceGraphic" result="colormatrix" /><feComponentTransfer in="colormatrix" result="componentTransfer"><feFuncR type="table" tableValues="0.98 0.3 0.25" /><feFuncG type="table" tableValues="1 0.44 0.24" /><feFuncB type="table" tableValues="0.91 0.62 0.39" /><feFuncA type="table" tableValues="0 1" /></feComponentTransfer><feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend" /></filter></defs></svg>
  1. 为地图canvas增加css
	canvas{filter: grayscale(0.16) url('#x-rays') contrast(1.8) hue-rotate(338deg) brightness(0.9) !important;}

实现效果
在这里插入图片描述缺点
如果需要在地图上进行打图层的操作,滤镜会对图层也造成影响

待续

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/444901.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kafka-初识

一、Kafka是什么&#xff1f; Kafka是一个高度可扩展、弹性、容错和安全的分布式流处理平台&#xff0c;由服务器和客户端组成&#xff0c;通过高性能TCP网络协议进行通信。它可以像消息队列一样生产和消费数据。可以部署在裸机硬件、虚拟机和容器上&#xff0c;也可以部署在本…

鼠标市场洞察:数据分析揭示消费趋势!

鼠标整体数据分析 一. 概述 本报告基于从淘宝商品搜索接口和淘宝精确月销量接口中提取的数据&#xff0c;分析了前百个品牌在销售额上的占比情况。分析涵盖了销售额和占比的数据&#xff0c;为决策提供了依据。(以上两个接口有需求的可以找我要链接&#xff09; 1. 大盘整体…

基于Python flask的豆瓣电影可视化系统,豆瓣电影爬虫系统

博主介绍&#xff1a;✌Java徐师兄、7年大厂程序员经历。全网粉丝13w、csdn博客专家、掘金/华为云等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3fb; 不…

ppt压缩文件怎么压缩?压缩PPT文件的多种压缩方法

ppt压缩文件怎么压缩&#xff1f;当文件体积过大时&#xff0c;分享和传输就会变得困难。许多电子邮件服务对附件的大小有限制&#xff0c;而在网络环境不佳时&#xff0c;上传和下载大文件可能耗时较长。此外&#xff0c;在不同设备上播放时&#xff0c;较大的PPT文件还可能导…

基于FPGA的以太网设计(一)

以太网简介 以太网&#xff08;Ethernet&#xff09;是一种计算机局域网技术。IEEE组织的IEEE 802.3标准制定了以太网的技术标准&#xff0c;它规定了包括物理层的连线、电子信号和介质访问控制的内容。以太网是目前应用最普遍的局域网技术&#xff0c;取代了其他局域网标准如…

GA-BP回归预测 | MATLAB实现GA-BP多输入单输出回归预测

回归预测 | MATLAB实现GA-BP多输入单输出回归预测 目录 回归预测 | MATLAB实现GA-BP多输入单输出回归预测预测效果基本介绍模型描述遗传算法神经网络GA-BP网络程序设计学习总结参考资料预测效果 基本介绍 MATLAB实现GA-BP多输入单输出回归预测,输入7个特征,输出1个,优化权重…

指针——数组(指针)传参

&#xff08;一&#xff09;前文问题答案解析 1、代码 int(*pa[10])[5] 的解析 某人&#xff1a;嗯&#xff0c;有*pa&#xff0c;这不很明显是个指针嘛&#xff0c;然后 [5] 说明是个数组指针&#xff0c;int类型&#xff0c;[10]。。。。 这这这&#xff0c;很明显不是指针。…

第38讲:Ceph分布式存储集群部署

文章目录 1.Ceph分布式存储集群安装方式2.Ceph集群环境规划3.基础环境配置3.1.设置主机名以及SSH免密登录3.2.配置Ceph yum源 4.部署Ceph分布式存储集群4.1.安装Ceph-deploy自动化部署工具4.2.初始化创建一个Ceph分布集群4.3.在每个节点中部署Ceph集群所有的组件4.4.部署并配置…

DevOps

DevOps中的Dev指的是Development&#xff08;开发&#xff09;&#xff0c;Ops指的是Operations&#xff08;运维&#xff09;&#xff0c;DevOps就是打通开发运维的壁垒&#xff0c;实现开发运维一体化。 一、项目开发考虑的维度 Dev&#xff1a;怎么开发。 Ops&#xff1a…

基于FPGA的以太网设计(二)

一.以太网硬件架构概述 前文讲述了以太网的一些相关知识&#xff0c;本文将详细讲解以太网的硬件架构 以太网的电路架构一般由MAC、PHY、变压器、RJ45和传输介质组成&#xff0c;示意图如下所示&#xff1a; PHY&#xff1a;Physical Layer&#xff0c;即物理层。物理层定义了…

IO进程--day1

一、定义学生结构体 学生信息&#xff1a;学号&#xff0c;姓名&#xff0c;成绩等编写2个函数 save_stu 和 load_stu save_stu通过 fprintf 将arr数组中的3个学生的所有信息&#xff0c;保存到文件中去 load_stu通过 fscanf 将文件中的3个学生的所有信息&#xff0c;读取到一个…

【cocos creator】输入框滑动条联动小组建

滑动条滑动输入框内容会改变 输入框输入&#xff0c;滑动条位置改变 const { ccclass, property } cc._decorator;ccclass() export default class SliderEnter extends cc.Component {property({ type: cc.Float, displayName: "最大值", tooltip: "" }…

linux设备驱动介绍

目录 一.裸机设备驱动 vs linux设备驱动 1.什么是驱动程序 2.裸机驱动和操作系统驱动有什么区别 3.linux驱动的本质是什么 二.linux设备分类 一.裸机设备驱动 vs linux设备驱动 1.什么是驱动程序 一般来说能让硬件工作起来的程序就是驱动程序,驱动程序提供的是硬件设备操作的…

随机掉落的项目足迹:修改组件库默认样式

需求引入 为了便于讲解&#xff0c;我直接引入案例 在使用element ui的表单组件时&#xff0c;我觉得输入框前面的“文章标题”几个字太小了&#xff0c;想改大一点 解决方法 F12 审查元素&#xff0c;找到“文章标题”对应的代码&#xff0c;发现这个标签对应的类名class&q…

学以致用 SAP HCM 顾问excel函数实战系列

EXCEL函数&#xff1a;在上学的时候&#xff0c;对word、excel、PPT感觉都很简单&#xff0c;稀里糊涂的学&#xff0c;稀里糊涂的忘&#xff0c;然后走向工作岗位的时候&#xff0c;突然发现这三大宝剑无比锋利&#xff0c;可惜自己太菜&#xff0c;曾经努力学习&#xff0c;但…

如何设置 GitLab 密码长度?

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 学习极狐GitLab 的相关资料&#xff1a; 极狐GitLab 60天专业…

【CSS in Depth 2 精译_047】7.2 CSS 响应式设计中的媒体查询原则(上):深入理解媒体查询的类型

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 【第七章 响应式设计】&#xff08;概述&#xff09; 7.1 移动端优先设计原则&#xff08;上篇&#xff09; 7.1.1 创建移动端菜单&#xff08;下篇&#xff09;7.1.2 给视口添加 meta 标签&#xf…

算法笔记day03

目录 1. 大数加法 2.链表相加(二) 3.大数乘法 1. 大数加法 大数加法_牛客题霸_牛客网 算法思路&#xff1a; 这就是一道模拟题&#xff0c;模拟加法列竖式运算的过程。 class Solution { public:/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0…

用最短长度的绳子把整个花园围起来

给定一个数组 trees&#xff0c;其中 trees[i] [xi, yi] 表示树在花园中的位置。 你被要求用最短长度的绳子把整个花园围起来&#xff0c;因为绳子很贵。只有把 所有的树都围起来&#xff0c;花园才围得很好。 返回恰好位于围栏周边的树木的坐标。 示例 1: 输入: points […

【24最新亲试】ubuntu下载go最新版本

系列综述&#xff1a; &#x1f49e;目的&#xff1a;本系列是个人整理为了工具配置的&#xff0c;整理期间苛求每个知识点&#xff0c;平衡理解简易度与深入程度。 &#x1f970;来源&#xff1a;材料主要源于Ubuntu 升级 golang 版本完美步骤进行的&#xff0c;每个知识点的修…