yleaflet v1.7.8

注意事项

1. 请在页面中添加dom结构：<div id="g-yleaflet"><div id="map"></div></div>；

2. 请把 /public/yleaflet 文件夹拷贝到项目静态文件夹下；

3. 请使用组件导出的leaflet，不要使用自行安装的leaflet；

4. 请在项目 index.html 文件中，引入 <link rel="stylesheet" href="静态文件夹路径/yleaflet/fonts/fonts.css">；

5. 请在项目中引入 yleaflet/dist/main.min.css，修改了leaflet部分默认样式；

6. 请先示例化地图图层：new YLeaflet()，然后使用其它图层；

7. public/yleaflet/data文件夹下是模拟数据，如有需要可参考；

8. src/examples 文件夹下有图层使用样例，如有需要可参考；

导出的图层

图层列表

export default YLeaflet;

export { L, BaseLayer, ContourLayer, VelocityLayer, SpotLayer, MarkerLayer, WindPlumeLayer, TyphoonLayer, DrawLayer };

BaseLayer

说明

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

属性

方法

YLeaflet

说明

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

• 已经绑定click dblclick preclick movestart move moveend zoomstart zoom zoomend unload等地图事件，通过 this.eventList.on('click', (evt: L.LeafletEvent) => void) 进行监听；可以绑定多个事件this.eventList.on('click move', (evt: L.LeafletEvent) => 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"
  | "Geoq.Normal.Map"
  | "Geoq.Normal.PurplishBlue"
  | "Geoq.Normal.Gray"
  | "Geoq.Normal.Warm"
  | "GaoDe.Normal.Map"
  | "GaoDe.Satellite.Map"
  | "GaoDe.Satellite.Annotion"
  | "Google.Normal.Map"
  | "Google.Satellite.Map"
  | "Google.Satellite.Annotion"
  | "Baidu.Normal.Map"
  | "Baidu.Satellite.Map"
  | "Baidu.Satellite.Annotion"
  | "SuperMap.China";

方法

ContourLayer

说明

• 用于绘制等值线/等值面，new ContourLayer(data, options)

• 栅格数据为二维数组，从左下角开始，离散点数据为json数组

• 默认参数如下

const defaultOptions = {
  scale: 1,
  lonLatAlias: ["lon", "lat"],
  isShowLabel: false,
  contourLineOption: {
    color: "green",
    weight: 1,
  },
  contourLabelOption: {
    font: "400 14px 微软雅黑",
    fillColor: "#000",
    strokeColor: "#fff",
  },
  undef: 999999,
}

参数

type TData {
    (number \| string)[][] \| { [name: string]: number \| string }[]
}
interface ILegend {
  value: number | string;
  color: [number, number, number, number?];
}
interface IGridOptions {
  xDelta: number;
  xEnd: number;
  xSize: number;
  xStart: number;
  yDelta: number;
  yEnd: number;
  ySize: number;
  yStart: number;
}
interface IContourLineOption {
  color?: string;
  weight?: number;
}
interface ILabelOption {
  font?: string;
  fillColor?: string;
  strokeColor?: string;
}

方法

VelocityLayer

说明

• 用于绘制流场 new VelocityLayer(uArr, vArr, options)
• 数据为u分量、v分量的二维数组，数据从左上角或者左下角开始都可以

参数

• options参数

• 流场参数

方法

GridLayer

说明

• 用于绘制色斑图，new GridLayer(data, options)
• 数据是一维数组，从左下角开始或左上角开始都可以
• 因为用到了webWorker，请给参数workerPath正确的路径

参数

interface IGridOptions {
  xDelta: number;
  xEnd: number;
  xSize: number;
  xStart: number;
  yDelta: number;
  yEnd: number;
  ySize: number;
  yStart: number;
}
interface ILegend {
  value: number | string;
  color: [number, number, number, number?];
}

方法

MarkerLayer

说明

• 用于打点显示离散点数据，new MarkerLayer(data, options[], commonOptions)
• 数据为json数组
• commonOptions是通用参数，可选，参数属性同options

参数

WindPlumeLayer

说明

• 用于绘制风杆， new WindPlumeLayer(uOrSdata, vOrDdata, options)
• 数据为u分量或者速度的二维数组、v分量或者方向的二维数组

参数

方法

ScreenShot

说明

• 框选截图，new ScreenShot(domId)

• 继承自 DrawLayer 图层

参数

方法