# micro-layer

> npm i micro-layer

Latest version **1.3.5** (published 2022-02-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install micro-layer
pnpm add micro-layer
yarn add micro-layer
bun add micro-layer
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.5 |
| Published | 2022-02-22 |
| First published | 2021-09-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 204.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | ZJS |
| Maintainers | zjs_olive |
| Keywords | leaflet, 等值线, 等值面, 离散点, 风向标, 站点 |

## Links

- npm: https://www.npmjs.com/package/micro-layer
- Repository: https://github.com/ZJS248/micro-layer
- Homepage: https://github.com/ZJS248/micro-layer#readme
- Issues: https://github.com/ZJS248/micro-layer/issues
- npm.io page: https://npm.io/package/micro-layer

## Dependencies (9)

- [d3-geo](https://npm.io/package/d3-geo.md) ^3.0.1
- [events](https://npm.io/package/events.md) ^3.3.0
- [leaflet](https://npm.io/package/leaflet.md) ^1.7.1
- [d3-shape](https://npm.io/package/d3-shape.md) ^3.0.1
- [@turf/bbox](https://npm.io/package/@turf/bbox.md) ^6.5.0
- [d3-contour](https://npm.io/package/d3-contour.md) ^3.0.1
- [@types/leaflet](https://npm.io/package/@types/leaflet.md) ^1.7.4
- [@babel/preset-typescript](https://npm.io/package/@babel/preset-typescript.md) ^7.12.7
- [@turf/boolean-point-in-polygon](https://npm.io/package/@turf/boolean-point-in-polygon.md) ^6.5.0

## Recent versions

- 1.3.5 (latest) — 2022-02-22
- 1.3.3 — 2022-01-11
- 1.3.1 — 2021-12-21
- 1.3.0 — 2021-12-21
- 1.2.2 — 2021-11-05
- 1.2.1 — 2021-10-28
- 1.2.0 — 2021-10-28
- 1.1.1 — 2021-09-17
- 1.1.0 — 2021-09-07
- 1.0.3-test-3 — 2021-09-07
- 1.0.3-test-2 — 2021-09-07
- 1.0.3-test-1 — 2021-09-07
- 1.0.3 — 2021-09-07
- 1.0.2 — 2021-09-07
- 1.0.1 — 2021-09-07
- … 1 more at https://npm.io/package/micro-layer/versions

## README

# 使用

    npm i micro-layer

# 引入

	import {GridLayer,Tile,getGridThinData...} from 'micro-layer'
    或
    import GridLayer from 'micro-layer/dist/layers/GridLayer'

## 色斑图 IsoLayer

	const isoLayer = new IsoLayer(map,option)
    isoLayer.setData(...)
    isoLayer.Draw()
    ...
 
### 初始化时可配置项

|  名称 | 描述  | 默认值  | 值类型  |
| ------------ | ------------ | ------------ | ------------ |
| el  | 是否挂载到单独的某个html元素上  |   | HTMLElement  |
| className  | 类名  |   | string  |
| pane  | 选择加入的地图层级，默认overlayPane  |   | 参考leaflet  |
| clip  | 裁剪，需提供geoJson类型数组  | clip |  FeatureCollection,null  |
| moveType  | 色斑图跟随地图移动类型  |moveend   | move,moveend  |

### setOption可配置项

|  名称 | 描述  | 默认值  | 值类型  |
| ------------ | ------------ | ------------ | ------------ |
| opacity  | 透明度  | 0.5  | number  |
| stroke  | 是否描边(等值线)  | true  | boolean  |
| lineWidth  | 描边线宽  | 2  | number  |
| strokeOpacity |  描边透明度，会覆盖默认透明度 |   | number  |
| dash  | 描边时绘制虚线间隔数组  | false  | boolean  |
| fill  | 是否填充(色斑图)  |  true | boolean  |
| fillOpacity  | 填充透明度，会覆盖默认透明度  |   | boolean  |
| lineType  | 线段类型,可选曲线curve或直线straight默认曲线,rect可绘制雷达图 |curve   | curve,straight,rect  |
| clipType  | 裁剪类型，精细化裁剪或模糊裁剪  | fuzzy  |  fine，fuzzy |
| smooth  | 设置是否在生成等值线时使用线性插值,重新设置setData后生效  | true  | boolean  |

### 方法

|  名称 | 描述    | 值类型  |
| ------------ | ------------ | ------------ |
| setOption  | 重设canvas的各项参数  | Option  |
| setData  | 设置图层数据  | data: Array<number>,property: {  value: number[];color: string[]; lonStep: number;latStep: number; size: [number, number]; border: Border;}  |
| Draw  | 绘制  |   |
| setClip  | 设置/重设裁剪范围  |  FeatureCollection , null  |
| clear  | 清空绘制内容  |    |
| destroy  | 销毁图层  |   |
| on  | 监听点击事件  | type:click,callback:function  |

## 格点图层 GridLayer

	const gridLayer = new GridLayer(map,option)
    gridLayer.setData(...)
    gridLayer.Draw()
    ...

### 初始化时可配置项

|  名称 | 描述  | 默认值  | 值类型  |
| ------------ | ------------ | ------------ | ------------ |
| el  | 是否挂载到单独的某个html元素上  |   | HTMLElement  |
| className  | 类名  |   | string  |
| pane  | 选择加入的地图层级，默认overlayPane  |   | 参考leaflet  |
| clip  | 裁剪，需提供geoJson类型数组  | clip |  FeatureCollection,null  |
| moveType  | 色斑图跟随地图移动类型  |moveend   | move,moveend  |

### setOption可配置项

|  名称 | 描述  | 默认值  | 值类型  |
| ------------ | ------------ | ------------ | ------------ |
| opacity  | 透明度  | 0.5  | number  |
| color  | 格点字体颜色,设为auto并有图例时会随着图例变化  | black  | string  |
| xInterval |  格点字体间的最小间距，与格点的抽稀相关(单位:像素) | 50  | number  |
| yInterval  | 格点字体间的最小间距，与格点的抽稀相关(单位:像素)  |  50   | number  |
| format  | 格点数据格式化 |  Math.floor | (value: number) => string  |
| context  | 自定义context的部分参数 需要返回context实例 |   | function  |
| showRect  | 是否展示格点方块 | false  | boolean  |
| rectColor  | 格点方块颜色 | black  | string  |
| rectOpacity  | 格点方块透明度  | 0.2  |  number |

### 方法

|  名称 | 描述    | 值类型  |
| ------------ | ------------ | ------------ |
| setOption  | 重设canvas的各项参数  | Option  |
| setData  | 设置图层数据  | data: Array<number>,property: {  value: number[];color: string[]; lonStep: number;latStep: number; size: [number, number]; border: Border;}  |
| Draw  | 绘制  |   |
| setClip  | 设置/重设裁剪范围  |  FeatureCollection , null  |
| clear  | 清空绘制内容  |    |
| destroy  | 销毁图层  |   |
| on  | 监听点击事件  | type:click,callback:function  |

## 2d风向标图层 WindFeatherLayer2D

	const featherLayer = new featherLayer(map,option)
    featherLayer.setData(...)
    featherLayer.Draw()
    ...

### 初始化时可配置项

|  名称 | 描述  | 默认值  | 值类型  |
| ------------ | ------------ | ------------ | ------------ |
| el  | 是否挂载到单独的某个html元素上  |   | HTMLElement  |
| className  | 类名  |   | string  |
| pane  | 选择加入的地图层级，默认overlayPane  |   | 参考leaflet  |
| clip  | 裁剪，需提供geoJson类型数组  | clip |  FeatureCollection,null  |
| moveType  | 色斑图跟随地图移动类型  |moveend   | move,moveend  |

### setOption可配置项

|  名称 | 描述  | 默认值  | 值类型  |
| ------------ | ------------ | ------------ | ------------ |
| color  | 风向标颜色 | black  | string  |
| interval |  风向标之间的最小间距，与格点的抽稀相关(单位:像素) | [30,30]  | [number, number]  |
| size  | 风向标大小-宽高(单位:像素),修改后需重新setData  |  [30,30]   | number  |
| thinout  | 是否进行抽稀,默认true,为数字时表示地图层级小于该数字时才抽稀 ,修改后需重新setData |  true |
| thinType  | 点的抽稀方法,0使用 getProcessPoints抽稀，1使用getGridThinData抽稀 |  0 |0,1  |

### 方法

|  名称 | 描述    | 值类型  |
| ------------ | ------------ | ------------ |
| setOption  | 重设canvas的各项参数  | Option  |
| setData  | 设置图层数据  | data: {  s: number; d: number;size?: [number, number]; color?: string;}[] ,data: {  u: number; v: number;size?: [number, number]; color?: string;}[] |
| Draw  | 绘制  |   |
| setClip  | 设置/重设裁剪范围  |  FeatureCollection , null  |
| clear  | 清空绘制内容  |    |
| destroy  | 销毁图层  |   |
| on  | 监听点击事件  | type:click,callback:function  |

## 瓦片图层集合 Tile

包含天地图，谷歌地图，高德地图，智图的瓦片图

## 点图层 SimplePoints

|  名称 | 描述  | 默认值  | 值类型  |
| ------------ | ------------ | ------------ | ------------ |
| el  | 是否挂载到单独的某个html元素上  |   | HTMLElement  |
| className  | 类名  |   | string  |
| pane  | 选择加入的地图层级，默认overlayPane  |   | 参考leaflet  |
| clip  | 裁剪，需提供geoJson类型数组  | clip |  FeatureCollection,null  |
| moveType  | 图层跟随地图移动类型  |moveend   | move,moveend  |

### setOption可配置项

|  名称 | 描述  | 默认值  | 值类型  |
| ------------ | ------------ | ------------ | ------------ |
| size  |点-宽高  |  [30,30]   | [number,number]  |
| color  | 点颜色 | black  | string  |
| clipType |  裁剪类型，精细化裁剪或模糊裁剪,默认模糊 | fuzzy  | "fine" , "fuzzy"  |
| stroke  |是否描边  |  false   | boolean  |
| strokeWidth  |描边宽  |  1   | number  |
| strokeColor  |描边颜色  |  black   | string  |
| interval  |点之间的最小间距  |  [30,30]   | [number,number]  |
| thinout  | 是否进行抽稀,为数字时表示地图层级小于该数字时才抽稀 |  true |boolean,number
| thinType  | 点的抽稀方法,0使用 getProcessPoints抽稀，1使用getGridThinData抽稀 |  0 |0,1  |
| type  | 描点类型'rect' , 'circle' |  circle |"rect" , "circle"  |
| fillText  | 是否绘制文字,文字内容取数组中value字段 |  true |boolean |
| fontSize  | 文字大小 | 12 |number  |
| fontColor  | 文字颜色 |auto |string  |
| format  | 对点每个值进行格式化操作 |  |(v:number)=>string  |
| img  | 自定义点形状,需要能被context.drawImage解析,不受该点size以外其他参数的影响 |  |CanvasImageSource | ((v?: number | string) => CanvasImageSource)  |

### 方法

|  名称 | 描述  | 值类型  |  
| ------------ | ------------ | ------------ |
| setOption  | 重设canvas的各项参数  | Option  |
| setData  | 设置图层数据  | data: {  s: number; d: number;size?: [number, number]; color?: string;}[] ,data: {  u: number; v: number;size?: [number, number]; color?: string;}[] |
| Draw  | 绘制  |   |
| setClip  | 设置/重设裁剪范围  |  FeatureCollection , null  |
| clear  | 清空绘制内容  |    |
| destroy  | 销毁图层  |   |
| on  | 监听点击事件  | type:click,callback:function  |

### 方法

参考其他
Point值类型
`{
     lat: number;
        lng: number;
       value?: number; //点的值,与color中的颜色对应
       color?: string;
       size?: number[]; //点-宽高,默认[30,30]//
       type?: PointType; //点类型
    }`

### 方法

|  名称 | 描述  | 值类型  |
| ------------ | ------------ | ------------ |
| setOption  | 重设canvas的各项参数  | Option  |
| setData  | 设置图层数据  | Point[]   |
| Draw  | 绘制  |  |
| addPoint  | 不使用Draw单独添加一个点 不建议与抽稀混用  | Point  |
| removePoint  | 不使用clear单独移除一个点  | Point |
| setClip  | 设置/重设裁剪范围  |  FeatureCollection , null  |
| DrawClip  | 绘制裁剪区  |   |
| clear  | 清空绘制内容  |    |
| destroy  | 销毁图层  |   |
| on  | 监听点击事件  | type:click,callback:function  |

## 瓦片图层 LevelTile

|  名称 | 描述  | 默认值  | 值类型  |
| ------------ | ------------ | ------------ | ------------ |
| url  | 瓦片图地址  |   | string  |
| maxLevel  | 瓦片图可缩放最大层级  |  7 | number  |
| opacity  | 透明度  |  1 | number  |
| 其他  | leaflet默认瓦片层配置  |   |   ||

## 抽稀方法1 getGridThinData

/**

* 以存放格点的方式抽稀数组,适合大量数据的抽稀
* @param points <T extends LatLng>要抽稀的点数组
* @param interval [number,number]每个点之间的最小间隔(单位:经度/纬度)
*/

## 抽稀方法2 getProcessPoints

/**

* 根据点之间的间隔进行抽稀,对密集的点抽稀，保持点的均匀分布。
* @param points <T extends LatLng>要抽稀的点数组
* @param interval [number,number]每个点之间的最小间隔(单位:经度/纬度)
*/

---
_Source: https://npm.io/package/micro-layer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._