美文网首页
cesium 图层构建的那些事 (二十)

cesium 图层构建的那些事 (二十)

作者: haibalai | 来源:发表于2022-08-04 15:13 被阅读0次

    接上一篇风场文章

    请求工具类

    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

    相关文章

      网友评论

          本文标题:cesium 图层构建的那些事 (二十)

          本文链接:https://www.haomeiwen.com/subject/zvypwrtx.html