# Leaflet

**Repository Path**: web_74/leaflet

## Basic Information

- **Project Name**: Leaflet
- **Description**: Leaflet   地图 gis 系统
https://leafletjs.cn/reference.html
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-12
- **Last Updated**: 2026-04-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Leaflet 中国地图 GIS 系统

## 项目介绍

基于 Leaflet.js 开发的 Web GIS 地图系统，集成多种中国地图服务商（高德、腾讯、百度、天地图等）的瓦片服务，提供丰富的地图展示模式和交互功能示例。同时包含多种 Leaflet 插件案例，如雷达扫描、手势控制、侧边栏、按钮控件等。

## 技术架构

### 核心技术栈
- **Leaflet.js 1.9.3**: 开源 JavaScript 地图库，轻量级且功能强大
- **ECharts 5.4.3**: 数据可视化图表库
- **天地图 WMTS 服务**: 提供多种类型的地图瓦片服务
- **高德/腾讯/百度瓦片服务**: 国内主流地图服务商
- **HTML5/CSS3**: 现代化的网页结构和样式

### 功能特性
- 🗺️ **多地图服务商**: 支持高德、腾讯、百度、天地图等多种地图
- 🗺️ **多底图切换**: 支持影像底图、矢量底图、地形晕影等多种底图
- 🏷️ **图层叠加**: 支持影像注记、矢量注记、地形注记、全球境界等叠加图层
- 📏 **比例尺控件**: 显示公制单位比例尺（米/千米）
- 🎛️ **图层控制面板**: 可视化切换底图和覆盖图层
- 🖱️ **交互操作**: 支持拖拽平移、滚轮缩放、点击事件等交互功能
- 📊 **图表集成**: 支持在弹窗中显示 ECharts 图表
- 🎨 **自定义样式**: 支持自定义标记图标、弹窗样式
- 📱 **响应式设计**: 自适应不同屏幕尺寸
- 🎯 **雷达扫描**: 地图中心雷达扫描动画效果
- 🖐️ **手势控制**: 支持触摸设备手势操作提示
- 📋 **侧边栏**: 可折叠的地图侧边栏面板
- 🔘 **快捷按钮**: 地图功能快捷操作按钮

## 项目结构

```
leaflet/
├── README.md                      # 项目说明文档（中文）
├── README.en.md                   # 项目说明文档（英文）
│
├── aMap/                          # 高德地图示例
│   ├── index.html                 # 基础地图示例
│   ├── 2.html                     # 多图层切换示例
│   ├── 3 单击.html                 # 地图点击事件示例
│   ├── 4 标记.html                 # 自定义标记示例
│   ├── 4 绘制形状.html              # 绘制多边形、圆形等形状
│   ├── 5 弹窗.html                 # 点击弹窗示例
│   ├── 6 弹窗 图表.html             # 弹窗中显示 ECharts 图表
│   ├── plug.html                  # 高德地图插件使用示例
│   └── leaflet/                   # Leaflet 本地资源
│       └── images/                # 标记图标图片
│           ├── marker-icon.png
│           ├── marker-icon-2x.png
│           └── marker-shadow.png
│
├── QQMap/                         # 腾讯地图示例
│   └── index.html                 # 腾讯地图 TMS 坐标系示例
│
├── Tmap/                          # 天地图示例
│   ├── index.html                 # 天地图基础示例
│   └── 2.html                     # 天地图多图层切换示例
│
├── ChineseTmsProviders/           # 多地图服务商示例
│   ├── assets/                    # 本地静态资源
│   │   ├── css/
│   │   │   └── leaflet.css
│   │   └── js/
│   │       ├── leaflet.js
│   │       └── leaflet.ChineseTmsProviders.min.js
│   ├── index.html                 # 导航首页
│   └── plug.html                  # 插件使用示例
│
└── plug/                          # Leaflet 插件案例集合
    ├── Leaflet.BigImage/          # 地图截图插件
    │   ├── index.html             # 示例页面
    │   └── assets/                # 插件资源文件
    │       ├── css/
    │       └── js/
    │
    ├── Leaflet.GestureHandling/   # 手势控制插件
    │   ├── index.html             # 示例页面
    │   └── assets/                # 插件资源文件
    │       ├── css/
    │       └── js/
    │
    ├── Leaflet.StyledLayerControl/# 样式化图层控制插件
    │   ├── index.html             # 示例页面
    │   └── assets/                # 插件资源文件
    │       ├── css/
    │       ├── js/
    │       └── fonts/             # 字体文件
    │
    ├── Leaflet.sidebar/           # 侧边栏插件
    │   ├── index.html             # 示例页面
    │   └── assets/                # 插件资源文件
    │       ├── css/
    │       └── js/
    │
    ├── Leaflet.EasyButton/        # 快捷按钮插件
    │   ├── index.html             # 示例页面
    │   └── assets/                # 插件资源文件
    │       ├── css/
    │       └── js/
    │
    └── Leaflet-radar-scan/        # 雷达扫描插件
        ├── index.html             # 示例页面
        └── assets/                # 插件资源文件
            ├── css/
            │   ├── leaflet.css
            │   ├── leaflet-radar.css
            │   └── images/        # 标记图标
            └── js/
                ├── leaflet.js
                └── leaflet-radar.js
```

