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