vue中使用Cesium画线，鼠标划上线条显示需要显示的信息完整代码

这里提供一个简单的示例，使用Vue和Cesium绘制一条线段，并在鼠标悬停时显示线段的长度和坐标信息。

<template>
  <div id="cesiumContainer" class="map"></div>
</template>

<script>
import * as Cesium from 'cesium';

export default {
  name: 'CesiumMap',
  data() {
    return {
      viewer: null,
      handler: null,
      lineEntity: null,
      tooltip: null
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 初始化Cesium Viewer
      this.viewer = new Cesium.Viewer('cesiumContainer', {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        selectionIndicator: false,
        timeline: false,
        navigationHelpButton: false,
        navigationInstructionsInitiallyVisible: false,
        terrainProvider: Cesium.createWorldTerrain()
      });

      // 创建线段实体
      this.lineEntity = this.viewer.entities.add({
        polyline: {
          positions: [
            Cesium.Cartesian3.fromDegrees(110, 30),
            Cesium.Cartesian3.fromDegrees(120, 35)
          ],
          width: 5,
          material: Cesium.Color.RED
        }
      });

      // 创建鼠标移动事件监听器
      this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
      this.handler.setInputAction((movement) => {
        const pickedObject = this.viewer.scene.pick(movement.endPosition);
        if (pickedObject && pickedObject.id === this.lineEntity) {
          const position = this.viewer.scene.pickPosition(movement.endPosition);
          const distance = Cesium.Cartesian3.distance(this.lineEntity.polyline.positions.getValue(this.viewer.clock.currentTime), position);
          const tooltipText = `Length: ${distance.toFixed(2)} meters\nCoords: ${Cesium.Math.toDegrees(position.x).toFixed(6)}, ${Cesium.Math.toDegrees(position.y).toFixed(6)}`;
          if (!this.tooltip) {
            this.tooltip = document.createElement('div');
            this.tooltip.className = 'cesium-tooltip';
            this.viewer.container.appendChild(this.tooltip);
          }
          this.tooltip.innerHTML = tooltipText;
          this.tooltip.style.display = 'block';
          this.tooltip.style.left = (movement.endPosition.x + 10) + 'px';
          this.tooltip.style.top = (movement.endPosition.y - this.tooltip.clientHeight - 10) + 'px';
        } else {
          if (this.tooltip) {
            this.tooltip.style.display = 'none';
          }
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    }
  }
}
</script>

<style>
.map {
  height: 100%;
  width: 100%;
}

.cesium-tooltip {
  position: absolute;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 5px;
  font-size: 12px;
}
</style>

在以上代码中，我们首先在模板中创建一个包含Cesium Viewer的`div`元素。在`mounted`钩子函数中，我们调用了`initMap`方法来初始化地图。

在`initMap`方法中，我们创建了Cesium Viewer，并使用`add`方法创建了一条红色的线段实体。接下来，我们创建了一个鼠标移动事件监听器，当鼠标移动到线段上时，计算线段的长度和鼠标位置的坐标，并在页面上创建一个带有长度和坐标信息的提示框。提示框的样式可以在`style`标签中自定义。

以上代码仅作为参考，具体实现可以根据项目需求进行调整。