## 快速开始

### 环境要求
- 现代浏览器（Chrome、Firefox、Safari、Edge 等）
- 网络连接（加载 CDN 资源和地图服务）

### 运行方式

#### 方式一：直接打开
直接双击打开任意 HTML 文件即可在浏览器中查看

#### 方式二：本地服务器（推荐）
```bash
# 使用 Python 启动简单服务器
python -m http.server 8080

# 或使用 Node.js 的 http-server
npx http-server -p 8080
```
然后在浏览器中访问 `http://localhost:8080`

## 目录详解

### 1. aMap - 高德地图示例

| 文件 | 功能描述 |
|------|----------|
| `index.html` | 高德地图基础示例，显示卫星影像 |
| `2.html` | 多图层切换，支持矢量/影像切换 |
| `3 单击.html` | 地图点击事件监听，获取点击坐标 |
| `4 标记.html` | 自定义标记图标，Popup 弹窗 |
| `4 绘制形状.html` | 绘制多边形、圆形、矩形等几何图形 |
| `5 弹窗.html` | 点击地图显示坐标信息弹窗 |
| `6 弹窗 图表.html` | 标记点击显示 ECharts 柱状图弹窗 |
| `plug.html` | 使用高德地图插件示例 |

### 2. QQMap - 腾讯地图示例

| 文件 | 功能描述 |
|------|----------|
| `index.html` | 腾讯地图 TMS 坐标系示例，展示 TMS 与 XYZ 坐标系区别 |

### 3. Tmap - 天地图示例

| 文件 | 功能描述 |
|------|----------|
| `index.html` | 天地图基础示例，影像底图+注记+比例尺 |
| `2.html` | 完整版示例，支持底图切换和叠加图层控制 |

### 4. ChineseTmsProviders - 多地图服务商示例

使用 `leaflet.ChineseTmsProviders` 插件集成多种地图服务商：

#### 高德地图
- `gaode-normal.html` - 矢量地图
- `gaode-satellite.html` - 卫星影像
- `gaode-satellite-annotion.html` - 卫星影像+道路注记

#### 腾讯地图
- `tencent-normal.html` - 矢量地图
- `tencent-satellite.html` - 卫星影像

#### 百度地图
- `baidu-normal.html` - 矢量地图
- `baidu-satellite.html` - 卫星影像

#### 天地图
- `tianditu-normal.html` - 矢量地图
- `tianditu-normal-annotion.html` - 矢量地图+注记
- `tianditu-satellite.html` - 卫星影像
- `tianditu-satellite-annotion.html` - 卫星影像+注记
- `tianditu-terrain.html` - 地形晕影
- `tianditu-terrain-annotion.html` - 地形晕影+注记

