气象数据渲染

地图引擎为MapLibre GL

注意事项

1. 请通过 npm install wlxmblayer进行安装;
2. 请在页面中添加dom结构：<div id="g-map"></div>；可以自定义id名称，默认为'g-map';
3. 请先初始化地图：new SMap()，然后使用其它图层；

导出的图层

export default SMap

export { mapboxgl, BaseLayer, GridDataLayer, GridValueLayer, MarkerLayer, DrawLayer, WindArrowLayer, FormatVelocityData, VelocityLayer, TyphoonLayer, EchartsLayer, RoamLayer, GridFluctuationLayer, utils, earcut };

| 类名 | 名称 | 说明 | | :------------: | :--------: | ---------------------------------------------- | | SMap | 地图 | 用于初始化地图 | | BaseLayer | 基础图层 | 抽象类，所有图层的基类，提供地图相关的共用方法 | | GridDataLayer | 格点填色图层 | 有剖面等功能 | | GridValueLayer | 格点填值图层 | | | MarkerLayer | 离散点打点 | 有聚合功能 | | DrawLayer | 绘制图层 | 绘制点、线、面、圆、多边形、态势图等 | | WindArrowLayer | 风矢量图层 | 绘制风羽、箭头 | | VelocityLayer | 流场图层 | 绘制流场 | | FormatVelocityData | 处理流场数据 | | | TyphoonLayer | 台风图层 | 绘制台风路径、风圈 | | EchartsLayer | echars图层 | 集成Echarts | | RoamLayer | 漫游图层 | 显示行驶轨迹 | | GridFluctuationLayer | 挤压 | 需要优化 | | utils | 工具包 | 计算图例、请求灰度图等 | | earcut | 第三方库 | 用于扁平数组、计算三角面 |

SMap

说明

• 用于初始化地图，new SMap(options)

• 继承自BaseLayer

• 示例

  new SMap({
    mapType: ['TianDiTu.Normal.Map'],
    load: (map: mapboxgl.Map) => {
      console.log('地图加载完成');
    }
  })

参数

划重点，继承自MapboxOptions

| 参数名 | 类型 | 默认值 | 说明 | | ---- | :--- | ---- | ---- | |container | string | g-map | 地图dom元素的id | |mapType | mapType[] | ["TianDiTu.Normal.Map", "windy", "TianDiTu.Normal.Annotion"] | 1、加载的地图服务；2、数组为空时，不加载地图； 3、数组要素的顺序，即地图服务的加载顺序| | tdtTk | string | 非必填 | 天地图的key | | isDem | boolean | false | 是否显示地形 | | isShowClickResult | boolean | false | 添加地图点击事件，console.log 点击位置的经纬度 | | load | (map: mapboxgl.Map)=>void; | 非必填 | 地图加载完成后的回调 |

type mapType =
  //天地图电子地图
  | "TianDiTu.Normal.Map"
  //天地图电子地图标注
  | "TianDiTu.Normal.Annotion"
  //天地图等经纬度电子地图
  | "TianDiTu.Normal_Lonlat.Map"
  //天地图等经纬度电子地图
  | "TianDiTu.Normal_Lonlat.Annotion"
  //天地图卫星地图
  | "TianDiTu.Satellite.Map"
  //天地图卫星地图标注
  | "TianDiTu.Satellite.Annotion"
  //天地图地形图
  | "TianDiTu.Terrain.Map"
  //天地图地形图标注
  | "TianDiTu.Terrain.Annotion"
  //海图
  | "SeaMap";
  //区域边界
  | "windy";

方法

| 方法名 | 参数 | 说明 | | ---- | ---- | ---- | | changeMap | type: mapType[] | 切换地图 | | addMouseMoveShowLonlat | divId: string | 鼠标滑动时，显示经纬度 | | loadDem | exaggeration: number | 添加地形，参数为夸张系数，默认为 1 | | delDem | 无 | 删除地形 | | getCenter | 无 | 获取当前视图的中心点及视角信息 |

