0.0.26 • Published 12 months ago
Last release12 months ago
注意事项
- 请在页面中添加dom结构:
<div id="g-map"></div>
; - 请使用组件导出的
mapboxgl
,不要使用自行安装的 mapboxgl
; - 请先初始化地图图层:
new YMapbox()
,然后使用其它图层;
导出的图层
图层列表
export default YMapbox
export { mapboxgl, BaseLayer, GridLayer, EchartsLayer, ContourLayer, DrawLayer, MarkerLayer };
类名 | 图层名称 | 说明 |
---|
BaseLayer | 基础图层 | 抽象类,所有图层的基类,提供地图相关的共用方法 |
YMapbox | 地图 | 用于初始化地图,已经绑定地图事件 |
ContourLayer | 等值线图层 | 栅格数据为二维数组,离散点数据为json数组 |
GridLayer | 色斑图层 | 数据是一维数组 |
MarkerLayer | 打点图层 | 无 |
DrawLayer | 绘制图层 | 可以绘制点、线、面、圆、多边形、态势图等 |
EchartsLayer | echars图层 | 集成Echarts的图层 |
BaseLayer
说明
属性
属性名 | 类型 | 说明 |
---|
map | mapboxgl.Map | 实例化的map |
eventList | 事件基类 | 实例化的事件对象 |
方法
方法名 | 参数 | 说明 |
---|
init | 无 | 受保护的抽象方法,每一步操作的方法调用,尽量写在init里,逻辑清晰点 |
YMapbox
说明
- 用于初始化地图,
new YMapbox(options)
参数
方法
GridLayer
说明
- 用于绘制色斑图地图,
new GridLayer(data, initOptions, cb)
属性
属性名 | 类型 | 说明 |
---|
imageIndex | number | Setter/Getter,通过设置索引切换色斑图 |
参数
参数名 | 类型 | 默认值 | 说明 |
---|
data | dataType[][] | 必填 | 二维数组的每一项,就是一个面的格点数据;如果传入了多个面的数据,可以通过imageIndex 切换要显示色斑图 |
initOptions | Exclude<IGridOptions, "levelList">; | 必填 | 见参数详情 |
cb | ()=>void | 可选 | 渲染后的回调 |
参数详情:
type dataType = number | string
type renderType = "bitmap" | "pixel"
type refreshType = "all" | "vertex" | "color" | "index"
interface IOptions {
renderType: renderType[];
gridOptions: Exclude<IGridOptions, "levelList">;
legend: ILegend[];
invalidVal?: dataType[];
}
interface ILegend {
value: number | string
color: [number, number, number, number?]
filter?: boolean
label?: string
}
interface IGridOptions {
startLon: number;
endLon: number;
lonCount: number;
lonStep: number;
startLat: number;
endLat: number;
latCount: number;
latStep: number;
levelList?: number[]; //gridLayer不需要这个参数
altitude?: number; //高度位置
altScale?: number; //高度位置的缩放比例
}
方法
参数名 | 参数 | 默认值 | 说明 |
---|
refreshLayer | data: dataType[] | 必填 | 格点数据,一维数组;每更新一次,会缓存数据到色斑图数组的末尾,下一次通过imageIndex 可以切换色斑图 |
| options: IOptions | 必填 | 见构造方法的参数详情 |
| refreshType: Exclude<refreshType, "index">[] | all | 等于vertex 或all 时,根据起始经纬度等参数调整色斑图的范围/高度;等于color 或all 时,会根据新图例调整色斑图的颜色 |
animation | interval | 200 | 按interval 毫秒刷新一帧 |
| step | 0.1 | 按step的系数,进行插值 |
endAnimation | "pause" | "quit" | "pause" | 等于pause 时,停止动画;等于quit 时,退出动画,还原到第一张色斑图 |
type refreshType = "all" | "vertex" | "color" | "index"