#### 其他
- `googlecn-normal.html` - 谷歌中国矢量地图
- `mapabc-normal.html` - MapABC 矢量地图

### 5. plug - Leaflet 插件案例集合

#### 5.1 Leaflet.BigImage - 地图截图插件

**功能说明**：将当前地图视图保存为图片

**核心特性**：
- 支持导出 PNG/JPG 格式
- 自动处理跨域问题
- 保留标记和图层

**使用方法**：
```javascript
// 创建截图控件
L.control.bigImage({
    position: 'topright'
}).addTo(map);
```

**文件位置**：`plug/Leaflet.BigImage/`

---

#### 5.2 Leaflet.GestureHandling - 手势控制插件

**功能说明**：为触摸设备添加手势操作提示

**核心特性**：
- 双指缩放提示
- 单指平移提示
- 优雅的提示动画

**使用方法**：
```javascript
// 启用手势控制
map.gestureHandling.enable();
```

**文件位置**：`plug/Leaflet.GestureHandling/`

---

#### 5.3 Leaflet.StyledLayerControl - 样式化图层控制

**功能说明**：美化的图层切换控件，支持分组和图标

**核心特性**：
- 分组显示图层
- 自定义图标
- 响应式设计
- 支持基础图层和覆盖图层

**使用方法**：
```javascript
// 创建样式化图层控制器
var baseLayers = [
    { name: "高德矢量", layer: gaodeNormal, icon: "icon-vec" },
    { name: "高德影像", layer: gaodeSatellite, icon: "icon-sat" }
];

var overlays = [
    { name: "道路注记", layer: annotionLayer, icon: "icon-road" }
];

L.Control.styledLayerControl(baseLayers, overlays).addTo(map);
```

**文件位置**：`plug/Leaflet.StyledLayerControl/`

---

#### 5.4 Leaflet.sidebar - 侧边栏插件

**功能说明**：可折叠的地图侧边栏面板

**核心特性**：
- 多标签页支持
- 响应式布局
- 平滑动画效果
- 支持自定义内容

**使用方法**：
```javascript
// 创建侧边栏
var sidebar = L.control.sidebar({
    autopan: false,
    closeButton: true,
    container: 'sidebar',
    position: 'left'
}).addTo(map);

// 打开指定面板
sidebar.open('home');
```

**文件位置**：`plug/Leaflet.sidebar/`

---

#### 5.5 Leaflet.EasyButton - 快捷按钮插件

**功能说明**：在地图上添加功能快捷按钮

**核心特性**：
- 支持 Emoji/图标
- 点击事件绑定
- 状态切换
- 按钮组支持

**使用方法**：
```javascript
// 创建快捷按钮
L.easyButton('📍', function(btn, map) {
    map.locate({setView: true});
}, "定位当前位置").addTo(map);

// 创建按钮组
L.easyBar([
    L.easyButton('➕', function() { map.zoomIn(); }),
    L.easyButton('➖', function() { map.zoomOut(); })
]).addTo(map);
```

**文件位置**：`plug/Leaflet.EasyButton/`

---

#### 5.6 Leaflet-radar-scan - 雷达扫描插件

**功能说明**：在地图中心显示雷达扫描动画效果

**核心特性**：
- 🎯 旋转扫描扇形动画
- 📡 扫描线跟随旋转
- 🎨 多主题支持（绿色/蓝色/红色）
- 📍 标记点脉冲效果
- ⚙️ 可调节扫描半径
- 🎮 完整的控制 API

**使用方法**：
```javascript
// 创建雷达扫描控件
var radar = L.control.radar({
    radius: 200,        // 雷达半径（像素）
    showCircles: true,  // 显示范围圆圈
    showGrid: true,     // 显示网格
    theme: 'green',     // 主题颜色
    autoStart: true     // 自动开始扫描
}).addTo(map);

// 控制方法
radar.start();         // 开始扫描
radar.stop();          // 停止扫描
radar.toggle();        // 切换显示/隐藏
radar.setRadius(300);  // 设置半径
radar.setTheme('blue');// 切换主题

// 标记点管理
radar.addMarker(L.latLng(39.9, 116.4));  // 添加标记
radar.clearMarkers();                     // 清除所有标记
```

