需求:使用cesium实现将已有的鼠标滑入滑出航行线监听到的时间转换为鼠标滑动在航行线上显示时间并且是变化中的时间,示例代码
时间: 2024-03-19 17:46:12 浏览: 54
好的,以下是一个完整的示例代码,它将已有的鼠标滑入滑出航行线监听到的时间转换为鼠标滑动在航行线上显示时间,并且是变化中的时间:
```
var viewer = new Cesium.Viewer('cesiumContainer');
// 添加航行线
var linePosition = Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]);
var line = viewer.entities.add({
polyline : {
positions : linePosition,
width : 10,
material : Cesium.Color.RED
},
description: '航行线'
});
// 记录上一个时间
var lastTime = 0;
// 监听鼠标滑动事件
viewer.scene.canvas.addEventListener('mousemove', function(e) {
var pick = viewer.scene.pick(e.endPosition);
if (Cesium.defined(pick) && pick.id && pick.id.description === '航行线') {
var position = viewer.scene.pickPosition(e.endPosition);
var scratchCartesian = new Cesium.Cartesian3();
var cartographic = Cesium.Cartographic.fromCartesian(position);
var time = cartographic.longitude / (2.0 * Math.PI) * 24.0 * 3600.0;
var timeDiff = Math.abs(time - lastTime);
var timeString = timeDiff.toFixed(2) + '秒';
var position = Cesium.Cartesian3.fromCartographic(cartographic);
var label = viewer.entities.add({
position: position,
label: {
text: timeString
}
});
lastTime = time;
}
});
```
这段代码首先创建了一个航行线,并将其添加到场景中。然后,它监听了鼠标的滑动事件。在事件监听函数中,它获取了鼠标在航行线上的位置,并将其转换为时间。然后,它计算出鼠标滑动的时间差,并将其以字符串的形式显示在航行线上。最后,它将当前时间保存在一个变量中,以便下一次计算时间差。
请注意,由于该示例代码是在已有的航行线上实现的,因此您需要先创建一个航行线,然后将其添加到场景中。如果您需要在代码中创建航行线,请参考我之前提供的示例代码。
阅读全文
相关推荐
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.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)