1.3.5 • Published 2 years ago
micro-layer v1.3.5
使用
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,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,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 要抽稀的点数组
- @param interval number,number每个点之间的最小间隔(单位:经度/纬度) */
抽稀方法2 getProcessPoints
/**
- 根据点之间的间隔进行抽稀,对密集的点抽稀,保持点的均匀分布。
- @param points 要抽稀的点数组
- @param interval number,number每个点之间的最小间隔(单位:经度/纬度) */
1.3.5
2 years ago
1.3.4
2 years ago
1.3.3
2 years ago
1.3.2
2 years ago
1.3.1
2 years ago
1.3.0
2 years ago
1.2.0
3 years ago
1.2.2
3 years ago
1.2.1
3 years ago
1.1.1
3 years ago
1.1.0
3 years ago
1.0.3-test-3
3 years ago
1.0.3-test-2
3 years ago
1.0.3-test-1
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago