ceisum添加风场插件

引入风场数据

执行风场

 testftn() {
      //wind-laryer运行风场
      const windOptions = {
        colorScale: [
          "rgb(36,255, 180)",
          "rgb(60,157, 194)",
          "rgb(128,205,193 )",
          "rgb(151,218,168 )",
          "rgb(198,231,181)",
          "rgb(238,247,217)",
          "rgb(255,238,159)",
          "rgb(252,217,125)",
          "rgb(255,182,100)",
          "rgb(252,150,75)",
          "rgb(250,112,52)",
          "rgb(245,64,32)",
          "rgb(237,45,28)",
          "rgb(220,24,32)",
          "rgb(180,0,35)",
        ],
        maxAge: 10,
        frameRate: 9,
        globalAlpha: 0.9,
        velocityScale: 1 / 30,
        paths: 100,
      };
      const windLaryer = new CesiumWind(windjson, windOptions);
      windLaryer.addTo(window.viewer);

      windy = new Windy(windjson, window.viewer);
    },

风场数据代码格式

加载CesiumWind.js

import WindCore, {assign, defaultOptions, Field, formatData, isArray, removeDomNode,} from 'wind-core'

class CesiumWind {
    constructor(data, options = {}) {
        this.canvas = null;
        this.wind = null;
        this.field = null;
        this.viewer = null;
        this.options = assign({}, options);
        this.pickWindOptions();

        const canvas = document.createElement('canvas');
        canvas.style.cssText =
            'position:absolute; left:0; top:0;user-select:none;pointer-events: none;';
        canvas.className = 'cesium-wind-j';
        this.canvas = canvas;

        if (data) {
            this.setData(data);
        }
    }

    addTo(viewer) {
        this.viewer = viewer;
        this.appendCanvas();
        this.render(this.canvas);
    }

    remove() {
        if (!this.viewer) {
            return;
        }
        if (this.wind) {
            this.wind.stop();
        }
        if (this.canvas) {
            removeDomNode(this.canvas);
        }
        delete this.canvas;
    }

    removeLayer() {
        this.remove();
    }

    setData(data) {
        if (data && data.checkFields && data.checkFields()) {
            this.field = data;
        } else if (isArray(data)) {
            this.field = formatData(data);
        } else {
            console.error('Illegal data');
        }

        if (this.viewer && this.canvas && this.field) {
            this.wind.updateData(this.field);
            this.appendCanvas();
            this.render(this.canvas);
        }

        return this;
    }

    getData() {
        return this.field;
    }

    getWindOptions() {
        return this.options.windOptions || {};
    }

    pickWindOptions() {
        Object.keys(defaultOptions).forEach((key) => {
            if (key in this.options) {
                if (this.options.windOptions === undefined) {
                    this.options.windOptions = {};
                }
                this.options.windOptions[key] = this.options[key];
            }
        });
    }

    getContext() {
        if (this.canvas === null) {
            return;
        }
        return this.canvas.getContext('2d');
    }

    appendCanvas() {
        if (!this.viewer || !this.canvas) {
            return;
        }
        if (document.querySelector('.cesium-wind-j')) {
            return;
        }
        this.adjustSize();
        const cesiumWidget = this.viewer.canvas.parentNode;
        cesiumWidget.appendChild(this.canvas);
    }

    adjustSize() {
        const viewer = this.viewer;
        const canvas = this.canvas;
        const {width, height} = viewer.canvas;
        const devicePixelRatio = 1;
        canvas.width = width * devicePixelRatio;
        canvas.height = height * devicePixelRatio;
        canvas.style.width = width + 'px';
        canvas.style.height = height + 'px';
    }

    render(canvas) {
        if (!this.getData() || !this.viewer) {
            return this;
        }
        const opt = this.getWindOptions();
        if (canvas && !this.wind) {
            const data = this.getData();

            const ctx = this.getContext();

            if (ctx) {
                this.wind = new WindCore(ctx, opt, data);

                this.wind.project = this.project.bind(this);
                this.wind.unproject = this.unproject.bind(this);
                this.wind.intersectsCoordinate = this.intersectsCoordinate.bind(this);
                this.wind.postrender = () => {
                };
            }
        }

        if (this.wind) {
            this.wind.prerender();
            this.wind.render();
        }

        return this;
    }

    project(coordinate) {
        const position = Cesium.Cartesian3.fromDegrees(
            coordinate[0],
            coordinate[1],
        );
        const scene = this.viewer.scene;
        const sceneCoor = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
            scene,
            position,
        );
        return [sceneCoor.x, sceneCoor.y];
    }

    unproject(pixel) {
        const viewer = this.viewer;
        const pick = new Cesium.Cartesian2(pixel[0], pixel[1]);
        const cartesian = viewer.scene.globe.pick(
            viewer.camera.getPickRay(pick),
            viewer.scene,
        );

        if (!cartesian) {
            return null;
        }

        const ellipsoid = viewer.scene.globe.ellipsoid;
        const cartographic = ellipsoid.cartesianToCartographic(cartesian);
        const lat = Cesium.Math.toDegrees(cartographic.latitude);
        const lng = Cesium.Math.toDegrees(cartographic.longitude);
        return [lng, lat];
    }

    intersectsCoordinate(coordinate) {
        const ellipsoid = Cesium.Ellipsoid.WGS84;
        const camera = this.viewer.camera;
        const occluder = new Cesium.EllipsoidalOccluder(ellipsoid, camera.position);
        const point = Cesium.Cartesian3.fromDegrees(coordinate[0], coordinate[1]);
        return occluder.isPointVisible(point);
    }
}

const WindLayer = CesiumWind;

export {Field, WindLayer};

export default CesiumWind;

一起学习ceisum,vue引入cesium,geojson数据格式，cesium展示特效，服务发布等，关注微信公众号 D6668Lei