# LeafletOnlineMapFilter

**Repository Path**: kstdk/leaflet-online-map-filter

## Basic Information

- **Project Name**: LeafletOnlineMapFilter
- **Description**: Leaflet在线地图滤镜工具，可基于任意在线矢量地图服务，配置蓝黑、科技、深色等颜色，满足个性化展示需求
- **Primary Language**: HTML
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2025-03-18
- **Last Updated**: 2026-01-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Leaflet在线地图滤镜工具

## 项目介绍

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

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

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

## 滤镜效果演示

### 高德地图

![高德地图](image//高德地图_矢量.png)
![高德地图_滤镜](image//高德地图_矢量_滤镜.png)

### 天地图

![天地图](image//天地图_矢量.png)
![天地图_滤镜](image//天地图_矢量_滤镜.png)

## 自定义滤镜配置

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

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

调节完成后，可一键复制，便于配色微调。
![滤镜设置_深蓝](image//滤镜设置_深蓝.png)
![滤镜设置_自定义](image//滤镜设置_自定义.png)

## 示例代码

### 1. 基础地图加载

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

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

// 以高德矢量地图为例，应用滤镜
var amap_vector_blue = 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_blue);
```

### 2. 滤镜样式定义

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

```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](console.tianditu.gov.cn)

```
var tiandituToken = '';
```