BaseLayer

说明

• 抽象类，所有图层的基类，提供地图相关的共用方法

属性

| 属性名 | 类型 | 说明 | | ---- | ---- | ---- | | map | mapboxgl.Map | 实例化的地图 | | customLayerId | string | 自定义图层的id，色斑图、剖面等用的该图层 | | mapOptions | IOptions | 实例化组件时的参数 |

方法

| 方法名 | 参数 | 说明 | | ---- | ---- | ---- | | bindMap | mapId?: string | 绑定指定的mapId到地图实例，扩展图层时必须调用 | | createId | type: string | 生成id | | getLayer | 无 | 获取当前图层 | | removeLayer | id?: string | 默认为当前图层的id | | loadImageArr | urlArr: string[] | 请求图片，返回 imgBitmap[] | | getDataByImages | urlArr: string[], replace?: Map<number, number>,xOffset = 1,yOffset = 1,scale = 1,isReverse = false | 获取灰度图的数据 |

 urlArr: string[] //灰度图的地址
 replace?: Map<number, number> //替换无效值
 xOffset = 1, //经度方向数据抽稀间隔
 yOffset = 1, //纬度方向数据抽稀间隔
 scale = 1, //数据缩放比例
 isReverse = false //是否上下反转

GridDataLayer

说明

• 用于绘制色斑图，实现多高度层、雷达组合反射率、剖面等效果

• new GridDataLayer(data, initOptions, cb)

• 继承自BaseLayer

参数

| 参数名 | 类型 | 默认值 | 说明 | | ----------- | :------------------------------------ | ------ | ------------------------------------------------------------ | | data | ISourceData[] | 必填 | 二维数组的每一项，就是一个高度层的数据 | | initOptions | IGridOptions | 必填 | 见参数详情 | | cb | ICallback | 可选 | 渲染后的回调 |

参数详情：
type ISourceData = number[][]

interface IOptions {
  renderType: renderType[]; //渲染类型
  gridOptions: IGridOptions; //数据经纬度范围
  legend: ILegend[]; //图例
  invalidVal?: number[]; // 无效值
  range?: [number, number]; // 小于range[0]，大于range[1]的数据，渲染为透明
  levelsLabel?: string[]; //多层数据时，显示的文本，默认取 gridOptions.levels 的值
  pane?: number; // 图层的层级，pane值大的，后渲染
  fontColor?: string; //文本的颜色
  fontSize?: string; //文本的大小
  shadowColor?: string; // 文本的阴影颜色 
  shadowBlur?: number; // 文本的阴影范围
  clipLonlat?: number[][]; // 根据给定的经纬度，对色斑图进行裁剪
}

type renderType = "bitmap" | "pixel" | "contour" //格点填色、颜色渐变、等值面

interface IGridOptions {
  startLon: number; //左下角的经度
  startLat: number;//左下角的纬度
  lonCount: number; //经度的栅格数量
  lonStep: number;//经度的步长
  endLon: number; //右上角的经度
  endLat: number;//右上角的纬度
  latCount: number;//纬度的栅格数量
  latStep: number;//纬度的步长
  levels?: number[]; //三维数据的高度
  altitude?: number; //高度
  altScale?: number; //高度的缩放比例
}

//按小于等于该值进行填色
interface ILegend {
  value: number
  color: [number, number, number, number?]
}

interface ICallback {
  render?: (status: string) => void;
  animation?: (status: string) => void;
}

属性

| 属性名 | 类型 | 说明 | | --------- | -------- | ---------------------------------------------- | | gridIndex | number | 多层数据，通过设置索引切换色斑图 | | setPane | number | 设置层级，层级大的，后渲染 |

方法

