javascript - Mapbox GL Js - 在querySourceFeatures中看不到source.setData
问题描述
我正在使用 mapbox 来绘制标记和集群,并且我正在使用querySourceFeatures
(https://docs.mapbox.com/mapbox-gl-js/api/#map#querysourcefeatures)。
我的设置基于 Mapbox 的博文(https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/)
但是在我更新我的源(使用setData
)之后,querySourceFeatures
没有更新,所以我看不到我的新数据显示在地图上。
这是我的代码,有点简化:
const createData = ( ) => {
markersToGenerate += 10;
const totalFeatures = [{ "type": "Feature", "properties": { "id": "ak16994521", "mag": 2.3, "time": 1507425650893, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.5129, 63.1016, 0.0 ] } },
/** repeat this for 1200 times **/
];
const splicedFeatures = totalFeatures.splice(0, markersToGenerate);
return {
'type': 'geojson',
'data': {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": splicedFeatures
},
'cluster': true,
'clusterRadius': 80,
'clusterProperties': {
// keep separate counts for each magnitude category in a cluster
'mag1': ['+', ['case', mag1, 1, 0]],
'mag2': ['+', ['case', mag2, 1, 0]],
'mag3': ['+', ['case', mag3, 1, 0]],
'mag4': ['+', ['case', mag4, 1, 0]],
'mag5': ['+', ['case', mag5, 1, 0]]
}
}
}
map.on('load', function() {
// add a clustered GeoJSON source for a sample set of earthquakes
map.addSource('earthquakes', createData());
// circle and symbol layers for rendering individual earthquakes (unclustered points)
map.addLayer({
'id': 'earthquake_circle',
'type': 'circle',
'source': 'earthquakes',
'filter': ['!=', 'cluster', true],
'paint': {
'circle-color': [
'case',
mag1,
colors[0],
mag2,
colors[1],
mag3,
colors[2],
mag4,
colors[3],
colors[4]
],
'circle-opacity': 0.6,
'circle-radius': 12
}
});
map.addLayer({
'id': 'earthquake_label',
'type': 'symbol',
'source': 'earthquakes',
'filter': ['!=', 'cluster', true],
'layout': {
'text-field': [
'number-format',
['get', 'mag'],
{ 'min-fraction-digits': 1, 'max-fraction-digits': 1 }
],
'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
'text-size': 10
},
'paint': {
'text-color': [
'case',
['<', ['get', 'mag'], 3],
'black',
'white'
]
}
});
// every 5 seconds add a marker to the source and set that
setInterval( () => {
console.log('Update source');
map.getSource('earthquakes').setData(createData());
}, 5000)
// objects for caching and keeping track of HTML marker objects (for performance)
var markers = {};
var markersOnScreen = {};
function updateMarkers() {
console.log("# updateMarkers called")
var features = map.querySourceFeatures('earthquakes');
// There are more features retrieved - since some are displayed on multiple tiles ... so they are counted double. The point here is to show the count isn't increasing.
console.log("Total features displayed = " + features.reduce( (totalCount, feature) => {
if (feature.properties.cluster) {
return totalCount + feature.properties.point_count;
} else {
return totalCount + 1;
}
}, 0));
}
有关完整(实际运行的)代码,请查看此代码笔:https ://codepen.io/skarnl/pen/RwWrdPm?editors=0010
一些额外的解释,我如何测试这个:
我添加了一个名为的方法,该方法createData
将生成一个新的 GeoJson 并将其用于setData
调用。我还添加了一个setInterval
以每 5 秒添加 10 个标记。
我可以让这个工作的唯一方法是删除图层和源并再次重新添加它们。这可行......但它会导致闪烁,因为该层已被完全移除。
我在这里做错了什么?
解决方案
After resorting to the official Gitlab for Mapbox GL JS to post this as an bug, the solution turned out to be quiet simple: using setData
needs to get only the data part of the GeoJSON - not the complete GeoJson-object all over again.
So only setting the data will solve this. Hope someone else can use this information.
And to use my own example:
map.getSource('earthquakes').setData(createData().data);
// The .data part is important here!
// We don't want to use the complete GeoJSON, but only the data part in it
推荐阅读
- python - 如何在不丢失值的情况下将 json 解析为 pandas 数据框?
- r - 从R中的语言对象中提取属性
- c - %[^:]: 在 sscanf() 中是什么意思?
- python - 在 Python (Anaconda) 中安装 TabNet 的问题
- c++ - clang::PluginASTAction::ActionType 中的主要操作是什么
- javascript - 如何在音频标签中使用十六进制
- oracle - 根据总和值更新记录
- c++ - c++ ifstream fail() 标志打开但 strerror() 没有显示错误
- android - 无法从活动中观察视图模型中的实时数据集
- python - 如何根据该文件中行中的日期将特定日期之间的 CSV 文件的值传输到另一个 CSV 文件?