Javascript 使用setInterval（）自动移动的时间滑块_Javascript_D3.js_Setinterval_Mapbox

Javascript 使用setInterval（）自动移动的时间滑块

javascript d3.js mapbox

Javascript 使用setInterval（）自动移动的时间滑块,javascript,d3.js,setinterval,mapbox,Javascript,D3.js,Setinterval,Mapbox,我正在尝试制作一个Mapbox地图，该地图将按时间顺序显示给定年份的数据，并尝试按顺序自动指定年份但是，在下面的脚本中，我在使用setInterval自动移动时间滑块时遇到了一个问题，它在不移动滑块的情况下为我提供了一个[object HTMLLabelElement] 我是否将设置间隔设置为错误的功能 <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title

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

但是，在下面的脚本中，我在使用setInterval自动移动时间滑块时遇到了一个问题，它在不移动滑块的情况下为我提供了一个[object HTMLLabelElement]

我是否将设置间隔设置为错误的功能

<!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>


正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
.地图覆盖图{
字体：12px/20px“Helvetica Neue”，Arial，Helvetica，无衬线；
位置：绝对位置；
宽度：25%；
排名：0；
左：0；
填充：10px；
}
.map overlay.map overlay内部{
背景色：#fff；
盒影：0 1px2pRGBA（0,0,0,0.20）；
边界半径：3px；
填充：10px；
边缘底部：10px；
}
.地图覆盖图h2{
线高：24px；
显示：块；
利润率：0.10px；
}
.地图覆盖输入{
背景色：透明；
显示：内联块；
宽度：100%；
位置：相对位置；
保证金：0；
光标：ew调整大小；
}
特拉维夫电影院1914-2016
mapboxgl.accessToken='pk.eyj1ijoia3z5yiisimeijoijjaxuwmhewcmgwmdaxmnlvm3nzmm0xbgozin0.JL_eeNZL_lDoJxijNqFPoA'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/dark-v9',
中间：[34.775981,32.081287]，
缩放：11
});
风险值年=['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'];
功能过滤器（年）{
变量过滤器=['='，'Year'，Year]；
map.setFilter（'cinema-circles'，filters）；
map.setFilter（'cinema-labels'，过滤器）；
//将标签设置为年份
document.getElementById（'Year'）。textContent=Year；
}
map.on（'load'，function（））{
//资料由https://earthquake.usgs.gov/
//2015年重大地震的查询URL请求如下所示：
// https://earthquake.usgs.gov/fdsnws/event/1/query
//？格式=geojson
//&starttime=2015-01-01
//&endtime=2015-12-31
//&minmagnitude=6'
//
//这里我们使用d3来帮助我们发出ajax请求，但是您可以使用
//您希望的任何请求方法（库或其他）。
d3.json（'https://cldex.net/visual/cinema_telaviv.geojson，函数（错误，数据）{
如果（错误）抛出错误；
//基于时间创建年份属性值
//用来过滤空气。
data.features=data.features.map（函数（d）{
返回d；
});
map.addSource（“电影院”{
'type'：'geojson'，
“数据”：数据
});
map.addLayer({
“id”：“电影圈”，
“类型”：“圆”，
'来源'：'电影院'，
“油漆”：{
“圆形颜色”：{
属性：“sqrt”，
停止：[
[0，#f1f075']，
[1500，#e55e']
]
},
“圆形不透明度”：0.75，
“圆半径”：20
}
});
map.addLayer({
“id”：“电影院标签”，
“类型”：“符号”，
'来源'：'电影院'，
“布局”：{
“文本字段”：“{Cinema}”，
“文本字体”：[“Open Sans Bold”，“Arial Unicode MS Bold”]，
“文本大小”：12
},
“油漆”：{
“文本颜色”：“rgba（0,0,0,0.5）”
}
});
//将过滤器设置为每年的第一年
// 0 = 1914
菲尔特比（1914）；
document.getElementById（'slider'）。addEventListener（'input'，function（e）{
var Year=window.setInterval（函数（）{parseInt（Years[e.target.value]）}，1000）；
filterBy（年）；
});
//创建一个弹出窗口，但不要将其添加到地图中。
var popup=new mapboxgl.popup({
closeButton:false，
closeOnClick：false
});
map.on（'mousemove'，函数（e）{
var features=map.queryRenderedFeatures（e.point，{layers:['cinema-circles']}）；
//将光标样式更改为UI指示器。
map.getCanvas（）.style.cursor=（features.length）？“指针”：“”；
如果（！features.length）{
popup.remove（）；
返回；
}
变量特征=特征[0]；
//填充弹出窗口并设置其坐标
//基于找到的特征。
popup.setLngLat（特征、几何、坐标）
.setHTML（feature.properties.Cinema+'Cinema Information'+'
编号：'+feature.properties.Number+'
屏幕数：'+feature.properties.Screens+'
座位数：'+feature.properties.Seatss）
.addTo（地图）；
});
});
});

我的数据可以在geojson中找到：

您当前使用的

setInterval

不正确，并且您有一些语法错误

在您当前拥有的位置：

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

请尝试以下方法：

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

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

编辑：我创造了

// 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);

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

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