| 方法名 | 参数 | 说明 | | ---- | ---- | ---- | | addTo | mapId?: string | 绑定指定的mapId到地图实例 | | getDataByLonlat | lon: number, lat: number, heightIndex = 0 | 根据经纬度和高度层获取数据 | | addSection | type: sectionType = "cross" | 剖面渲染，有任意点、十字剖、旋转剖三种 | | removeSection | 无 | 删除剖面 | | addMultipleHeight | 无 | 多高度层渲染 | | removeMultipleHeight | 无 | 删除多高度层渲染 | | addAreaMultipleHeight | 无 | 任意区域渲染 | | removeAreaMultipleHeight | 无 | 删除任意区域渲染 | | updateRenderType | val: renderType[] | 更新渲染方式 | | updateRange | range: [number, number] | 更新渲染的数据范围 | | updateData | data: ISourceData | 更新数据 | | updateAnimationData | data: number[], interval = 100, step = 0.1 | 以播放的形式更新数据 | | animation | interval = 100, step = 0.1, isStop = true, cb?: () => void | 动画播放 | | stopAnimation | type: animationType = "pause" | 停止/退出播放 | | removeLayer | 无 | 删除图层 |

type sectionType = "morePoint" | "rotate" | "cross";
type refreshType = "all" | "vertex" | "color" | "index"
type renderType = "bitmap" | "bitmapNoLinear" | "pixel" | "contour"; // bitmapNoLinear，不渐变的格点填色
type animationType = "pause" | "quit"

GridValueLayer

说明

• 格点填值

• new GridValueLayer(data: number[][], initOptions: IGridValueOptions)

• 继承自BaseLayer

参数

| 参数名 | 类型 | 默认值 | 说明 | | ----------- | :------------------------------------ | ------ | ------------------------------------------------------------ | | data | number[][] | 必填 | 二维数组的每一项，就是一个高度层的数据 | | initOptions | IGridOptions | 必填 | 见参数详情 |

参数详情：
type ISourceData = number[][]

interface IGridValueOptions {
  gridOptions: IGridOptions; // 经纬度范围
  invalidVal?: number[]; //无效值
  legend?: ILegend[]; // 图例
  offset?: number; //间距，默认50px
  fontColor?: string; //未给图例时的字体颜色，默认白色
  fontSize?: string; //字体大小，默认 14px
  shadowColor?: string; //字体阴影，默认 '#ccc'
  shadowBlur?: number; //阴影，默认 2px
}

//按小于等于该值进行填色
interface ILegend {
  value: number
  color: [number, number, number, number?]
}

方法

| 方法名 | 参数 | 默认值 | 说明 | | ------------ | ------------------- | --------- | ------------------------------------------------------------ | | addTo | mapId?: string | 无 | 绑定指定的mapId到地图实例 | updateData | data: number[][] | 无 | 更新数据 | | updateOffset | offset: number | 无 | 更新数据间隔 | | setStyle | style: IGridValueStyle | 无 | 修改文本样式 | | removeLayer | 无 | 无 | 删除图层 |

参数详情：
interface IGridValueStyle {
  fontColor?: string;
  fontSize?: string;
  shadowColor?: string;
  shadowBlur?: number;
}

WindArrowLayer

说明

• 渲染风羽或者箭头

• new WindArrowLayer(data: number[][], initOptions: IOptions)

• 继承自BaseLayer

参数

| 参数名 | 类型 | 默认值 | 说明 | | ----------- | :------------------------------------ | ------ | ------------------------------------------------------------ | | data | number[][] | 必填 | 二维数组的每一项，就是一个高度层的数据 | | initOptions | IOptions | 必填 | 见参数详情 |

参数详情：
interface IOptions extends IGridValueOptions {
  dataType: "uv" | "sd"; //数据类型，uv风或者风速/风向
  isShowText?: boolean; //是否显示数值
  isArrow?: boolean; // 是否按箭头渲染
  windIconBitmap?: ImageBitmap; // 自定义图标
  windPlumePath?: string; //自定义风羽图标的地址
}

方法

