leaflet【九】使用天地图改变地图底色

news2024/12/25 9:11:52

本文将详细探讨如何在Leaflet地图框架中集成天地图,并介绍如何通过调整背景色和滤镜来改变地图的显示效果。首先,我们将解释如何在Leaflet中配置天地图作为底图,包括API密钥的获取与使用。接下来,文章将展示如何通过CSS和JavaScript技术,实现对地图背景颜色和滤镜效果的自定义设置,以增强地图的视觉效果和用户体验。通过具体示例和代码片段,读者可以学习到如何根据自己的项目需求,灵活地调整地图的视觉风格。本研究不仅为开发者提供了一种实用的地图定制方法,同时也扩展了Leaflet在地理信息系统中的应用范围。

申请Key

首先在天地图的官网当中注册一个账号,然后申请成为开发者,最后在控制台创建一个应用也就是申请一个key

使用地图

在这个地图API当中可以看到他所有的地图,然后使用的话使用这个即可。他换的就是T这个参数(图层)

http://t0.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=你的key

在这里插入图片描述

渲染

const initMap = () => {
  map = L.map('map').setView([38, 120], 5);
  const sourceUrl = 'http://t0.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=密钥key';
  const tileLayer = L.tileLayer(sourceUrl, {
    maxZoom: 18,
    minZoom: 2,
    attribution: '© modify'
  });
  tileLayer.addTo(map);
};

标注地图

在天地图当中提供了一个矢量标记和一个投影标记的底图,然后还有一些个其他的图,现在在做大屏开发的时候用到了GIS,选型选了Leaflet之后,由于大屏都是蓝色科技风格,这个时候用的矢量地图是白色风格就显得很突兀,这个时候我们使用标记底图就可以实现了。

先换一下标记底图,将T的值换成cva_c或者cia_c。之后找到这个渲染地图的元素,修改其背景色即可,这是因为使用的标记图是没有底色的是透明的

http://t0.tianditu.gov.cn/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=密钥key

在这里插入图片描述

滤镜

原因

有一天,有个项目爆了,他用了一个第三方的蓝色版地图服务,之前那个地图是不收费的,但是现在要收钱了,正好之前有做过一个部署在内网当中的一个蓝色的地图使用的高德的。文档在这vue-amap。高德里面是可以支持换底图颜色的,<el-amap :center="center" map-style="amap://styles/darkblue" :zoom="7.5" :zooms="[5,19]" />。这个时候项目经理希望我给他换成高德这种蓝色的图层,我拉项目下来一看好家伙用的Leaflet,这让我全换成高德的那工作量岂不是暴增。正好这个时候想到了滤镜,下面一起来看一下滤镜的实现方案

使用

滤镜说明:https://www.runoob.com/cssref/css3-pr-filter.html

CSS的滤镜功能是通过filter属性实现的,该属性提供了多种不同的视觉效果,用于改变网页元素的外观。这些效果包括模糊、亮度调整、对比度调整、灰度转换、色相旋转等。

CSS中的滤镜功能主要通过filter属性实现,该属性包含多种函数,每个函数对应不同的视觉效果。具体如下:

  • 模糊:通过blur()函数实现,可以设置高斯模糊效果,使图像或元素看起来模糊。例如,filter: blur(5px);会使元素模糊5像素
  • 亮度:使用brightness()函数调整,值范围从0%(全黑)到100%(无变化),超过100%的值也可以使图像更亮。例如,filter: brightness(200%);会使元素亮度加倍。
  • 对比度:通过contrast()函数调整,值范围也是0%到100%,超过100%意味着更低的对比度。例如,filter: contrast(200%);会使元素对比度提高两倍。
  • 灰度:使用grayscale()函数将图像转换为灰度图,100%值完全转为灰度图像,0%则无变化。例如,filter: grayscale(100%);将图像转换为黑白。
  • 色相旋转:通过hue-rotate()函数应用,值表示色环角度,如hue-rotate(90deg)将图像色相旋转90度。
  • 反色:使用invert()函数实现颜色反转效果,100%值完全反转颜色,0%则无变化。例如,filter: invert(1);会将元素的颜色完全反转。
  • 阴影:通过drop-shadow()函数为元素添加阴影效果,可以设置阴影偏移、模糊度和颜色。例如,filter: drop-shadow(4px 4px 10px black);为元素添加了阴影。
  • 透明度:使用opacity()函数调整元素的透明度,百分比值控制透明程度。例如,filter: opacity(50%);使元素50%透明。
  • 饱和度:通过saturate()函数调整图像的饱和度,0%完全不饱和,100%无变化,超过100%增加饱和度。例如,filter: saturate(200%);会使图像饱和度加倍。
  • 褐色:使用sepia()函数将图像转换为深褐色,100%完全转换为褐色,0%无变化。例如,filter: sepia(100%);将图像完全转换为深褐色。

