# leaflet-superposition

**Repository Path**: stylekong/leaflet-superposition

## Basic Information

- **Project Name**: leaflet-superposition
- **Description**: geojson图层叠加
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-05
- **Last Updated**: 2026-06-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# leaflet-superposition

`leaflet-superposition` 是一个用于 Leaflet 的 GeoJSON 图层叠加扩展，支持通过多层偏移、模糊与渐变效果创建“立体叠加”视觉效果。适用于 Polyline/Polygon 等 GeoJSON 线面数据。

## 特性

- 支持 LineString、MultiLineString、Polygon、MultiPolygon
- 可配置层级、宽度、间距、景深、模糊半径和颜色
- 支持 Leaflet SVG 渲染器
- 自动响应地图缩放，保持叠加效果一致

## 安装

如果作为本仓库开发使用，可直接引入源码：

```js
import 'leaflet'
import './src/leaflet-superposition.js'
```

如果你使用打包工具，建议将 `src/leaflet-superposition.js` 作为入口加载。

## 快速开始

```js
import L from 'leaflet'
import './src/leaflet-superposition.js'

const geojson = {
  type: 'Feature',
  properties: {},
  geometry: {
    type: 'LineString',
    coordinates: [
      [116.397, 39.907],
      [116.3975, 39.908],
      [116.398, 39.9075]
    ]
  }
}

const layer = L.superposition(geojson, {
  tier: 10,
  weight: 4,
  gap: 1,
  blurRadius: 3,
  depth: true,
  color: '#00aaff'
})

layer.addTo(map)
```

## API

### `L.superposition(geojson, options)`

创建一个可叠加的 Leaflet 图层组。

#### 参数

- `geojson` - 需要渲染的 GeoJSON 数据，支持 `Feature`、`FeatureCollection`。
- `options` - 可选配置项。

#### options 字段说明

- `tier` - 叠加层级数量，默认 `8`。
- `weight` - 基础线宽或边框宽度，默认 `3`。
- `gap` - 每层之间的像素间距，默认 `0`。
- `blurRadius` - SVG 阴影模糊半径，默认 `2`。
- `depth` - 是否启用景深效果（从颜色到黑色渐变），默认 `false`。
- `color` - 基础颜色，默认 `#0af`。
- `renderer` - 自定义 Leaflet 渲染器，例如 `L.svg()`。
- `pane` - 渲染 Pane 名称，默认为 `overlayPane`。

其他参数会传递给内部的 `L.polygon` 或 `L.polyline`，例如 `dashArray`、`opacity`、`fillOpacity` 等。

#### 返回值

返回一个 `L.LayerGroup` 实例，可直接使用 `addTo(map)` 添加到地图上。

## 支持的 GeoJSON 类型

- `LineString`
- `MultiLineString`
- `Polygon`
- `MultiPolygon`

> 目前不支持 `Point`、`MultiPoint`、`GeometryCollection` 等几何类型。

## 说明

- 叠加高度由 `(weight - 1 + gap) * tier` 决定。
- `weight - 1` 的计算用于消除相邻层之间的空隙。
- 叠加层在地图 `zoomend` 事件时自动更新位置。

## 贡献

欢迎提交 issue 和 pull request，如需增强支持更多 GeoJSON 类型、优化性能或添加单元测试。