使用
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 |
方法
名称 |
描述 |
值类型 |
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]每个点之间的最小间隔(单位:经度/纬度)
*/