我正在使用此示例：https://www.mapbox.com/mapbox-gl-js/example/timeline-animation/
我正在尝试制作此代码：
// Create a Year property value based on time
// used to filter against.
data.features = data.features.map(function(d) {
d.properties.Year = new Date(d.properties.Year).getYear();
return d;
});
使用我的json文件，该文件没有日期数据类型作为字段，只是一个年份值。
如下例所示：
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 34.7615574,32.0638934 ]
},
"properties": {
"Cinema":"אביב",
"Number of Records":"1",
"Number":1,
"Screens":1,
"Seatss":0,
"Year":1948
}
},
我需要这段代码来返回一个可以按年滑块用于我的过滤器的值。
我是D3和Mapbox的新手，所以任何建议都会非常感激。
以下是我尝试使用的完整代码：
<!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>Cinema Tel-Aviv</h2>
<label id='Year'></label>
<input id='slider' type='range' min='0' max='101' 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/light-v9',
center: [31.4606, 20.7927],
zoom: 0.5
});
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 = Years[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) {
d.properties.Year = new Date(d.properties.Year).getYear();
return d;
});
console.log(data.features.Year)
map.addSource('cinemas', {
'type': 'geojson',
'data': data
});
map.addLayer({
'id': 'cinema-circles',
'type': 'circle',
'source': 'cinemas',
'paint': {
'circle-color': '#FCA107',
'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(0);
document.getElementById('slider').addEventListener('input', function(e) {
var Year = parseInt(e.target.value, 101);
filterBy(Year);
});
});
});
</script>
</body>
</html>
答案 0 :(得分：3)
地图过滤器期望年份值并获得其他内容。
可以在滑块事件中解析年份。
var Year = parseInt(Years[e.target.value]);
更新过滤器功能以处理已解析的年份。
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;
}
json保持原样
data.features = data.features.map(function(d) {
return d;
});
初始年份已更新。
filterBy(1914);
此外：
因为getYear（）没有返回完整年份（“2000年问题”），所以它不再使用，并且已被getFullYear（）方法替换。