npm i micro-layer
import {GridLayer,Tile,getGridThinData...} from 'micro-layer'
或
import GridLayer from 'micro-layer/dist/layers/GridLayer'
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 |
名称 | 描述 | 默认值 | 值类型 |
---|---|---|---|
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 |
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 |
名称 | 描述 | 默认值 | 值类型 |
---|---|---|---|
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 |
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 |
名称 | 描述 | 默认值 | 值类型 |
---|---|---|---|
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 |
包含天地图,谷歌地图,高德地图,智图的瓦片图
名称 | 描述 | 默认值 | 值类型 |
---|---|---|---|
el | 是否挂载到单独的某个html元素上 | HTMLElement | |
className | 类名 | string | |
pane | 选择加入的地图层级,默认overlayPane | 参考leaflet | |
clip | 裁剪,需提供geoJson类型数组 | clip | FeatureCollection,null |
moveType | 图层跟随地图移动类型 | moveend | move,moveend |
名称 | 描述 | 默认值 | 值类型 |
---|---|---|---|
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 |
名称 | 描述 | 默认值 | 值类型 |
---|---|---|---|
url | 瓦片图地址 | string | |
maxLevel | 瓦片图可缩放最大层级 | 7 | number |
opacity | 透明度 | 1 | number |
其他 | leaflet默认瓦片层配置 |
/**
- 以存放格点的方式抽稀数组,适合大量数据的抽稀
- @param points 要抽稀的点数组
- @param interval [number,number]每个点之间的最小间隔(单位:经度/纬度) */
/**
- 根据点之间的间隔进行抽稀,对密集的点抽稀,保持点的均匀分布。
- @param points 要抽稀的点数组
- @param interval [number,number]每个点之间的最小间隔(单位:经度/纬度) */