| 方法名 | 参数 | 默认值 | 说明 | | ------------ | ------------------- | --------- | ------------------------------------------------------------ | | addTo | mapId?: string | 无 | 绑定指定的mapId到地图实例 | updateData | data: number[][], dataType = "uv" | 无 | 更新数据 | | updateOffset | offset: number | 无 | 更新数据间隔 | | setStyle | style: IStyle | 无 | 修改样式 | | removeLayer | 无 | 无 | 删除图层 |

参数详情：
interface IStyle { legend?: ILegend[]; fontSize?: string }

interface IGridValueStyle {
  fontColor?: string;
  fontSize?: string;
  shadowColor?: string;
  shadowBlur?: number;
}

MarkerLayer

说明

• 渲染离散数据

• new MarkerLayer(data: { [name: string]: any }[], initOptions: IOptions)

• 继承自BaseLayer

参数

| 参数名 | 类型 | 默认值 | 说明 | | ----------- | :------------------------------------ | ------ | ---------------- | | data | { [name: string]: any }[] | 必填 | | | initOptions | MarkerIOptions[] | 必填 | 见参数详情 | | commonOptions | Partial<MarkerIOptions> | 非必填 | 见参数详情 |

参数详情：
interface MarkerIOptions {
  type: 'image' | 'text' | 'windPlume'
  field: string //数据字段的名称
  value?: number | string // 数据值等于该值时，进行渲染
  isCluster?: boolean //是否聚合
  clusterOptions?: {
    clusterRadius?: number // 聚合半径
    clusterMaxZoom?: number // 最大聚合缩放级别
    clusterMinPoints?: number // 最小聚合点数
    clusterProperties?: object  // 自定义聚合属性
  }
  lonLatAlias?: string[] //经纬度别名
  legend?: ILegend[] // 图例，控制显示文本的颜色
  wd?: string //风速的别名
  ws?: string // 风向的别名
  url?: string // 渲染类型为 image 时的 图片路径
  acUrl?: string // 渲染类型为 image，选中时的图片路径
  iconSize?: [number, number] // 渲染类型为 image 或者 text 时的大小
  iconAnchor?: [number, number] // 渲染类型为 image 或者 text 时的偏移
  className?: string // 类名，项目需要支持 tailwind.css
  invalidVal?: (string | number)[] // 文本的无效值
  suffix?: string //文本的前缀
  suffixClassName?: string //文本的前缀的类名
  prefix?: string //文本的后缀
  prefixClassName?: string // 文本的后缀的类名
  windPlumePath?: string // 渲染类型为 windPlume, 风羽的地址
  clickCallback?: (marker: Marker, props: { [name: string]: any }[]) => void 
  enterCallback?: (marker: Marker, props: { [name: string]: any }[]) => void 
  leaveCallback?: (marker: Marker, props: { [name: string]: any }[]) => void 
  moveCallback?: (marker: Marker, props: { [name: string]: any }[]) => void 
}

方法

| 方法名 | 参数 | 默认值 | 说明 | | ------------ | ------------------- | --------- | ------------------------------------------------------------ | | addTo | mapId?: string | 无 | 绑定指定的mapId到地图实例 | updateMarkerActive | activeList: Marker[], unActiveList?: Marker[] | 无 | 更新marker的选中状态 | | refresh | data: { [name: string]: any }[] | 无 | 更新数据 | | removeLayer | 无 | 无 | 删除图层 |

参数详情：
activeList: 选中状态的marker
unActiveList: 清除选中状态的marker

interface IStyle { legend?: ILegend[]; fontSize?: string }

interface IGridValueStyle {
  fontColor?: string;
  fontSize?: string;
  shadowColor?: string;
  shadowBlur?: number;
}

DrawLayer

说明

• 绘制矩形、多边形等

• new DrawLayer(cb?: ICallback, drawStyleOptions?: Partial<DrawStyleOptionsType>)

• 继承自BaseLayer

参数

