windy 风场

public/static/Windy.js

@@ -0,0 +1,372 @@
+/****
+*风场类
+****/
+var Cesium = require("cesium/Cesium");
+var CanvasWindy = function (json,params) {
+    //风场json数据
+    this.windData = json;
+    //可配置参数
+    this.viewer = params.viewer;
+    this.canvas = params.canvas;
+    this.extent = params.extent || [];//风场绘制时的地图范围，范围不应该大于风场数据的范围，顺序：west/east/south/north，有正负区分，如：[110,120,30,36]
+    this.canvasContext = params.canvas.getContext("2d");//canvas上下文
+    this.canvasWidth = params.canvasWidth || 300;//画板宽度
+    this.canvasHeight = params.canvasHeight || 180;//画板高度
+    this.speedRate = params.speedRate || 100;//风前进速率，意思是将当前风场横向纵向分成100份，再乘以风速就能得到移动位置，无论地图缩放到哪一级别都是一样的速度，可以用该数值控制线流动的快慢，值越大，越慢，
+    this.particlesNumber = params.particlesNumber || 20000;//初始粒子总数，根据实际需要进行调节
+    this.maxAge = params.maxAge || 120;//每个粒子的最大生存周期
+    this.frameTime = 1000/(params.frameRate || 10);//每秒刷新次数，因为requestAnimationFrame固定每秒60次的渲染，所以如果不想这么快，就把该数值调小一些
+    this.color = params.color || '#ffffff';//线颜色，提供几个示例颜色['#14208e','#3ac32b','#e0761a']
+    this.lineWidth = params.lineWidth || 1;//线宽度
+    //内置参数
+    this.initExtent = [];//风场初始范围
+    this.calc_speedRate = [0,0];//根据speedRate参数计算经纬度步进长度
+    this.windField = null;
+    this.particles = [];
+    this.animateFrame = null;//requestAnimationFrame事件句柄，用来清除操作
+    this.isdistory = false;//是否销毁，进行删除操作
+    this._init();
+};
+CanvasWindy.prototype = {
+    constructor: CanvasWindy,
+    _init: function () {
+        var self = this;
+        // 创建风场网格
+        this.windField = this.createField();
+        this.initExtent = [this.windField.west-180,this.windField.east-180,this.windField.south,this.windField.north];
+        //如果风场创建时，传入的参数有extent，就根据给定的extent，让随机生成的粒子落在extent范围内
+        if(this.extent.length!=0){
+            this.extent = [
+                Math.max(this.initExtent[0],this.extent[0]),
+                Math.min(this.initExtent[1],this.extent[1]),
+                Math.max(this.initExtent[2],this.extent[2]),
+                Math.min(this.initExtent[3],this.extent[3])
+            ];
+        }
+        // console.log(this.extent);
+        this._calcStep();
+        // 创建风场粒子
+        for (var i = 0; i < this.particlesNumber; i++) {
+            this.particles.push(this.randomParticle(new CanvasParticle()));
+        }
+        this.canvasContext.fillStyle = "rgba(0, 0, 0, 0.97)";
+        this.canvasContext.globalAlpha = 0.6;
+        this.animate();
+
+        var then = Date.now();
+        (function frame() {
+            if(!self.isdistory){
+                self.animateFrame = requestAnimationFrame(frame);
+                var now = Date.now();
+                var delta = now - then;
+                if (delta > self.frameTime) {
+                    then = now - delta % self.frameTime;
+                    self.animate();
+                }
+            }else{
+                self.removeLines();
+            }
+        })();
+    },
+    //计算经纬度步进长度
+    _calcStep:function(){
+        var isextent = (this.extent.length!=0);
+        var calcExtent = isextent?this.extent:this.initExtent;
+        var calcSpeed = this.speedRate;
+        this.calc_speedRate = [(calcExtent[1]-calcExtent[0])/calcSpeed,(calcExtent[3]-calcExtent[2])/calcSpeed];
+    },
+    //根据现有参数重新生成风场
+    redraw:function(){
+        window.cancelAnimationFrame(this.animateFrame);
+        this.particles = [];
+        this._init();
+    },
+    createField: function () {
+        var data = this._parseWindJson();
+        return new CanvasWindField(data);
+    },
+    animate: function () {
+        var self = this,
+            field = self.windField;
+        var nextLng = null,
+            nextLat = null,
+            uv = null;
+        self.particles.forEach(function (particle) {
+            if (particle.age <= 0) {
+                self.randomParticle(particle);
+            }
+            if (particle.age > 0) {
+                var x = particle.x,
+                    y = particle.y,
+                    tlng = particle.tlng,
+                    tlat = particle.tlat;
+                var gridpos = self._togrid(tlng,tlat);
+                var tx = gridpos[0];
+                var ty = gridpos[1];
+                if (!self.isInExtent(tlng,tlat)) {
+                    particle.age = 0;
+                } else {
+                    uv = field.getIn(tx, ty);
+                    nextLng = tlng +  self.calc_speedRate[0] * uv[0];
+                    nextLat = tlat +  self.calc_speedRate[1] * uv[1];
+                    particle.lng = tlng;
+                    particle.lat = tlat;
+                    particle.x = tx;
+                    particle.y = ty;
+                    particle.tlng = nextLng;
+                    particle.tlat = nextLat;
+                    particle.age--;
+                }
+            }
+        });
+        if (self.particles.length <= 0) this.removeLines();
+        self._drawLines();
+    },
+    //粒子是否在地图范围内
+    isInExtent:function(lng,lat){
+        var calcExtent = this.initExtent;
+        if((lng>=calcExtent[0] && lng<=calcExtent[1]) && (lat>=calcExtent[2] && lat<=calcExtent[3])) return true;
+        return false;
+    },
+    _resize:function(width,height){
+        this.canvasWidth = width;
+        this.canvasHeight = height;
+    },
+    _parseWindJson: function () {
+        var uComponent = null,
+            vComponent = null,
+            header = null;
+        this.windData.forEach(function (record) {
+            var type = record.header.parameterCategory + "," + record.header.parameterNumber;
+            switch (type) {
+                case "2,2":
+                    uComponent = record['data'];
+                    header = record['header'];
+                    break;
+                case "2,3":
+                    vComponent = record['data'];
+                    break;
+                default:
+                    break;
+            }
+        });
+        return {
+            header: header,
+            uComponent: uComponent,
+            vComponent: vComponent
+        };
+    },
+    removeLines: function () {
+        window.cancelAnimationFrame(this.animateFrame);
+        this.isdistory = true;
+        this.canvas.width = 1;
+        // document.getElementById('content').removeChild(this.canvas);
+    },
+    //根据粒子当前所处的位置(棋盘网格位置)，计算经纬度，在根据经纬度返回屏幕坐标
+    _tomap: function (lng,lat,particle) {
+        var ct3 = Cesium.Cartesian3.fromDegrees(lng,lat,0);
+        // 判断当前点是否在地球可见端
+        var isVisible = new Cesium.EllipsoidalOccluder(Cesium.Ellipsoid.WGS84, this.viewer.camera.position).isPointVisible(ct3);
+        var pos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, ct3);
+        if(!isVisible){
+            particle.age = 0;
+        }
+        // console.log(pos);
+        return pos?[pos.x,pos.y]:null;
+    },
+    //根据经纬度，算出棋盘格位置
+    _togrid: function (lng,lat) {
+        var field = this.windField;
+        var x = (lng-this.initExtent[0])/(this.initExtent[1]-this.initExtent[0])*(field.cols-1);
+        var y = (this.initExtent[3]-lat)/(this.initExtent[3]-this.initExtent[2])*(field.rows-1);
+        return [x,y];
+    },
+    _drawLines: function () {
+        var self = this;
+        var particles = this.particles;
+        this.canvasContext.lineWidth = self.lineWidth;
+        //后绘制的图形和前绘制的图形如果发生遮挡的话，只显示后绘制的图形跟前一个绘制的图形重合的前绘制的图形部分，示例：https://www.w3school.com.cn/tiy/t.asp?f=html5_canvas_globalcompop_all
+        this.canvasContext.globalCompositeOperation = "destination-in";
+        this.canvasContext.fillRect(0,0,this.canvasWidth,this.canvasHeight);
+        this.canvasContext.globalCompositeOperation = "lighter";//重叠部分的颜色会被重新计算
+        this.canvasContext.globalAlpha = 0.9;
+        this.canvasContext.beginPath();
+        this.canvasContext.strokeStyle = this.color;
+        particles.forEach(function (particle) {
+            var movetopos = self._tomap(particle.lng, particle.lat,particle);
+            var linetopos = self._tomap(particle.tlng, particle.tlat,particle);
+            // console.log(movetopos,linetopos);
+            if(movetopos!=null && linetopos!=null){
+                self.canvasContext.moveTo(movetopos[0],movetopos[1]);
+                self.canvasContext.lineTo(linetopos[0],linetopos[1]);
+            }
+        });
+        this.canvasContext.stroke();
+    },
+    //随机数生成器（小数）
+    fRandomByfloat:function(under, over){ 
+       return under+Math.random()*(over-under);
+    },
+    //随机数生成器（整数）
+    fRandomBy:function(under, over){ 
+       switch(arguments.length){ 
+         case 1: return parseInt(Math.random()*under+1); 
+         case 2: return parseInt(Math.random()*(over-under+1) + under); 
+         default: return 0; 
+       } 
+    },
+    //根据当前风场extent随机生成粒子
+    randomParticle: function (particle) {
+        var safe = 30,x=-1, y=-1,lng=null,lat=null;
+        var hasextent = this.extent.length!=0;
+        var calc_extent = hasextent?this.extent:this.initExtent;
+        do {
+            try{
+                if(hasextent){
+                    var pos_x = this.fRandomBy(0,this.canvasWidth);
+                    var pos_y = this.fRandomBy(0,this.canvasHeight);
+                    var cartesian = this.viewer.camera.pickEllipsoid(new Cesium.Cartesian2(pos_x, pos_y), this.viewer.scene.globe.ellipsoid);
+                    var cartographic = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
+                    if(cartographic){
+                        //将弧度转为度的十进制度表示
+                        lng = Cesium.Math.toDegrees(cartographic.longitude);
+                        lat = Cesium.Math.toDegrees(cartographic.latitude);
+                    }
+                }else{
+                    lng = this.fRandomByfloat(calc_extent[0],calc_extent[1]);
+                    lat = this.fRandomByfloat(calc_extent[2],calc_extent[3]);
+                }
+            }catch(e){
+                
+            }
+            if(lng){
+                var gridpos = this._togrid(lng,lat);
+                x = gridpos[0];
+                y = gridpos[1];
+            }
+        } while (this.windField.getIn(x, y)[2] <= 0 && safe++ < 30);
+        var field = this.windField;
+        var uv = field.getIn(x, y);
+        var nextLng = lng +  this.calc_speedRate[0] * uv[0];
+        var nextLat = lat +  this.calc_speedRate[1] * uv[1];
+        particle.lng = lng;
+        particle.lat = lat;
+        particle.x = x;
+        particle.y = y;
+        particle.tlng = nextLng;
+        particle.tlat = nextLat;
+        particle.speed = uv[2];
+        particle.age = Math.round(Math.random() * this.maxAge);//每一次生成都不一样
+        return particle;
+    }
+};
+
+
+/****
+*棋盘类
+*根据风场数据生产风场棋盘网格
+****/
+var CanvasWindField = function (obj) {
+    this.west = null;
+    this.east = null;
+    this.south = null;
+    this.north = null;
+    this.rows = null;
+    this.cols = null;
+    this.dx = null;
+    this.dy = null;
+    this.unit = null;
+    this.date = null;
+
+    this.grid = null;
+    this._init(obj);
+};
+CanvasWindField.prototype = {
+    constructor: CanvasWindField,
+    _init: function (obj) {
+        var header = obj.header,
+            uComponent = obj['uComponent'],
+            vComponent = obj['vComponent'];
+
+        this.west = +header['lo1'];
+        this.east = +header['lo2'];
+        this.south = +header['la2'];
+        this.north = +header['la1'];
+        this.rows = +header['ny'];
+        this.cols = +header['nx'];
+        this.dx = +header['dx'];
+        this.dy = +header['dy'];
+        this.unit = header['parameterUnit'];
+        this.date = header['refTime'];
+
+        this.grid = [];
+        var k = 0,
+            rows = null,
+            uv = null;
+        for (var j = 0; j < this.rows; j++) {
+            rows = [];
+            for (var i = 0; i < this.cols; i++, k++) {
+                uv = this._calcUV(uComponent[k], vComponent[k]);
+                rows.push(uv);
+            }
+            this.grid.push(rows);
+        }
+    },
+    _calcUV: function (u, v) {
+        return [+u, +v, Math.sqrt(u * u + v * v)];
+    },
+    //二分差值算法计算给定节点的速度
+    _bilinearInterpolation: function (x, y, g00, g10, g01, g11) {
+        var rx = (1 - x);
+        var ry = (1 - y);
+        var a = rx * ry, b = x * ry, c = rx * y, d = x * y;
+        var u = g00[0] * a + g10[0] * b + g01[0] * c + g11[0] * d;
+        var v = g00[1] * a + g10[1] * b + g01[1] * c + g11[1] * d;
+        return this._calcUV(u, v);
+    },
+    getIn: function (x, y) {
+        if(x<0 || x>=359 || y>=180){
+            return [0,0,0];
+        }
+        var x0 = Math.floor(x),
+            y0 = Math.floor(y),
+            x1, y1;
+        if (x0 === x && y0 === y) return this.grid[y][x];
+
+        x1 = x0 + 1;
+        y1 = y0 + 1;
+
+        var g00 = this.getIn(x0, y0),
+            g10 = this.getIn(x1, y0),
+            g01 = this.getIn(x0, y1),
+            g11 = this.getIn(x1, y1);
+        var result = null;
+        try{
+            result = this._bilinearInterpolation(x - x0, y - y0, g00, g10, g01, g11);
+        }catch(e){
+            console.log(x,y);
+        }
+        return result;
+    },
+    isInBound: function (x, y) {
+        if ((x >= 0 && x < this.cols-1) && (y >= 0 && y < this.rows-1)) return true;
+        return false;
+    }
+};
+
+
+/****
+*粒子对象
+****/
+var CanvasParticle = function () {
+    this.lng = null;//粒子初始经度
+    this.lat = null;//粒子初始纬度
+    this.x = null;//粒子初始x位置(相对于棋盘网格，比如x方向有360个格，x取值就是0-360，这个是初始化时随机生成的)
+    this.y = null;//粒子初始y位置(同上)
+    this.tlng = null;//粒子下一步将要移动的经度，这个需要计算得来
+    this.tlat = null;//粒子下一步将要移动的y纬度，这个需要计算得来
+    this.age = null;//粒子生命周期计时器，每次-1
+    this.speed = null;//粒子移动速度，可以根据速度渲染不同颜色
+};
+
+export default CanvasWindy;

