MarkerClustererPlus：设置图标颜色/网址，与大小无关

Question

我正在通过MarkerClustererPlus绘制几十万个点，我想基于某些外部属性设置群集图标组（颜色）（不基于所表示的标记数量）。< / p>

我能想到的唯一方法是创建多个MarkerClusterer对象并传入一个不同的options对象，但我觉得这样做会有很大的影响力。还有更好的方法吗？

鉴于上图，我希望139,24和5为黄色，213,25,30和2为红色;如果可能，通过setOptions更新其样式/选项：
mc.group[0].setOptions({"url": imgPath +lookupThreshold(severity)+ '.svg' });
mc.group[1].setOptions({"url": imgPath +lookupThreshold(severity)+ '.svg' });

P.S。如果有人有兴趣，我调整了lib，所以群集图标通过提供svg图像并增加宽度和宽度来缩放到它的大小^†。选项对象中的高度：

var mcOptions = {
  "styles": [{
    "height": 19,
    "url": img/map/clusters/",
    "width": 19
  },{
    "height": 24,
    "url": img/map/clusters/",
    "width": 24
  }, {…}]
};
for ( var s = mcOptions.styles.length-1; s >= 0; s-- )
{ mcOptions.styles[s].url += lookupThreshold(severity) + '.svg'; }
// lookupThreshold switches severity and returns a string: red, orange, …

然后将以下内容添加到markerclusterer.js：

line 275: this.backgroundSize_ = style.backgroundSize || "contain";
line 300: style.push('background-size:' + this.backgroundSize_ + ';');

^†适用于Ffx 19.0.2，Chrome 26.x，Chrome Canary 28.x，Safari 6.0.2，IE 9.0.8（但不适用于Opera 12.15）。

编辑创建多个MarkerClusterer实例似乎没有太大的性能影响;但是，似乎传递给MC的属性/选项对象是MC的实例共享。

已解决我必须修改第665行附近的MarkerClustererPlus库以克隆opt_options（lib正在使用引用，这导致所有先前的opt_options被最新/最后一个覆盖传递）。

Answer 1

事实证明问题来自MarkerClustererPlus lib本身：

656:  function MarkerClusterer(map, opt_markers, opt_options) {
…
665:    opt_options = opt_options || {};

行 665 为现有对象创建引用，而不是新副本。我无法使用 1539 行中的MarkerClusterer.prototype.extend，因为它没有进行深层复制（并且它只扩展了对象的原型）。

所以，我编写了自己的深拷贝函数（jsfiddle），这是我全局可用的（而不是将它添加到 Array 和 Object <的原型中/ em>的）：

function deepCopy(obj) {  
  this.cloneArr = function (arr) {
    var newArr = [];
    for ( var i = arr.length-1; i >= 0; i-- ) newArr[i] = this.evalObj( arr[i] );
    return newArr;
  };
  this.cloneObj = function(obj) {
    var newObj = {};
    for ( var prop in obj ) newObj[prop] = this.evalObj( obj[prop] );
    return newObj;
  };
  this.evalObj = function(obj) {
    switch ( typeof obj ) {
      case 'object':
        if ( Array.isArray( obj ) ) return this.cloneArr( obj );
        if ( obj instanceof Date === false ) return this.cloneObj( obj );
        // pass thru dates, strings, numbers, booleans, and functions
      default: return obj; // primitive
    }
  };
  return this.evalObj(obj);
}

然后我将 MarkerClustererPlus.js 更改为以下内容：

656:  function MarkerClusterer(map, opt_markers, opt_optionsG) {
…
665:    var opt_options = deepCopy( opt_optionsG ) || {};

我测试了5个MarkerClustererPlus实例（每个实例有5000个标记，总共25000个），与单个MC +实例相比，没有可识别的性能影响。