当用户选择其他日期时更新时间滑块中的时间选择

Question

我从以下 GitHub 获取了代码并进行了某些修改（例如添加其他扩展等...）。

https://github.com/autodesk-platform-services/aps-iot-extensions-demo/tree/experiment/time-select

我尝试重现下面的 GitHub 中所做的操作，以便在用户选择新日期时更新时间滑块上显示的日期：

https://github.com/Autodesk-Forge/forge-dataviz-iot-react-components/blob/main/client/components/ChronosTimeSlider.jsx#L52

我试图重现的是以下函数：updateSelection() 和 createTimeSelection()

我在resolve中使用了zoomTo，以便能够更精确地缩放已选择的日期范围，但是一旦我离开此范围，日期就不再更新。

示例：

加载查看器时，日期为 2023 年 12 月 30 日至 2024 年 1 月 15 日。如果我在此间隔中输入日期，时间滑块就会更新，但是一旦我输入 12/28/2024，时间滑块就不再更改

这就是我所做的，但出现了以下我不明白的错误：

未捕获类型错误：line.addTimeSelection 不是函数：

Answer 1

根据 aps-iot-extensions-demo/blob/experiment/time-select/public/timeline.js#L10，函数

initTimeline

是一个异步函数，它返回一个 Promise，而不是

TimeSlider

对象。这就是为什么会抛出错误

line.addTimeSelection is not a function

。

要解决此问题，有两种方法：

1. 只需在index.js第31行的

   then

   函数中添加您的修改即可

initTimeline(document.getElementById('timeline'), onTimeRangeChanged, onTimeMarkerChanged)
        .then(timeline => {
            /// Add here ....
            function updateTimelineRange() {
                const startDate = document.getElementById('start-date').value;
                const endDate = document.getElementById('end-date').value;
                timeline.zoomTo(startDate, endDate);
            }
            document.getElementById('start-date').addEventListener('change', updateTimelineRange);
            document.getElementById('end-date').addEventListener('change', updateTimelineRange);
        });

或者在

initTimeline

前面添加await以获得正确的

TimeSlider

对象：

let line = await initTimeline(document.getElementById('timeline'), onTimeRangeChanged, onTimeMarkerChanged);