| 参数名 | 类型 | 默认值 | 说明 | | ----------- | :------------------------------------ | ------ | ---------------- | | cb | ICallback | 非必填 | 见参数详情 | | drawStyleOptions | Partial<DrawStyleOptionsType> | 非必填 | 见参数详情 |

参数详情：

interface ICallback {
  drawOver?: (feature: GeoJSON.Feature) => void; //绘制完成后的回调
  analysisOver?: (feature: GeoJSON.Feature | null) => void; //空间分析完成后的回调
  actionable?: (e: any) => void; // 切换绘制方式时的回调
}

interface DrawStyleOptionsType {
  isMeasure?: boolean // 是否开启测量
  textColor?: string //字体颜色
  fontSize?: number //字体大小
  iconImage?: HTMLImageElement | string //可以为imagedom或者地址字符串
  iconSize?: number //icon大小
  lineWidth?: number //线条粗细
  lineColor?: string //线条颜色
  fillColor?: string //填充面颜色
  fillOpacity?: number //填充面透明度
}

方法

| 方法名 | 参数 | 默认值 | 说明 | | ------------ | ------------------- | --------- | ------------------------------------------------------------ | | addTo | mapId?: string | 无 | 绑定指定的mapId到地图实例 | draw | mode: IDrawType, isMore = true | 无 | 绘制，isMore为ture会连续绘制 | | colseDraw | 无 | 无 | 结束绘制 | | clear | ids?: string[] | 无 | 清除绘制，不传参时，清除所有 | | removeLayer | 无 | 无 | 删除图层 |

参数详情：
type IDrawType =
  | "draw_line_string"
  | "draw_polygon"
  | "draw_rectangle"

GridFluctuationLayer

说明

• 用于绘制挤压色斑图，new GridFluctuationLayer(data, initOptions, cb)

• 继承自BaseLayer

参数

| 参数名 | 类型 | 默认值 | 说明 | | ----------- | :------------------------------------ | ------ | ------------------------------------------------------------ | | data | ISourceData[] | 必填 | 二维数组的每一项，就是一个栅格面的数据 | | initOptions | Exclude<IGridOptions, "levelList">; | 必填 | 见参数详情 | | cb | ()=>void | 可选 | 渲染后的回调 |

参数详情：
type ISourceData = number[][]

interface IOptions {
  gridOptions: Exclude<IGridOptions, "levelList">; //栅格数据的参数
  legend: ILegend[]; //图例
  invalidVal?: number[]; //无效数据
  range?: [number, number];//渲染该范围内的数据
}

interface IGridOptions {
  startLon: number; //左下角的经度
  startLat: number;//左下角的纬度
  lonCount: number; //经度的栅格数量
  lonStep: number;//经度的步长
  endLon: number; //右上角的经度
  endLat: number;//右上角的纬度
  latCount: number;//纬度的栅格数量
  latStep: number;//纬度的步长
  levelList?: number[]; //gridLayer不需要这个参数
  altitude?: number; //高度位置
  altScale?: number; //高度位置的缩放比例
}

//按小于等于该值进行填色
interface ILegend {
  value: number
  color: [number, number, number, number?]
}

属性

| 属性名 | 类型 | 说明 | | --------- | -------- | ---------------------------------------------- | | gridIndex | number | 如果传入了多个面的数据，通过设置索引切换色斑图 |

方法

| 方法名 | 参数 | 默认值 | 说明 | | ------------ | ------------------- | --------- | ------------------------------------------------------------ | | animation | interval | 200 | 按interval毫秒刷新一帧 | | | step | 0.1 | 按step的系数，进行插值 | | endAnimation | "pause" | "quit" | "pause" | 等于pause时，停止动画；等于quit时，退出动画，展示第一张色斑图 |

EchartsLayer

说明

• 集成了ECharts，new EchartsLayer(option)

• 继承自BaseLayer

参数

| 参数名 | 类型 | 默认值 | 说明 | | ------ | :--------- | ------ | ------------------------- | | option | ECOption | 必填 | 和Echarts的opions一致 |