使用

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]每个点之间的最小间隔(单位:经度/纬度) */