使用 setInterval() 自动移动时间滑块

Question

我正在尝试制作一个 Mapbox 地图，该地图将按时间顺序显示给定年份的数据，并且我正在尝试按顺序自动指定年份。

但是，我在使用 setInterval 自动移动以下脚本中的时间滑块时遇到问题，它给了我一个 [object HTMLLabelElement] 而滑块没有移动。

我是否将 setInterval 设置为错误的函数？

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>
.map-overlay {
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    position: absolute;
    width: 25%;
    top: 0;
    left: 0;
    padding: 10px;
}

.map-overlay .map-overlay-inner {
    background-color: #fff;
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.20);
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 10px;
}

.map-overlay h2 {
    line-height: 24px;
    display: block;
    margin: 0 0 10px;
}

.map-overlay input {
    background-color: transparent;
    display: inline-block;
    width: 100%;
    position: relative;
    margin: 0;
    cursor: ew-resize;
}
</style>

<div id='map'></div>

<div class='map-overlay top'>
    <div class='map-overlay-inner'>
        <h2>Tel-Aviv Cinemas 1914-2016</h2>
        <label id='Year'></label>
        <input id='slider' type='range' min='0' max='102' step='1' value='0' />
    </div>
    <div class='map-overlay-inner'></div>
</div>

<script src="https://d3js.org/d3.v4.js"></script>

<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoia3Z5YiIsImEiOiJjaXUwMHEwcmgwMDAxMnlvM3NzMm0xbGozIn0.JL_eeNZL_lDoJxijNqFPoA';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v9',
    center: [34.775981, 32.081287],
    zoom: 11
});

var Years = ['1914', '1915', '1916', '1917', '1918', '1919', '1920', '1921', '1922', '1923', '1924', '1925', '1926', '1927', '1928', '1929', '1930', '1931', '1932', '1933', '1934', '1935', '1936', '1937', '1938', '1939', '1940', '1941', '1942', '1943', '1944', '1945', '1946', '1947', '1948', '1949', '1950', '1951', '1952', '1953', '1954', '1955', '1956', '1957', '1958', '1959', '1960', '1961', '1962', '1963', '1964', '1965', '1966', '1967', '1968', '1969', '1970', '1971', '1972', '1973', '1974', '1975', '1976', '1977', '1978', '1979', '1980', '1981', '1982', '1983', '1984', '1985', '1986', '1987', '1988', '1989', '1990', '1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'];

function filterBy(Year) {
    var filters = ['==', 'Year', Year];
    map.setFilter('cinema-circles', filters);
    map.setFilter('cinema-labels', filters);

    // Set the label to the Year
    document.getElementById('Year').textContent = Year;
}

map.on('load', function() {

    // Data courtesy of https://earthquake.usgs.gov/
    // Query for significant earthquakes in 2015 URL request looked like this:
    // https://earthquake.usgs.gov/fdsnws/event/1/query
    //    ?format=geojson
    //    &starttime=2015-01-01
    //    &endtime=2015-12-31
    //    &minmagnitude=6'
    //
    // Here we're using d3 to help us make the ajax request but you can use
    // Any request method (library or otherwise) you wish.
    d3.json('https://cldex.net/visual/cinema_telaviv.geojson', function(err, data) {
        if (err) throw err;

        // Create a Year property value based on time
        // used to filter against.
        data.features = data.features.map(function(d) {
        return d;
        });

        map.addSource('cinemas', {
            'type': 'geojson',
            'data': data
        });

        map.addLayer({
            'id': 'cinema-circles',
            'type': 'circle',
            'source': 'cinemas',
            'paint': {
                'circle-color': {
            property: 'sqrt',
            stops: [
                [0, '#f1f075'],
                [1500, '#e55e5e']
                ]
                },
                'circle-opacity': 0.75,
                'circle-radius': 20
            }
        });

        map.addLayer({
            'id': 'cinema-labels',
            'type': 'symbol',
            'source': 'cinemas',
            'layout': {
                'text-field': '{Cinema}',
                'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
                'text-size': 12
            },
            'paint': {
                'text-color': 'rgba(0,0,0,0.5)'
            }
        });

        // Set filter to first Year of the Year
        // 0 = 1914
        filterBy(1914);
        document.getElementById('slider').addEventListener('input', function(e) {
              var Year = window.setInterval(function() { parseInt(Years[e.target.value]) }, 1000);
            filterBy(Year);
        });
        // Create a popup, but don't add it to the map yet.
        var popup = new mapboxgl.Popup({
            closeButton: false,
            closeOnClick: false
});

map.on('mousemove', function(e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['cinema-circles'] });
    // Change the cursor style as a UI indicator.
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';

    if (!features.length) {
        popup.remove();
        return;
    }

    var feature = features[0];

    // Populate the popup and set its coordinates
    // based on the feature found.
    popup.setLngLat(feature.geometry.coordinates)
        .setHTML(feature.properties.Cinema+'<b> Cinema Information</b>'+'<br><b>Number: </b>'+feature.properties.Number+'<br><b>Number of Screens: </b>'+feature.properties.Screens+'<br><b>Number of Seats: </b>'+feature.properties.Seatss)
        .addTo(map);
});
});
});
</script>

</body>
</html>

我的数据可以在 geojson 中找到：https://cldex.net/visual/cinema_telaviv.geojson

Answer 1

您目前对 setInterval 的用法不正确，并且有一些语法错误。

你目前在哪里：

var Year =  set.Interval(function() { parseInt(Years[e.target.value] }, 1000);

试试这个：

var Year = window.setInterval(function() { parseInt(Years[e.target.value]) }, 1000);

您可能在其他地方仍有一些问题，但我很难在 d3 中正确解析您的数据端点。如果需要，post 建立一个代码笔或类似的东西可能会有所帮助，以获得更多帮助。

编辑：

我已经根据您当前的设置创建了一个代码笔，它可以帮助您更轻松地修改：http://codepen.io/anon/pen/EZjKqM

如您所见，我又做了一些更改，例如添加一些内容以增加使用您的 filterBy 函数的年份数组。它不能完美运行，但您可以看到它如何正确解析数据并逐秒更改年份。

这是通过使用以下JS实现的：

// Automatically cycle through years.
var yearSlider = document.getElementById('slider');
var curYearIndex = -1;

function advanceYear() {
    ++curYearIndex;
    if (curYearIndex >= years.length) {
        curYearIndex = 0;
    }
    return years[curYearIndex];
}

var cycleYears = window.setInterval(function() { 
    var currentYear = advanceYear();
    filterBy(parseInt(currentYear));
}, 1000);

不幸的是，这可能是我所能得到的，因为我还有其他事情要做，但它可能会给你一个起点。

Answer 2

@Wakeuphate，这是一个很棒的解决方案（相应地投了赞成票）。我能够快速实施我的项目。

似乎丢失的项目也在移动滑块。我能够通过简单地添加以下行来实现这一点：

    document.getElementById('slider').value = currentYear;

所以完整的函数看起来像：

var cycleYears = window.setInterval(function() { 
        var currentYear = advanceYear();
        filterBy(parseInt(currentYear));
        document.getElementById('slider').value = currentYear;
    }, 1000);

使用 setInterval() 自动移动时间滑块

Time slider to move automatically using setInterval()

javascript

setinterval

d3.js

mapbox

编辑：