vue中使用Cesium轨道线,鼠标划上线条显示需要显示经纬度信息完整代码
时间: 2023-11-26 19:03:50 浏览: 47
以下是使用Cesium绘制轨迹线,并在鼠标悬停时显示经纬度信息的示例代码:
```html
<template>
<div id="cesiumContainer"></div>
</template>
<script>
import * as Cesium from 'cesium/Cesium';
export default {
name: 'CesiumTrajectory',
data() {
return {
viewer: null,
positions: [
{ lng: 117.04, lat: 39.09, alt: 0 },
{ lng: 117.05, lat: 39.1, alt: 1000 },
{ lng: 117.06, lat: 39.11, alt: 2000 },
{ lng: 117.07, lat: 39.12, alt: 3000 },
{ lng: 117.08, lat: 39.13, alt: 4000 }
],
lineEntity: null,
labelEntity: null,
mouseHandler: null
};
},
mounted() {
this.initialize();
},
methods: {
initialize() {
const viewer = new Cesium.Viewer('cesiumContainer');
this.viewer = viewer;
// 添加轨迹线
const positions = this.positions.map(pos => Cesium.Cartesian3.fromDegrees(pos.lng, pos.lat, pos.alt));
this.lineEntity = viewer.entities.add({
polyline: {
positions: positions,
width: 5,
material: Cesium.Color.RED
}
});
// 添加鼠标事件处理器
this.mouseHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
this.mouseHandler.setInputAction(this.showPositionLabel, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// 添加标签
this.labelEntity = viewer.entities.add({
label: {
show: false,
font: '14px monospace',
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(10, -10),
eyeOffset: new Cesium.Cartesian3(0, 0, -100),
fillColor: Cesium.Color.YELLOW,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
disableDepthTestDistance: Number.POSITIVE_INFINITY
}
});
},
showPositionLabel(movement) {
const pickedObject = this.viewer.scene.pick(movement.endPosition);
if (Cesium.defined(pickedObject) && pickedObject.id === this.lineEntity) {
const position = this.viewer.scene.pickPosition(movement.endPosition);
if (Cesium.defined(position)) {
const cartographic = Cesium.Cartographic.fromCartesian(position);
const lng = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
const lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
const alt = cartographic.height.toFixed(2);
this.labelEntity.position = position;
this.labelEntity.label.text = `经度: ${lng}\n纬度: ${lat}\n高度: ${alt}米`;
this.labelEntity.label.show = true;
}
} else {
this.labelEntity.label.show = false;
}
}
}
};
</script>
<style>
#cesiumContainer {
height: 600px;
width: 100%;
}
</style>
```
在这个示例中,我们首先使用`Cesium.Cartesian3.fromDegrees`将经纬度转换为Cesium的笛卡尔坐标系。然后使用`viewer.entities.add`添加一条红色的轨迹线,并将其存储在`lineEntity`中。我们还添加了一个`labelEntity`实体,用于在鼠标悬停时显示经纬度信息。
在`initialize`方法中,我们初始化了Cesium Viewer,并添加了轨迹线和标签。然后,我们添加了一个鼠标事件处理器,当鼠标移动时调用`showPositionLabel`方法。
`showPositionLabel`方法首先检查鼠标是否在轨迹线上,并从场景中获取位置。如果位置已定义,则将其转换为`Cartographic`坐标,并将其格式化为经度、纬度和高度。最后,我们将这些信息显示在标签中。
注意,我们使用了`disableDepthTestDistance`来禁用深度测试,以便标签始终显示在轨迹线上方。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)