cesium_nxmap/.history/src/views/monitor_20201022174447.vue

<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
    <div class="menu">
      <el-dropdown @command="handleCommand">
        <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-menu>
      </el-dropdown>
    </div>
    <div class="promsg" v-show="promsg">
      <div class="promsg_bar">状态:<span>在线</span></div>
      <div class="promsg_bar">
        姓名:<span>{{ msg[userid].username }}</span>
      </div>
      <div class="promsg_bar">
        疲劳度:<span>{{ msg[userid].pld }}</span>
      </div>
      <div class="promsg_bar">
        收缩血压:<span>{{ msg[userid].szxy }}</span>
      </div>
      <div class="promsg_bar">
        舒张血压:<span>{{ msg[userid].ssxy }}</span>
      </div>
      <div class="promsg_bar">
        血氧浓度:<span>{{ msg[userid].xynd }}</span>
      </div>
      <div class="promsg_bar">
        心跳频率:<span>{{ msg[userid].xtpl }}</span>
      </div>
    </div>
  </div>
</template>
<script>
var Cesium = require("cesium/Cesium");
var widgets = require("cesium/Widgets/widgets.css");
import addCircleWave from "../../public/static/CiecleScan";
export default {
  name: "cesiumPage",
  data() {
    return {
      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,
        },
      ],
      userid: 1,
    };
  },
  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) {
        this.userid = pick.id.id;
        this.promsg = true;
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    this.viewer = viewer;
  },
  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]);
          }
          // for (let i = 0; i < entities.length; i++) {
          //   entities[i].polygon.outline = false;
          // }
        }
      });
    },
    flyto() {
      this.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
          106.24307250976562,
          38.49372100830078,
          2000
        ),
        //duration:5, // 设置飞行持续时间，默认会根据距离来计算
        complete: function () {
          // 到达位置后执行的回调函数
          console.log("到达目的地");
        },
        cancle: function () {
          // 如果取消飞行则会调用此函数
          console.log("飞行取消");
        },
        pitchAdjustHeight: -90, // 如果摄像机飞越高于该值，则调整俯仰俯仰的俯仰角度，并将地球保持在视口中。
        maximumHeight: 5000, // 相机最大飞行高度
      });
    },
    handleCommand(command) {
      switch (command) {
        case "a":
          this.addRain();
          break;
        case "b":
          this.geoJSON();
          break;
        default:
          this.flyto();
          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) {
      var vm = this;
      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;
}
</style>