cesium 图层构建的那些事 （二十）
接上一篇风场文章
请求工具类
export class FetchUtil {
/**
* 将对象转成 a=1&b=2的形式
* @param obj 对象
*/
private static obj2String(obj: any = {}, arr: any = [], idx: any = 0) {
for (let item in obj) {
arr[idx++] = [item, obj[item]]
}
return new URLSearchParams(arr).toString()
}
/**
* 真正的请求
* @param url 请求地址
* @param options 请求参数
* @param method 请求方式
*/
static async commonFetcdh(url: any, options: any, method: any = 'GET') {
const searchStr = this.obj2String(options)
let initObj = {}
if (method === 'GET') { // 如果是GET请求，拼接url
if (searchStr) {
url += '?' + searchStr
}
initObj = {
method: method,
credentials: 'include'
}
} else {
initObj = {
method: method,
credentials: 'include',
headers: new Headers({
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded'
}),
body: searchStr
}
}
const res = await fetch(url, initObj);
const result = await res.json();
return result;
}
/**
* GET请求
* @param url 请求地址
* @param options 请求参数
*/
static GET(url: any, options?: any):Promise<any> {
return this.commonFetcdh(url, options, 'GET')
}
/**
* POST请求
* @param url 请求地址
* @param options 请求参数
*/
static POST(url: any, options?: any):Promise<any> {
return this.commonFetcdh(url, options, 'POST')
}
}
风场主类
```JavaScript
import {FetchUtil} from "./FetchUtil";
import {Layer} from "./Layer";
import Field from "./Field";
import WindCanvas from "./WindCanvas";
export class VectorFieldLayer extends Layer {
private option: any = {
globalAlpha: 0.9,
lineWidth: 1,
colorScale: '#fff',
velocityScale: 1 / 25,
maxAge: 90,
paths: 800,
frameRate: 20,
useCoordsDraw: true,
gpet: true
};
private _data: any;
private url: string;
private canvas: any = document.createElement('canvas')
constructor(url: string, option: any) {
super(option.name)
this.url = url;
this.setOptions(option);
this.isAdd2LoadCesium = true;
}
protected _addToMap(map: any): void {
if (this.url) {
FetchUtil.GET(this.url).then((data: any) => {
this._mountCanvas();
let ctx = this.canvas.getContext('2d')
this.cesiumObj = new WindCanvas(ctx, map, this.option);
this.setData(data);
})
} else {
throw new Error("没有填写url");
}
}
protected _removeByMap(destroy?: boolean): void {
if (this.cesiumObj) {
this.cesiumObj.clearCanvas();
}
if (this.canvas) {
this.map.container.removeChild(this.canvas)
}
this.canvas = null;
}
更多参考 https://xiaozhuanlan.com/topic/3590618724
