HERE 映射 JS API v3 集群提供程序挂起，添加许多数据点

HERE Maps JS API v3 cluster provider hangs adding many DataPoints

本文关键字：挂起 程序 添加 多数据 JS 映射 API v3 HERE      更新时间：2023-09-26

我搞砸了HERE Maps JS API从v2.5.4到v3的迁移。

我面临的最大问题与H.clustering.Provider有关。虽然 v2.x 版本就像一个魅力，但 v3 版本似乎真的很慢。

给定以下代码：

var clusterProvider = new H.clustering.Provider([], {
    clusteringOptions: {
        eps: 32,
        minWeight: 3,
        max: 20,
        min: 10
    }
});
var clusteringLayer = new H.map.layer.ObjectLayer(clusterProvider);
map.addLayer(clusteringLayer);
for(i = 0; i < 1000; i++)
{
    var lat = 43 + (i * 0.001);
    var lng = 13 + (i * 0.001);
    var dp = new H.clustering.DataPoint(lat, lng, null, null);
    clusterProvider.addDataPoint(dp); // <- this line cause hanging
}

在呈现群集之前，页面会挂起数秒。

在文档中，我读到：

addDataPoint （dataPoint）

此方法将数据点添加到提供程序。请注意，此方法会引起整个数据集的重新聚类。

但是，我无法使用 setDataPoints 方法，因为我需要群集在每次地图平移或缩放时刷新（而不是重新开始）。

在 v2 版本中，我将为每个数据点调用聚类分析提供程序的 addObject 方法，并在末尾调用cluster。此工作流是即时的。

知道吗？

提前致谢

因此，从我从文档和此处的示例中获得的信息来看，我认为您的问题是，对于您添加的每个点，您都在运行整个数据集的完整重新聚类（无论您已经添加的任何内容）。因此，随着您添加单个数据点，您将有 1000 个聚类分析操作变得越来越复杂。

在您的情况下，您应该可以在实例化提供程序之前填充数据点数组，或者在稍后阶段使用 setDataPoint。群集操作必须在某个时候发生。在旧的 API 中，当您调用"cluster"时会发生这种情况，但现在它会在渲染对象层时按需发生，并且每次添加数据点或设置数据点时都会发生。

地图已负责根据静态聚类计算为您更新标记。

总之，该过程如下：

  1. 提供程序接收数据点数组作为数据集
  2. 它对此数据集进行全局聚类并生成静态所有缩放级别的聚类结果
  3. 当地图渲染时，将为每个聚类调用主题，并且已计算的聚类结果中的噪声点，以便为当前地图位置渲染正确的标记并缩放水平
  4. 每当数据集更改时重复 1-3

因此，给上面链接的示例一个旋转（它聚集了一千多个点，对我来说几乎没有任何延迟），看看它是否做到了你要找的。

编辑：（基于下面的评论）以下是我的建议：保留两个数组，一个表示整个数据集，一个跟踪更改批次。始终从服务器响应中填充批处理数组。一旦 mapviewchangeend 命中，将批处理数组添加到数据数组中，然后在提供程序上设置数据集数组。

var clusterProvider = new H.clustering.Provider([], {
    clusteringOptions: {
        eps: 32,
        minWeight: 3,
        max: 20,
        min: 10
    }
});
var clusteringLayer = new H.map.layer.ObjectLayer(clusterProvider);
map.addLayer(clusteringLayer);
var clusterSet = [],
    batchSet = [],
    maxDataSetSize = 5000;
map.addEventListener('mapviewchangeend', function() {
  // if we added any points between mapviewchangestart / end
  if(batchSet.length > 0) {
    // we add the data and slice take a subset of 5000 points to keep
    // the data set at manageable size (adjust to your liking)
    clusterSet = batchSet.concat(clusterSet).slice(0, maxDataSetSize);
    clusteringProvider.setDataPoints(clusterSet);
  }
  batchSet = [];
});
//whereever you receive your data:
function onReceiveData(dataPoints) {
  // always push to the batch set
  batchSet = batchSet.concat(dataPoints);
}

相关文章：