MarkerClustererPlus:设置图标颜色/网址,与大小无关

Question

我正在通过MarkerClustererPlus绘制几十万个点,我想基于一些外部属性(不是基于所表示的标记的数量)设置一组群集图标(颜色).

我能想到的唯一方法就是创建多个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' });

PS如果有人感兴趣,我调整了lib,所以群集图标通过提供svg图像并增加options对象中的宽度和高度来缩放到它的大小^†:

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 库本身：

\n\n

656:  function MarkerClusterer(map, opt_markers, opt_options) {\n\xe2\x80\xa6\n665:    opt_options = opt_options || {};\n

\n\n

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

\n\n

因此，我编写了自己的深度复制函数（jsfiddle ），并将其全局可用（而不是将其添加到Array和Object的原型中）：

\n\n

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

\n\n

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

\n\n

656:  function MarkerClusterer(map, opt_markers, opt_optionsG) {\n\xe2\x80\xa6\n665:    var opt_options = deepCopy( opt_optionsG ) || {};\n

\n\n

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

\n\n

\n