Highmaps选择启用了聚类的多个点会丢失已选择的内容

Question

我需要允许用户在地图上选择多个纬度/经度（城市），将其添加到已选择区域的列表中。如果他们单击已经选择的区域，它将被从选择的列表中删除。这很好。我现在需要实现点聚类，因为某些区域需要显示很多点，而且变得混乱。我添加了这个。但是，现在，如果您单击不在聚类中的一组点，然后在聚类上单击以缩放到该点并选择一个或多个或不选择任何点，然后单击“重置缩放”以返回到初始加载，则所有选定的点现在都已未选择。

可复制示例here。重现步骤：

• 点击“圣地亚哥·德孔波斯特拉”和“马拉加”（请注意，现在变成红色），然后点击“获取积分”按钮。这应该写这两个名称添加到控制台。
• 现在单击这两点之间的“ 6”簇。点击“重置缩放”并注意2个初始点不再是红色。单击“获取积分”-没有任何内容写入控制台。
• 再次单击这两个城市，使其变为红色。现在点击再次在这两点之间创建“ 6”簇，然后单击“ Faro”（请注意，它变成红色）。现在点击“获取积分”-注意“ Faro”被写入控制台。现在单击“重置缩放”，然后单击再次“获取积分”-没有任何内容写入控制台。

我希望无论群集点或单击“重置缩放”按钮如何，都将选择任何现有的点。

我选择点的代码如下：

point: {
  events: {
    click: function() {
      if (typeof this.name !== 'undefined') {
        var clickedPoint = this,
          chart = this.series.chart;

        chart.series.forEach(function(s) {
          s.points.forEach(function(p) {
            if (p.x === clickedPoint.x) {
              p.select(null, true);
            }
          });
        });
      }
    }
  }
}

}

然后我在不同功能中使用此选定点列表：

$('#GetPoints').click(function() {
  var chart = $('#container').highcharts();
  var selects = chart.getSelectedPoints();
  $(selects).each(function(y, point) {
    if (point.selected) {
      console.log(point.name);
    }
  });
});

Answer 1

您正在努力解决的问题与缩放退出后的图表渲染有关，或者在调整大小时也可以看到该问题。

您需要做的是在某处保存已选择点的信息，并在图表重绘后将其设置为再次选择。

我关于如何通过将所选点保留在全局数组storedPoints中的想法：https://jsfiddle.net/BlackLabel/duzypvbj/

point: {
  events: {
    click: function() {
      if (typeof this.name !== 'undefined') {
        var clickedPoint = this,
          chart = this.series.chart;

        chart.series.forEach(function(s) {
          s.points.forEach(function(p) {
            if (p.x === clickedPoint.x) {
              p.select(null, true);

              // add the first point to array
              if (!storedPoints.length) {
                storedPoints.push(p.x)
              }
              // if point doesn't exist in array - add it
              if (!storedPoints.filter(point => point.x === p.x).length) {
                storedPoints.push(p.x)
              }

              // clean array if point is unselected
              if (!p.state) {
                console.log('test')
                console.log(storedPoints)
              }
            }
          });
        });
      }
    }
  }
}

让我知道您如何看待这种解决方案。