SuperMap iClient3D for WebGL-Vue组件开发之状态栏控件

作者：桔子
本文同步发布于https://www.jianshu.com/p/80d96b971039

这一节来实现一个状态栏控件。状态栏是三维球上比较常见的一种控件，主要显示当前鼠标的位置以及当前相机的高度。实现该控件的核心是利用Vue的data特性，将鼠标状态及相机状态和输出进行绑定，下面来看实现过程。
一、data绑定

<template>
  <div class="statusbar">
    <p class="status-x">{{x}}</p>
    <p class="status-y">{{y}}</p>
    <p class="status-z">{{z}}</p>
    <p class="camerastatus">{{cameraZ}}</p>
  </div>
</template>

 data: () => {
    return {
      x: "",
      y: "",
      z: "",
      cameraZ: ""
    };
  }

二、扩展鼠标事件，绑定修改data

addEvt() {
      let _that = this;
      if (this.$globe.viewer) {
        let scene = this.$globe.viewer.scene;

        _that.$globe.viewer.screenSpaceEventHandler.setInputAction(e => {
          _that.mouseEvtCallback(e.endPosition, scene);
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      } else {
        setTimeout(function() {
          _that.addEvt();
        }, 1000);
      }
    },
mouseEvtCallback(p, scene) {
      let position = scene.pickPosition(p);
      if (position) {
        //将笛卡尔坐标转化为经纬度坐标
        let cartographic = Cesium.Cartographic.fromCartesian(position);
        let longitude = Cesium.Math.toDegrees(cartographic.longitude);
        let latitude = Cesium.Math.toDegrees(cartographic.latitude);
        //   let height=cartographic.height
        let height = scene.getHeight(longitude, latitude);
        height = height ? height : 0;

        let cameraposition = scene.camera.position;
        let cameracartographic = Cesium.Cartographic.fromCartesian(
          cameraposition
        );
        // let longitude = Cesium.Math.toDegrees(cartographic.longitude);
        // let latitude = Cesium.Math.toDegrees(cartographic.latitude);
        let cameraheight = cameracartographic.height;

        this.$data.x = "经度：" + this.formatDegree(longitude);
        this.$data.y = "纬度：" + this.formatDegree(latitude);

        height =
          height > 0
            ? height > 1000
              ? (height / 1000).toFixed(2) + "千米"
              : height.toFixed(2) + "米"
            : 0 + "米";
        this.$data.z = "高度：" + height;
        cameraheight =
          cameraheight > 1000
            ? (cameraheight / 1000).toFixed(2) + "千米"
            : cameraheight.toFixed(2) + "米";
        this.$data.cameraZ = "相机高度：" + cameraheight;
      }
    },

来看下效果

相关代码，已经上传GitHub，https://github.com/OrangeOrg/vue-webgl-components，后续也将进一步完善，欢迎大家下载使用。