我注意到当我在地图上显示结果时,如果您启用了聚类,您会收到两种类型的形状。
- 集群
- 特点(在我的情况下)
我想将所有结果显示为人员列表,即使他们正在聚类。
地图:
如您所见,我们有 2 人的 1 个集群。原因是因为在数据上我们有 2 个形状,集群特征和人物特征。
为了实现这个目标,我们做了下一个,
在 Moveend 事件中,我们将人员和集群存储在 2 个单独的数组中:
var clusters = [];
var persons = [];
data.forEach(function (shape) {
if (typeof shape.properties !== "undefined") {
if (shape.properties.cluster) {
clusters.push(shape.properties);
}
} else if (typeof shape.properties === "undefined") {
properties = shape.getProperties();
persons.push(properties);
}
});
在 Persons 数组上,我们有人员的信息,但在 clusters 数组上,我们只有集群的信息,所以我们在这个数组上迭代,得到数组中的每个人,如下所示,
if (clusters.length > 0) {
for (var i = 0; i < clusters.length; i++) {
datasource.getClusterLeaves(clusters[i].cluster_id).then(function (children) {
for (var i = 0; i < children.length; i++) {
children.forEach(function (personProps) {
persons.push(personProps.properties);
});
}
});
}
}
我构建集群层如下,
var clusterBubbleLayer = new atlas.layer.BubbleLayer(datasource, null, {
radius: 15,
color: '#007faa',
strokeColor: 'white',
strokeWidth: 2
});
map.layers.add(clusterBubbleLayer);
var clusterLabelLayer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
image: 'none',
font: ['SegoeUi-Bold'],
anchor: 'center',
allowOverlap: true,
ignorePlacement: true
},
textOptions: {
textField: '{point_count_abbreviated}',
size: 12,
font: ['StandardFont-Bold'],
offset: [0, 0.4],
color: 'white'
}
});
map.layers.add(clusterLabelLayer);
但是我想知道即使只有一个人,是否还有另一种方法可以将地图的所有记录显示为集群?
非常感谢!
解决方案1:
我发现我认为使用“顺序执行”的承诺是一个很好的解决方案,
现在我有一个 Promises 数组,所以每次使用 getClusterLeaves 方法都会返回一个 Promise,我将该响应存储在数组中,
var persons = [];
var promises = [];
data.forEach(function (shape) {
if (typeof shape.properties !== "undefined") {
if (shape.properties.cluster) {
promises.push(datasource.getClusterLeaves(shape.properties.cluster_id, 9999999, 0).then((e) => {
e.forEach(function (result) {
properties = result.properties;
persons.push(properties);
});
}));
}
}
});
然后我得到这些人,
var buildPerson = new Promise(resolve => {
data.forEach(function (shape) {
if (typeof shape.properties === "undefined") {
properties = shape.getProperties();
persons.push(properties);
}
});
resolve("solved");
});
最后,当集群功能的所有承诺完成时,我会显示所有结果,
function runSerial() {
Promise.all(promises)
.then(buildPerson)
.then(function () {
persons.forEach(function (person) {
BuildHtml(person);
});
displayNext();
});
}
runSerial();
而且效果很好:)