src/router/index.js

@@ -27,7 +27,7 @@ const routes = [
   {
     path: '/',
     name: 'monitor',
-    component: () => import('../views/monitor.vue')
+    component: () => import('../views/monitor1.vue')
   }
 
 ]

src/views/monitor1.vue

@@ -0,0 +1,486 @@
+
+<template>
+  <div id="container" class="box">
+    <div id="cesiumContainer"></div>
+    <div class="menu">
+      <el-dropdown @command="handleCommand" trigger="click">
+        <span class="el-dropdown-link">
+          下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown" class="opt">
+          <el-dropdown-item command="a">天气开关</el-dropdown-item>
+          <el-dropdown-item command="b">地图中文标记</el-dropdown-item>
+          <el-dropdown-item command="c">回到初始位置</el-dropdown-item>
+          <el-dropdown-item command="d">风场风向</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+    <div class="promsg" v-show="promsg">
+      <div class="promsg_bar">
+        状态:<span>{{ msg[i].isrun | isrun }}</span>
+      </div>
+      <div class="promsg_bar">
+        姓名:<span>{{ msg[i].username }}</span>
+      </div>
+      <div class="promsg_bar">
+        疲劳度:<span>{{ msg[i].pld }}</span>
+      </div>
+      <div class="promsg_bar">
+        收缩血压:<span>{{ msg[i].szxy }}</span>
+      </div>
+      <div class="promsg_bar">
+        舒张血压:<span>{{ msg[i].ssxy }}</span>
+      </div>
+      <div class="promsg_bar">
+        血氧浓度:<span>{{ msg[i].xynd }}</span>
+      </div>
+      <div class="promsg_bar">
+        心跳频率:<span>{{ msg[i].xtpl }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+var Cesium = require("cesium/Cesium");
+var widgets = require("cesium/Widgets/widgets.css");
+import axios from 'axios'
+import addCircleWave from "../../public/static/CiecleScan";
+import CanvasWindy from "../../public/static/Windy";
+import response from '../../public/static/data'
+
+export default {
+  name: "cesiumPage",
+  data()
+  {
+    return {
+      myVar: null,
+      windyD: null,
+      promsg: false,
+      labelEntities: [],
+      weather: null,
+      publicPath: process.env.BASE_URL,
+      viewer: null,
+      msg: [
+        {
+          bs: 200,
+          isrun: 0,
+          lat: 38.49372100830078,
+          lng: 106.24307250976562,
+          pld: 36,
+          ssxy: 72,
+          szxy: 110,
+          userid: 1941,
+          username: "孙亚飞",
+          xtpl: 94,
+          xynd: 98,
+        },
+      ],
+      i: 0,
+    };
+  },
+  created()
+  {
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket连接
+    }
+    this.initWebSocket();
+  },
+  destroyed()
+  {
+    //页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close(); // 关闭websocket
+    }
+  },
+  mounted()
+  {
+    // -----------------------------------
+
+    // -----------------------------------
+    var viewer = new Cesium.Viewer("cesiumContainer", {
+      animation: false, //是否显示动画控件
+      shouldAnimate: true,
+      homeButton: false, //是否显示Home按钮
+      fullscreenButton: false, //是否显示全屏按钮
+      baseLayerPicker: false, //是否显示图层选择控件
+      geocoder: false, //是否显示地名查找控件http://localhost:8080/#/cesiumScene
+      timeline: false, //是否显示时间线控件
+      sceneModePicker: false, //是否显示投影方式控件
+      navigationHelpButton: false, //是否显示帮助信息控件
+      infoBox: false, //是否显示点击要素之后显示的信息
+      requestRenderMode: true, //启用请求渲染模式
+      scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
+      sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
+      fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
+      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
+        url:
+          "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
+        baseLayerPicker: false,
+      }),
+    });
+    viewer.scene.camera.setView({
+      // 初始化相机经纬度
+      destination: new Cesium.Cartesian3.fromDegrees(
+        106.24307250976562,
+        38.49372100830078,
+        2000
+      ),
+      orientation: {
+        heading: Cesium.Math.toRadians(0.0),
+        pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
+        roll: 0,
+      },
+    });
+
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction((movement) =>
+    {
+      var pick = viewer.scene.pick(movement.position);
+      if (Cesium.defined(pick) && pick.id.id) {
+        for (let i in this.msg) {
+          if (pick.id.id == this.msg[i].userid) {
+            this.i = i;
+          }
+        }
+        this.$nextTick(() =>
+        {
+          this.promsg = true;
+        });
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.viewer = viewer;
+  },
+  filters: {
+    isrun(val)
+    {
+      switch (val) {
+        case 0:
+          return "离线";
+          break;
+        case 1:
+          return "在线";
+          break;
+        default:
+          return "WARING";
+          break;
+      }
+    },
+  },
+  methods: {
+    addpoint(res)
+    {
+      switch (res.isrun) {
+        case 0:
+          if (!this.viewer.entities.getById(res.userid))
+            this.viewer.entities.add({
+              id: res.userid,
+              position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
+              point: {
+                pixelSize: 10,
+                color: Cesium.Color.YELLOW,
+              },
+              label: {
+                text: res.username,
+                font: "normal 14px MicroSoft YaHei",
+                color: Cesium.Color.fromCssColorString("#fff"),
+                outlineWidth: 2,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                pixelOffset: new Cesium.Cartesian2(0, -9),
+              },
+            });
+          break;
+        case 1:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.GREEN);
+          }
+          break;
+        default:
+          if (this.viewer.entities.getById(res.userid)) {
+            this.viewer.entities.removeById(res.userid);
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          } else {
+            addCircleWave(this.viewer, res, Cesium.Color.RED);
+          }
+          break;
+      }
+    },
+    addRain()
+    {
+      // 雨雪天气添加
+      // scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createRainStage())
+      var scene = this.viewer.scene;
+      if (this.weather == null) {
+        scene.postProcessStages.add(
+          (this.weather = Cesium.PostProcessStageLibrary.createSnowStage())
+        );
+      } else {
+        scene.postProcessStages.remove(this.weather);
+        this.weather = null;
+      }
+      // scene.skyAtmosphere.hueShift = -0.8;
+      // scene.skyAtmosphere.saturationShift = -0.7;
+      // scene.skyAtmosphere.brightnessShift = -0.33;
+      // scene.fog.density = 0.001;
+      // scene.fog.minimumBrightness = 0.8;
+    },
+    geoJSON()
+    {
+      //jeojson 加载宁夏地图
+      Cesium.Math.setRandomNumberSeed(0);
+      var promise = this.viewer.dataSources.add(
+        Cesium.GeoJsonDataSource.load(
+          `${ this.publicPath }static/mapgeoJsonnx.json`,
+          {
+            stroke: Cesium.Color.green,
+            fill: Cesium.Color.TRANSPARENT,
+            strokeWidth: 3,
+            markerSymbol: "?",
+          }
+        )
+      );
+      promise.then((dataSource) =>
+      {
+        const entities = dataSource.entities.values;
+        console.log(this.labelEntities.length);
+        if (this.labelEntities.length == 0) {
+          for (let i = 0; i < entities.length; i++) {
+            const entity = entities[i];
+            const name = entity.name;
+            const location = entity.properties._centroid._value;
+            const labelEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(location[0], location[1]),
+              label: {
+                text: name,
+                font: "14px Helvetica",
+              },
+            });
+            this.labelEntities.push(labelEntity);
+          }
+        } else {
+          for (let i = 0; i < this.labelEntities.length; i++) {
+            this.viewer.entities.remove(this.labelEntities[i]);
+          }
+          this.viewer.dataSources.removeAll();
+          this.labelEntities = [];
+        }
+      });
+    },
+    flyto(h)
+    {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.24307250976562,
+          38.49372100830078,
+          h
+        ),
+        //duration:5, // 设置飞行持续时间，默认会根据距离来计算
+        complete: function ()
+        {
+          // 到达位置后执行的回调函数
+          console.log("到达目的地");
+        },
+        cancle: function ()
+        {
+          // 如果取消飞行则会调用此函数
+          console.log("飞行取消");
+        },
+        pitchAdjustHeight: -90, // 如果摄像机飞越高于该值，则调整俯仰俯仰的俯仰角度，并将地球保持在视口中。
+        maximumHeight: 5000, // 相机最大飞行高度
+      });
+    },
+    windyF()
+    {
+      
+      if (this.windyD == null) {
+        this.flyto(20000000);
+        this.$nextTick(() =>
+        {
+            var windycanvas=null;var windy = null
+          var resizeCanvas = function(){
+                    if(windycanvas==null){
+                        return;
+                    }
+                    windycanvas.width=window.innerWidth;
+                    windycanvas.height=window.innerHeight;
+                    console.log(windycanvas.width,windycanvas.height);
+                    if(windy){
+                        windy._resize(windycanvas.width,windycanvas.height);
+                    }
+                };
+          windycanvas = document.createElement('canvas');
+          windycanvas.setAttribute("id", "windycanvas");
+          windycanvas.style.position = 'fixed'
+          windycanvas.style["pointer-events"] = "none";
+          windycanvas.style["z-index"] = 10;
+          windycanvas.style["top"] = 0;
+          document.getElementById('container').appendChild(windycanvas);
+          resizeCanvas();
+          window.onresize=resizeCanvas;
+          var params = {
+            viewer: this.viewer,
+            canvas: windycanvas,
+            canvasWidth: window.innerWidth,
+            canvasHeight: window.innerHeight,
+            speedRate: 5000,
+            particlesNumber: 1000,
+            maxAge: 120,
+            frameRate: 10,
+            color: '#ffffff',
+            lineWidth: 1,
+          };
+          console.log(params)
+          windy = new CanvasWindy(response, params);
+          this.windyD = windy
+        })
+
+      }
+      else {
+        this.windyD.removeLines()
+        this.windyD = null
+        console.log(22222)
+      }
+
+    },
+    handleCommand(command)
+    {
+      switch (command) {
+        case "a":
+          this.addRain();
+          break;
+        case "b":
+          this.geoJSON();
+          break;
+        case "d":
+          this.windyF();
+          break;
+        default:
+          this.flyto(2000);
+          break;
+      }
+    },
+    //初始化weosocket
+    initWebSocket()
+    {
+      if (typeof WebSocket === "undefined") {
+        alert("您的浏览器不支持WebSocket");
+        return false;
+      }
+      const wsuri = "ws://10.155.32.4:8010/shbracelet";
+
+      this.websock = new WebSocket(wsuri);
+      this.websock.onopen = this.websocketonopen;
+      this.websock.onmessage = this.websocketonmessage;
+      this.websock.onerror = this.websocketonerror;
+      this.websock.onclose = this.websocketclose;
+    },
+    //连接成功
+    websocketonopen()
+    {
+      console.log("WebSocket连接成功");
+      // 添加心跳检测，每30秒发一次数据，防止连接断开（这跟服务器的设置有关，如果服务器没有设置每隔多长时间不发消息断开，可以不进行心跳设置）
+      let self = this;
+      this.timer = setInterval(() =>
+      {
+        try {
+          self.websock.send("test");
+          console.log("发送消息");
+        } catch (err) {
+          console.log("断开了：" + err);
+          self.connection();
+        }
+      }, 30000);
+    },
+    //接收后端返回的数据，可以根据需要进行处理
+    websocketonmessage(e)
+    {
+      let res = JSON.parse(e.data);
+      console.log(res);
+      this.msg = res;
+      for (let i in res) {
+        this.addpoint(res[i]);
+      }
+    },
+    //连接建立失败重连
+    websocketonerror(e)
+    {
+      console.log(`连接失败的信息：`, e);
+      this.initWebSocket(); // 连接失败后尝试重新连接
+    },
+    //关闭连接
+    websocketclose(e)
+    {
+      console.log("断开连接", e);
+    },
+  },
+};
+</script>
+ 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style  lang="scss" scoped>
+html,
+body,
+#cesiumContainer {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+.box {
+  height: 100%;
+  .menu {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    .el-dropdown-link {
+      color: #fff;
+    }
+  }
+  .promsg {
+    position: absolute;
+    width: 8vw;
+    right: 20px;
+    top: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    box-sizing: border-box;
+    padding: 6px 20px;
+    border-radius: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    .promsg_bar {
+      color: #fff;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 10px 6px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+.opt {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  color: #fff !important;
+  border: none;
+}
+.el-dropdown-link {
+  cursor: pointer;
+  color: #409eff;
+}
+.el-icon-arrow-down {
+  font-size: 12px;
+}
+.el-dropdown-menu__item {
+  color: #fff !important;
+}
+.el-dropdown-menu__item:hover {
+  color: #339999 !important;
+}
+</style>
+