2013-04-15 10 views
5

Planuję kilkaset tysięcy punktów za pośrednictwem MarkerClustererPlus i chcę ustawić grupy ikon klastra (koloru) na podstawie pewnej właściwości zewnętrznej (nie na podstawie liczby oznaczone znaczniki).MarkerClustererPlus: ustaw kolor ikony/URL niezależny od rozmiaru

Jedyny sposób, w jaki mogę to zrobić, polega na utworzeniu wielu obiektów MarkerClusterer i przejściu w innym obiekcie options, ale mam wrażenie, że wykonam wielki hit wydajnościowy. Czy istnieje lepszy sposób?

Marker Clusterer Plus with differently sized icons scaled to fit.

Uwzględniając powyższe obrazu, ja jak 139, 24 i 5 do koloru żółtego, 213, 25, 30 i 2, tak że czerwony; i jeśli to możliwe, należy zaktualizować swoje style/opcje poprzez setOptions:
mc.group[0].setOptions({"url": imgPath +lookupThreshold(severity)+ '.svg' });
mc.group[1].setOptions({"url": imgPath +lookupThreshold(severity)+ '.svg' });

PS: Jeśli ktoś jest zainteresowany, mogę manipulowane lib więc ikona klaster wagi do jego wielkości dostarczając SVG wizerunku i zwiększenie szerokości & wysokość w opcjach obiektu:

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, … 

Następnie dodaje następujące do markerclusterer.js:

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

Works w FFX 19.0.2, Chrome 26.x, Chrome Canary 28.x, Safari 6.0.2, 9.0.8 IE (ale nie Opera 12.15).

EDYTOWANIE Wygląda na to, że wydajność wielu wystąpień MarkerClusterer jest niewielka; jednakże wydaje się, że obiekt właściwości/opcji przekazany do MC jest udostępniony w przypadku wystąpień MC.

rozwiązać miałem modyfikowania biblioteki MarkerClustererPlus pobliżu linii 665 do klonowania opt_options (lib używał odniesienia, który spowodował wszystkie poprzednie opt_options być zastąpione Ostatnio/ostatnią upłynął).

+0

Czy sprawdziłeś ten link? http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/advanced_example.html – Fabi

+0

@Fabi, tak. Powodem, dla którego klastry są różnymi klastrami, jest to, że mają one różne rozmiary. Chcę, aby wszystkie rozmiary konkretnej grupy klastrów miały ten sam kolor (ale różnią się rozmiarem); różne grupy powinny mieć różne kolory. – jacob

+0

Na razie nie widzę innego rozwiązania niż to, co masz - wiele instancji, ponieważ są to różne grupy. – Fabi

Odpowiedz

2

Okazuje się kłopoty wracał z samego MarkerClustererPlus lib:

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

Linia tworzy odniesienie do istniejącego obiektu, zamiast nowej kopii. Nie mogłem użyć MarkerClusterer.prototype.extend z linii , ponieważ nie tworzy ona głębokiej kopii (i rozszerza tylko prototyp obiektu).

Więc napisałem własną funkcję głębokiego kopiowania (jsfiddle), który zrobiłem globalnie dostępny (zamiast dodawać go do prototypów zarówno Array i Object):

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); 
} 

I następnie zmieniony MarkerClustererPlus.JS do:

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

Przetestowane mający 5 wystąpień MarkerClustererPlus (każdy z 5000 markerów łącznie 25000), i nie było decernable spadek wydajności w porównaniu z pojedynczym wystąpienie MC +.

Screenshot of multiple instances of MarkerClustererPlus

+0

Bardzo pomocne, gdzie dodać funkcję deepCopy? I jaki jest twój szczegółowy kod w html, aby zmienić kolor? Dziękuję – Orz

+0

Według mojej odpowiedzi, umieściłem to "globalnie" (dołączone do 'okna'). Kolor znaczników jest kontrolowany przez SVG dostarczony we właściwości 'url'. – jacob

Powiązane problemy