I used vue3.2.47,@arcgis/core 4.27.6 for development, but I found a problem when I used TimeSlider again. According to the example in the document, I created TimeSlider in the interface, but this TimeSlider did not scroll forward, so I need to press the pause button. Press the Start button again, the slider will move forward, how to solve this problem? Here is the code I used to create the TimeSlider.
`
<!-- 历史变迁功能 -->
<script setup>
import { CHMap3d } from "@/js/utils/esri-map-view-3d.js";
import _map3dUtil from "@/js/utils/esri-map-3d-util.js";
import { onMounted, onUnmounted, ref, watch, nextTick } from "vue";
import eventBus from "@/libs/event-bus.ts";
import TimeSlider from "@arcgis/core/widgets/TimeSlider";
// 定义时间轴变量
let timeSlider;
onMounted(async () => {
// 初始化时间轴
timeSlider = new TimeSlider({
container: "timeSliderDiv",
view: CHMap3d.view,
mode: "instant",
fullTimeExtent: {
start: new Date(2000, 1, 1),
end: new Date(2030, 1, 1),
},
timeExtent: {
start: new Date(2002, 1, 1),
end: new Date(2002, 1, 1),
},
loop: true,
playRate: 1000,
timeVisible:true
});
CHMap3d.view.ui.add(timeSlider);
timeSlider.play();
// 监测时间滑块的变化
timeSlider.watch("timeExtent", (value) => {
console.log(timeSlider)
// 获取当前时间范围的结束时间,需要根据timeSlider的mode变化而变化
const currentTime = value.end;
// 检查是否需要触发加载数据操作
// modifyImageDisplayBasedOnTime(currentTime);
});
});
onUnmounted(() => {
eventBus.off("closeSecondNav");
// 销毁时间轴
timeSlider?.destroy();
});
</script>
<template>
<div>
<!-- 时间轴控件--开始 -->
<div id="timeSliderDiv" class="centered-element esri-time-slider"></div>
<!-- 时间轴控件--结束 -->
</div>
</template>
<style lang="scss" scoped>
// 使元素水平居中
.centered-element {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 75vh;
}
// 修改时间轴背景颜色
.esri-time-slider {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 1);
padding: 10px;
}
</style>
`
