Select to view content in your preferred language

The timeSlider does not scroll forward

501
2
10-29-2023 01:01 AM
zhaotian
New Contributor

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>

`

0 Kudos
2 Replies
zhaotian
New Contributor

I have found part of the cause of the problem. I used the externalRenderers interface in other pages, so the TimeSlider that used to run normally can't scroll properly now. How can I solve this problem

0 Kudos
UndralBatsukh
Esri Regular Contributor

Hi there, 

Can you please provide me with a reproducible case? Without one it is hard to recreate the behavior. Thanks

0 Kudos