Я использую листовку и маркер.
Я показываю листовки с тысячами маркеров и использую MarkerCluster для создания кластеров. Работает очень хорошо. Теперь я хочу заменить значок, чтобы получить круговые диаграммы как здесь
Поэтому я перегружаю функцию, которая создает значок:
var markerCluster = new L.MarkerClusterGroup({
showCoverageOnHover: false, spiderfyOnMaxZoom: true, zoomToBoundsOnClick: true,
iconCreateFunction: defineClusterIcon
});
Я не могу адаптировать код, это ссылка, потому что я не использую данные geojson, мои маркеры получаются из вызовов ajax. Что я хочу сделать, так это получить простую круговую диаграмму для каждого кластера с 3 частями для «Botanique», «Zoologie» и «Paleontologie». Итак, для кластера я получаю дочерние элементы. для каждого ребенка я могу получить только iconUrl
ссылку и посчитать каждую «Ботанику», «Зоологию» и «Палеонтологию».
Заявляю iconCreateFunction()
:
function defineClusterIcon(cluster) {
var children = cluster.getAllChildMarkers();
var bcount = 0,
zcount = 0,
pcount = 0 ;
for(var i in children){
var child = children[i];
switch ( child.options.icon.options.iconUrl ){
case 'resources/vendors/leaflet/images/marker-icon-bota.png' :
hcount ++; break ;
case 'resources/vendors/leaflet/images/marker-icon-paleon.png' :
pcount ++; break ;
case 'resources/vendors/leaflet/images/marker-icon-zoo.png' :
zcount ++; break ;
}
}
var data = {
'Botanique' : hcount ,
'Zoologie' : zcount ,
'Paleontologie' : pcount
};
//bake some svg markup
var html = bakeThePie(data);
//Create a new divIcon and assign the svg markup to the html property
myIcon = new L.DivIcon({
html: html,
className: 'marker-cluster',
iconSize: new L.Point(iconDim, iconDim)
});
return myIcon;
}
Есть ли простой способ создать функцию bakeThePie()
, возвращающую svg? Все библиотеки, которые я нашел, добавляют svg прямо в div с заданным идентификатором.