Hou*_*daF 6 mapbox typescript angular
我按照这个示例https://www.mapbox.com/mapbox-gl-js/example/timeline-animation/创建基于时间的可视化。我正在使用这个版本“d3”:“^5.4.0”代码是:
d3.json('http://127.0.0.1:5000', function (err, data) {
if (err) throw err;
// Create a month property value based on time
// used to filter against.
data.features = data.features.map(function (d) {
d.properties.month = new Date(d.properties.time).getMonth();
return d;
});
map.addSource('visits', {
'type': 'geojson',
'data': data
});
map.addLayer({
'id': 'visits-circles',
'type': 'circle',
'source': 'visits',
'paint': {
'circle-color': [
'interpolate',
['linear'],
['get', 'name'],
6, '#FCA107',
8, '#7F3121'
],
'circle-opacity': 0.75,
'circle-radius': [
'interpolate',
['linear'],
['get', 'name'],
6, 20,
8, 40
]
}
});
map.addLayer({
'id': 'visits-labels',
'type': 'symbol',
'source': 'visits',
'layout': {
'text-field': ['concat', ['to-string', ['get', 'name']], 'm'],
'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 month of the year
// 0 = January
filterBy(0);
document.getElementById('slider').addEventListener('input', function (e) {
var month = parseInt(e.target.value, 10);
filterBy(month);
});
Run Code Online (Sandbox Code Playgroud)
我对数据的 URL 执行完全相同的操作,但收到一些错误消息
错误 TS2559:类型“(错误:任意,数据:任意)=> void”与类型“RequestInit”没有共同的属性 错误 TS2339:类型“EventTarget”上不存在属性“值”。
有人知道如何解决它吗?
d3 的类型信息表明了一个基于承诺的接口 - 也许旧版本使用了回调。
您的代码遵循回调模式:
d3.json('http://127.0.0.1:5000', function (err, data) {
// Handle err
// Use data
});
Run Code Online (Sandbox Code Playgroud)
这是承诺版本:
d3.json('http://127.0.0.1:5000')
.then((data) => {
// Use data
})
.catch((err) => {
// Handle err
});
Run Code Online (Sandbox Code Playgroud)
data您可以输入返回的内容。将类型参数传递给该json方法以告诉它您将返回哪种数据。例如:
interface ResponseData {
features: any[];
}
d3.json<ResponseData>('http://127.0.0.1:5000')
.then((data) => {
// Use data
})
.catch((err) => {
// Handle err
});
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
13064 次 |
| 最近记录: |