所以在这里我们也可以使用滤镜去改变地图的颜色,这个的灵感来源是抖音上看到利用滤镜去实现一个网页的主题色变换,他的代码是这样的:

因为之前弄了之后这个就放在了书签里面当脚本执行了,所以就没有那么能看清楚,不过问题不大

javascript: (function () {  const docStyle = document.documentElement.style;  if (!window.modeIndex) {    window.modeIndex = 0;  }  const styleList = [    '',    'invert(85%) hue-rotate(180deg)',   'invert(100%) hue-rotate(180deg)',  ];  modeIndex = modeIndex >= styleList.length - 1 ?%200%20:%20modeIndex%20+%201;%20%20docStyle.filter%20=%20styleList[modeIndex];%20%20document.body.querySelectorAll(%27img,%20picture,%20video%27).forEach(el%20=%3E%20el.style.filter%20=%20modeIndex%20?%20%27invert(1)%20hue-rotate(180deg)%27%20:%20%27%27);})();

如果你也对这个脚本感兴趣的话也可以把它加到书签当中
在这里插入图片描述

整合到地图

直接添加一个白色的地图和一个标记到页面当中,这样看的更清楚一点

  L.tileLayer('http://t0.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=密钥', {
    maxZoom: 18,
    minZoom: 2,
  });
  tileLayer.addTo(map);

 L.tileLayer('http://t0.tianditu.gov.cn/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=密钥', {
    maxZoom: 18,
    minZoom: 2,
  }).addTo(map);

之后只需要找到渲染Map的节点给他加上这个样式:

filter: invert(100%) hue-rotate(180deg);

在这里插入图片描述

注意点

在给整个地图添加了滤镜之后,那么后续王地图当中添加的点、线、图片等资源也有可能会被滤镜影响到,就需要我们再手动的去找到对应的class将滤镜还原回来,和上面取反即可

filter: invert(-100%) hue-rotate(180deg);

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

高等数学 第六讲 一元微分学的应用(二)_中值定理,微分等式,微分不等式

高等数学 第6讲 中值定理 微分等式 微分不等式 文章目录 高等数学 第6讲 中值定理 微分等式 微分不等式1.涉及函数的中值定理1.1 有界与最值定理1.2 介值定理1.3 平均值定理1.4 零点定理 2.涉及导数(微分)的中值定理2.1 导数零点定理2.2 罗尔定理2.3 拉格朗日中值定理2.4 柯西中…

如何利用Jenkins自动化管理、部署数百个应用

目录 1. Jenkins 安装与部署步骤 1.1 系统要求 1.2 安装步骤 1.2.1 Windows 系统 1.2.2 CentOS 系统 1.3 初次配置 2. Gradle 详细配置方式 2.1 安装 Gradle 2.1.1 Windows 系统 2.1.2 CentOS 系统 2.2 配置 Jenkins 中的 Gradle 3. JDK 详细配置方式 3.1 安装 JD…

【MSP430】DriverLib库函数,UCS函数分析

MSP430F5xx_6xx_DriverLib_Users_Guide-2_91_13_01(函数库手册).pdf 在MSP430单片机中&#xff0c;UCS&#xff08;User Clock System&#xff09;模块提供了一组函数用于配置和管理时钟源&#xff0c;包括外部和内部振荡器以及时钟信号的路由和控制。这些函数对于确保系统在正…

layui改造优化ITtools技术笔记01—layui.js重要修正

问题现象&#xff1a; ittools教学平台自动生成的单选按钮渲染后无法切换选项。 故障排查&#xff1a; input[name xxx]&#xff0c;其中xxx含有特殊字符&#xff0c;如$等&#xff0c;导致layui渲染时&#xff0c;表达式出错&#xff0c;无法及时渲染。 解决方案&#xff1…

IO流综合练习

IO流综合练习 文章目录 IO流综合练习制造假数据需求利用糊涂包制造假数据&#xff0c;并写入文件中 随机点名器Student标准JavaBean类实现代码names.txt文件中的内容 登录 制造假数据 需求 制造假数据也是开发中的一个能力&#xff0c;在各个网上爬取数据&#xff0c;是其中一…

js动画插件-vue

分享一个动画插件 学习 动画插件 是进入大厂的必备技能 首先我们需要先学会 去使用js 动画 封装好的 GreenSock 动画平台 &#xff08;GSAP&#xff09; greensock.com/gsap/ 就是这个插件 我现在分享一个用例 其实很简单 但是 具体的属性 和很多 内容需要慢慢使用 慢慢看…

java面试题,有synchronized锁,threadlocal、数据可以设置默认值、把redis中的json转为对象

有面试题&#xff0c;有synchronized锁&#xff0c;threadlocal 一、面试题小记二、加锁synchronized1. 先看代码2. synchronized 讲解2.1. 同步代码块2.2. 同步方法2.3. 锁的选择和影响2.4. 注意事项2.5 锁的操作&#xff0c;手动释放锁&#xff0c;显式地获取锁&#xff08;属…

