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

最新推荐文章于 2024-12-19 16:20:21 发布

原创最新推荐文章于 2024-12-19 16:20:21 发布 · 765 阅读

1 ·

CC 4.0 BY-SA版权

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

三维GIS 专栏收录该内容

427 篇文章

订阅专栏

本文介绍了一个基于Vue的状态栏控件实现方法，该控件能够实时显示三维球场景中鼠标位置的经纬度及高度，以及相机的高度。通过监听鼠标移动事件并结合Cesium库的功能，实现了数据的动态更新。

作者：桔子
本文同步发布于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，后续也将进一步完善，欢迎大家下载使用。