Leaflet在线地图滤镜工具蓝黑深蓝蓝色科技科技感

TJ_wen

已于 2025-03-19 20:05:56 修改

阅读量759

点赞数 17

文章标签：科技 html

于 2025-03-18 22:09:37 首次发布

本文链接：https://blog.csdn.net/weixin_44548693/article/details/146353567

版权

Leaflet在线地图滤镜工具

先上干货 GITEE项目地址

Leaflet在线地图滤镜工具
https://gitee.com/kstdk/leaflet-online-map-filter

需求描述

在做项目过程中，使用Leaflet引擎进行开发。
我需要呈现蓝色科技感的底图,但苦于在网上找不到有效的、满足要求的互联网在线图源。
唯一可用的百度自定义风格地图，由于坐标系原因，适用性较差。

总结了一下自己的需求：能够兼容任意来源的互联网矢量地图，将矢量地图变为蓝色科技风格。

网上找了一圈，没有合适的解决方案，不过有一些参考资料，因此进行了整合，提供给大家参考。

本项目的亮点

提供了多种在线地图图源

高德矢量地图（GCJ02坐标系）
腾讯矢量地图（GCJ02坐标系）
天地图矢量地图（EPSG:3857坐标系）注意需要配置一下Token才能显示

天地图蓝色科技滤镜效果
2. 提供了滤镜动态配置工具（tool.html）
打开tool.html后，可根据不同项目需求，灵活配置滤镜的颜色（深蓝、绿色、黄色，怎样都可以），最大化程度满足个性化需求，配置完成后，只需要点击按钮，即可一键复制filter属性，随后粘贴到代码中即刻生效
在这里插入图片描述

以下内容基本搬运至本人的GITEE项目的README文件，完整代码请移步上方的项目地址

项目介绍

这是一个基于Leaflet的在线地图滤镜工具，允许用户加载多种在线地图服务（高德、腾讯等）并应用自定义滤镜效果。主要功能包括：

支持多种在线地图源的加载和切换
- 高德矢量地图（GCJ02坐标系）
- 腾讯矢量地图（GCJ02坐标系）
- 天地图矢量地图（EPSG:3857坐标系）
提供可自定义的地图滤镜效果，包括灰度、反相、深褐色、色相旋转、饱和度、亮度和对比度等参数调整
提供深蓝色滤镜演示（demo.html）和自定义滤镜配置（tool.html）两个示例

该项目特别适合需要自定义地图视觉效果的Web应用，如蓝黑模式、科技模式、夜间模式、特殊主题风格等场景。通过简单的CSS滤镜技术，无需修改地图源数据即可实现丰富的视觉效果。

滤镜效果演示

高德地图

高德地图
高德地图_滤镜

天地图

天地图_矢量
天地图_矢量_滤镜

自定义滤镜配置

tool.html提供了自定义滤镜配置的功能。

可通过调整参数，动态灵活调节滤镜效果。

调节完成后，可一键复制，便于配色微调。
滤镜设置_深蓝
滤镜设置_自定义

示例代码

1. 地图加载

通过L.tileLayer的形式加载在线地图图层，增加 className属性进行滤镜关联

// 初始化地图
var crs = L.CRS.EPSG3857;
var map = L.map("map", {
    crs: crs,
    center: [31.1808, 121.6555],
    zoom: 11
});

// 以高德矢量地图为例，应用滤镜
var amap_vector = L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
    className: "blueLayer",  // 应用滤镜的CSS类名
    subdomains: ['1', '2', '3', '4'],
    minZoom: 1,
    maxZoom: 22,
    maxNativeZoom: 18,
    zIndex: -1
});

map.addLayer(amap_vector);

2. 滤镜样式定义

在css中填写预设的滤镜效果，即可实现加载在线地图时的滤镜动态叠加

/* 蓝色滤镜效果 */
.blueLayer {
    filter: grayscale(100%) invert(100%) sepia(15%) hue-rotate(180deg) saturate(1600%) brightness(70%) contrast(90%);
}

3. 天地图Token配置

如需加载天地图，务必在代码中，配置一下天地图Token（可在天地图官网申请）
console.tianditu.gov.cn

var tiandituToken = '';