Azure地图,将所有搜索结果显示为群集

时间:2019-02-20 10:20:06

标签: javascript asynchronous promise azure-maps

我注意到,当我在地图上显示结果时,如果启用了聚类,则会收到两种形状。

  • 集群
  • 功能(以我的情况为例)

我想将所有结果显示为人员列表,即使他们正在聚集。

地图:

Map

如您所见,我们在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 Array,所以每次使用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();

效果很好:)

0 个答案:

没有答案