創建自定義傳單markercluster svg圖標

我正在使用傳單和markercluster。創建自定義傳單markercluster svg圖標

我在包含數千個標記的小冊子地圖上顯示，我使用MarkerCluster創建羣集。這工作非常好。現在我想替換圖標讓餅圖爲the example here

所以我重載它創建圖標的功能：

var markerCluster = new L.MarkerClusterGroup({ 
       showCoverageOnHover: false, spiderfyOnMaxZoom: true, zoomToBoundsOnClick: true, 
       iconCreateFunction: defineClusterIcon 
      });

我無法適應代碼的鏈接，因爲我不使用geojson數據，我的標記是從ajax調用中獲取的。我想要做的是獲得一個簡單的餅圖，每個集羣有3個部分，分別是'植物學'，'動物學'和'古生物學'。因此，對於一個集羣我得到孩子。對於每個孩子我只能得到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？我找到的所有庫都直接在帶給定ID的div中附加svg。

來源

2015-03-03 AlainIb

工作液：

var markerCluster = new L.MarkerClusterGroup({ 
       showCoverageOnHover: false, 
       spiderfyOnMaxZoom: true, 
       zoomToBoundsOnClick: true, 
       iconCreateFunction: defineClusterIcon // this function render the cluster icon 
      });

標記的創建方法：

L.marker([DECIMALLATITUDE, L_DECIMALLONGITUDE],{icon: icontmp, 'title': domaine,'domaine':domaine,'occurenceid':id}).on('click', getSpecimenDataOnClick).addTo(markerCluster);

而且defineClusterIcon功能誰使用羣集的標題屬性：

function defineClusterIcon(cluster) { 
/*function that generates a svg markup for the pie chart*/ 
function bakeThePie(options) { 
    /*data and valueFunc are required*/ 
    if (!options.data || !options.valueFunc) { 
     return ''; 
    } 
    var data = options.data, 
    valueFunc = options.valueFunc, 
    r = options.outerRadius ? options.outerRadius : 28, //Default outer radius = 28px 
    rInner = options.innerRadius ? options.innerRadius : r - 10, //Default inner radius = r-10 
    strokeWidth = options.strokeWidth ? options.strokeWidth : 1, //Default stroke is 1 
    pathClassFunc = options.pathClassFunc ? options.pathClassFunc : function() { 
     return ''; 
    }, //Class for each path 
    pathTitleFunc = options.pathTitleFunc ? options.pathTitleFunc : function() { 
     return ''; 
    }, //Title for each path 
    pieClass = options.pieClass ? options.pieClass : 'marker-cluster-pie', //Class for the whole pie 
    pieLabel = options.pieLabel ? options.pieLabel : d3.sum(data, valueFunc), //Label for the whole pie 
    pieLabelClass = options.pieLabelClass ? options.pieLabelClass : 'marker-cluster-pie-label', //Class for the pie label 

    origo = (r + strokeWidth), //Center coordinate 
    w = origo * 2, //width and height of the svg element 
    h = w, 
    donut = d3.layout.pie(), 
    arc = d3.svg.arc().innerRadius(rInner).outerRadius(r); 

    //Create an svg element 
    var svg = document.createElementNS(d3.ns.prefix.svg, 'svg'); 
    //Create the pie chart 
    var vis = d3.select(svg) 
     .data([data]) 
     .attr('class', pieClass) 
     .attr('width', w) 
     .attr('height', h); 

    var arcs = vis.selectAll('g.arc') 
     .data(donut.value(valueFunc)) 
     .enter().append('svg:g') 
     .attr('class', 'arc') 
     .attr('transform', 'translate(' + origo + ',' + origo + ')'); 

    arcs.append('svg:path') 
    .attr('class', pathClassFunc) 
    .attr('stroke-width', strokeWidth) 
    .attr('d', arc) 
    .append('svg:title') 
    .text(pathTitleFunc); 

    vis.append('text') 
    .attr('x', origo) 
    .attr('y', origo) 
    .attr('class', pieLabelClass) 
    .attr('text-anchor', 'middle') 
    //.attr('dominant-baseline', 'central') 
    /*IE doesn't seem to support dominant-baseline, but setting dy to .3em does the trick*/ 
    .attr('dy', '.3em') 
    .text(pieLabel); 
    //Return the svg-markup rather than the actual element 
    return serializeXmlNode(svg); 
} 

/*Helper function*/ 
function serializeXmlNode(xmlNode) { 
    if (typeof window.XMLSerializer != "undefined") { 
     return (new window.XMLSerializer()).serializeToString(xmlNode); 
    } else if (typeof xmlNode.xml != "undefined") { 
     return xmlNode.xml; 
    } 
    return ""; 
} 

var children = cluster.getAllChildMarkers(); 

var n = children.length; //Get number of markers in cluster 
var strokeWidth = 1; //Set clusterpie stroke width 
var r = 30 - 2 * strokeWidth - (n < 10 ? 12 : n < 100 ? 8 : n < 1000 ? 4 : 0); //Calculate clusterpie radius... 
var iconDim = (r + strokeWidth) * 2; //...and divIcon dimensions (leaflet really want to know the size) 
var data = d3.nest() //Build a dataset for the pie chart 
    .key(function (d) { 
     return d.options.title; 
    }) 
    .entries(children, d3.map); 
//bake some svg markup 
var html = bakeThePie({ 
     data : data, 
     valueFunc : function (d) { 
      return d.values.length; 
     }, 
     strokeWidth : 1, 
     outerRadius : r, 
     innerRadius : r - 10, 
     pieClass : 'cluster-pie', 
     pieLabel : n, 
     pieLabelClass : 'marker-cluster-pie-label', 
     pathClassFunc : function (d) { 
      return "category-" + d.data.key; 
     }, 
     pathTitleFunc : function (d) { 
      return d.data.key + ' (' + d.data.values.length + ' specimen' + (d.data.values.length != 1 ? 's' : '') + ')'; 
     } 
    }); 
//Create a new divIcon and assign the svg markup to the html property 
var myIcon = new L.DivIcon({ 
     html : html, 
     className : 'marker-cluster', 
     iconSize : new L.Point(iconDim, iconDim) 
    }); 
return myIcon;

}

這項工作但不是很好（瀏覽器凍結或顯示一個彈出窗口來停止腳本），因爲我做了迭代Ajax調用來獲取我需要的所有數據。例如，創建每個500個標記的10個Ajax調用。每次添加標記時，都會重新計算標記羣集，同時也會使瀏覽器凍結圖標的svg。也許有一種解決方案只有在所有數據加載或函數調用時才創建svg圖標？

來源

2015-03-27 09:06:06 AlainIb

創建自定義傳單markercluster svg圖標

回答

相關問題