震惊,刷新我的认知,医疗信息数据库sqlserver中计算年龄的sql函数写了200行...

创作不易 只因热爱!! 热衷分享&#xff0c;一起成长! “你的鼓励就是我努力付出的动力” sqlserver中年龄计算,HIS系统中年龄计算函数 呈现的结果要求: 1周岁内显示"几月几天",1周岁以上显示"几岁" CREATE FUNCTION dbo.FUN_GETBRNL( birth varchar(…

汇昌联信拼多多电商有哪些热门话题?

随着互联网技术的飞速发展&#xff0c;电子商务已经成为人们日常生活的一部分。作为中国领先的电商平台之一&#xff0c;拼多多凭借其独特的商业模式和营销策略迅速崛起&#xff0c;吸引了大量消费者的关注。那么&#xff0c;在汇昌联信拼多多电商领域&#xff0c;有哪些热门话…

SpringBoot启动原理详解(二)

透彻理解SpringBoot启动原理&#xff08;二&#xff09; 照旧一张Spring启动顺序图我们对Spring启动原理有多少理解呢&#xff08;问题回顾&#xff09;关于Spring启动原理的若干问题1.init-method、PostConstruct、afterPropertiesSet 三个方法的执行顺序。2.Spring 何时装配A…

【C语言】数组栈的实现

栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端 称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压栈&#…

在图神经网络(GNN)上进行关系推理的新架构

开发能够学习推理的模型是一个众所周知的具有挑战性的问题&#xff0c;在这个领域中&#xff0c;使用图神经网络&#xff08;GNNs&#xff09;似乎是一个自然的选择。然而&#xff0c;以往关于使用GNNs进行推理的工作表明&#xff0c;当这些模型面对需要比训练时更长推理链的测…

听见未来,AI+Audio|2025中国国际音频产业大会(GAS)

随着AI技术的创新与突破&#xff0c; 音频行业正步入前所未有的黄金发展期。 2025中国国际音频产业大会&#xff0c; “AI对行业发展的影响” 将成为讨论的热点之一。 3月26-27日&#xff0c;2025中国国际音频产业大会&#xff08;GAS&#xff09;将在上海 张江科学会堂召…

Conda和Pip有什么区别?

conda和pip是Python中两种常用的包管理工具&#xff0c;它们在用途、包来源以及环境管理等方面存在区别。以下是具体分析&#xff1a; 用途 conda&#xff1a;conda是Anaconda发行版中的包管理工具&#xff0c;可以管理包括非Python软件包在内的各种包。它是一个全面的环境管理…

【iOS】GCD

参考文章&#xff1a;GCD函数和队列原理探索 之前写项目的时候&#xff0c;进行耗时的网络请求使用GCD处理过异步请求&#xff0c;但对一些概念都很模糊&#xff0c;这次就来系统学习一下GCD相关 相关概念 什么是GCD&#xff1f; Grand Center Dispatch简称GCD&#xff0c;是…

python-docx 如何将列表中的值提取到段落中的run以及保存为多个文档?

&#x1f3c6;本文收录于《CSDN问答解惑-专业版》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收…

使用pfld模型进行表盘读数检测

目录 1. 下载项目和数据集2. 配置环境3. 训练和测试3.1 训练3.2 测试 4. 参考 使用pfld模型对压力表进行读表检测 1. 下载项目和数据集 下载项目&#xff1a; git clone https://github.com/zhouayi/pfld.git下载数据集&#xff1a; wget https://github.com/zhouayi/pfld/r…

Vue3扁平化Tree组件的前端分页实现

大家好&#xff0c;我是小卷。得益于JuanTree的扁平化设计&#xff0c;在数据量很大的情况下除了懒加载&#xff0c;使用前端分页也是一种解决渲染性能问题的可选方案。 用法 要实现的文档&#xff1a; 分页效果&#xff1a; 实现 新增属性&#xff1a; 组件setup方法中新增…

java 对象模型的个人理解

文章目录 一、OOP-KCLASS 模型二、疑惑2.1 为什么还需要一个 Class对象&#xff1f;2.2 new 关键字和 Class.newInstance() 的区别&#xff1f; 一、OOP-KCLASS 模型 java 采用了field和method分离的方式&#xff0c;field组成实例 obj &#xff0c;存储在堆区&#xff0c;而m…

web小项目-曼波生日录(Servlet+JSP+MySQL)

效果演示&#xff1a; 当记录条数过多时会自动出现滚轮&#xff0c;数据不会超出紫框 数据库实时记录&#xff1a; 项目源代码以及所用到的资源&#xff1a; 链接: https://pan.baidu.com/s/1w0czmH9xBfetk7CZ7RNbtQ?pwd6666 提取码: 6666 复制这段内容后打开百度网盘手机App…