Vue+cesium gets the latitude and longitude of the mouse floating

1. Demand

is to display the latitude and longitude of the mouse on the map

2. Results display

3. Ideas and methods

html

<div class="mouseMove" v-if="mouseMove.lat">
      <div v-if="mouseMove.lat">经度：{
   
   { mouseMove.lng }}</div>
      <div v-if="mouseMove.lng">纬度：{
   
   { mouseMove.lat }}</div>
    </div>

Attributes

data() {
    return {
      mouseMove: {},
    };
  },

css

.mouseMove {
  background: #303336;
  position: absolute;
  bottom: 3px;
  right: 33px;
  padding: 0.429rem;
  z-index: 1;
  color: #fff;
  font-size: 0.6rem;
}

The method of cesium mouse movement calls this method after initializing cesium

getMouseMove() {
      let that = this;
      let handler = new Cesium.ScreenSpaceEventHandler(
        that.CesiumViewer.scene.canvas
      );
      handler.setInputAction(function (movement) {
        //具体事件的实现
        var ellipsoid = that.CesiumViewer.scene.globe.ellipsoid;
        //捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
        var cartesian = that.CesiumViewer.camera.pickEllipsoid(
          movement.endPosition,
          ellipsoid
        );
        if (cartesian) {
          //将笛卡尔三维坐标转为地图坐标（弧度）
          var cartographic =
            that.CesiumViewer.scene.globe.ellipsoid.cartesianToCartographic(
              cartesian
            );
          //将地图坐标（弧度）转为十进制的度数
          that.mouseMove = {
            lat: Cesium.Math.toDegrees(cartographic.latitude),
            lng: Cesium.Math.toDegrees(cartographic.longitude),
            alt: that.CesiumViewer.camera.positionCartographic.height / 1000,
          };
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    },