**主题配置**：
| 主题 | 颜色值 | 适用场景 |
|------|--------|----------|
| `green` | 绿色 | 通用雷达效果 |
| `blue` | 蓝色 | 科技感雷达 |
| `red` | 红色 | 警戒/预警模式 |

**文件位置**：`plug/Leaflet-radar-scan/`

---

## 核心知识点

### 坐标系说明

| 坐标系 | 特点 | 使用场景 |
|--------|------|----------|
| **WGS84** | 国际标准坐标系 | GPS 设备、国际标准 |
| **GCJ-02** | 国测局坐标系（火星坐标） | 高德、腾讯、谷歌中国 |
| **BD-09** | 百度坐标系 | 百度地图 |
| **TMS** | Y轴从南向北 | 腾讯地图、部分 OSM |
| **XYZ/Slippy** | Y轴从北向南 | 高德、天地图、谷歌 |

### 瓦片服务类型

| 类型 | 代码 | 说明 |
|------|------|------|
| 矢量地图 | `vec` / `normal` | 道路、建筑、文字标注 |
| 卫星影像 | `satellite` / `img` | 卫星/航拍影像 |
| 地形晕影 | `terrain` | 地形起伏展示 |
| 注记图层 | `annotion` | 道路名、地名标注 |

### 常用 Leaflet API

```javascript
// 创建地图
var map = L.map('map').setView([纬度, 经度], 缩放级别);

// 添加瓦片图层
L.tileLayer('瓦片URL', {
    subdomains: '子域名',
    maxZoom: 最大缩放级别,
    tms: true  // TMS坐标系需要
}).addTo(map);

// 添加标记
L.marker([纬度, 经度]).addTo(map);

// 绑定弹窗
marker.bindPopup('弹窗内容').openPopup();

// 监听点击事件
map.on('click', function(e) {
    console.log(e.latlng); // 获取点击坐标
});

// 添加图层控制
L.control.layers(baseLayers, overlays).addTo(map);

// 添加比例尺
L.control.scale().addTo(map);
```

## 常见问题

### 1. 地图瓦片加载失败
- 检查网络连接
- 确认 API Key 是否有效
- 检查浏览器控制台报错信息

### 2. 腾讯地图显示异常
- 腾讯地图使用 TMS 坐标系，需要设置 `tms: true`

### 3. 标记图标不显示
- 确保 `leaflet/images/` 目录下有图标文件
- 检查图标路径是否正确

### 4. ECharts 图表不显示
- 检查 CDN 是否加载成功
- 确保图表容器有明确的宽高

### 5. 雷达扫描效果不显示
- 检查浏览器是否支持 CSS 动画
- 确认 `leaflet-radar.js` 正确加载
- 查看控制台是否有 JavaScript 错误

## 参考资料

- [Leaflet 官方文档](https://leafletjs.com/reference.html)
- [ECharts 官方文档](https://echarts.apache.org/zh/option.html)
- [天地图 API](https://www.tianditu.gov.cn/)
- [高德地图 API](https://lbs.amap.com/)
- [leaflet.ChineseTmsProviders](https://github.com/htoooth/Leaflet.ChineseTmsProviders)
- [Leaflet.BigImage](https://github.com/pasichnykvasyl/Leaflet.BigImage)
- [Leaflet.GestureHandling](https://github.com/elmarquis/Leaflet.GestureHandling)
- [Leaflet.StyledLayerControl](https://github.com/davicustodio/Leaflet.StyledLayerControl)
- [Leaflet.Sidebar](https://github.com/Turbo87/sidebar-v2)
- [Leaflet.EasyButton](https://github.com/CliffCloud/Leaflet.EasyButton)

## 许可证

本项目基于 MIT 许可证开源。

## 参与贡献

欢迎贡献代码！

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request