Question

我使用传单和标记集群。

我在带有数千个标记的传单地图上显示，我使用MarkerCluster创建聚类。它的工作非常好。现在我想替换图标以将饼图设为the example here

所以我重载了创建图标的函数：

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

我无法调整代码是链接，因为我不使用geojson数据，我的标记来自ajax调用。我想要做的是为每个集群制作一个简单的饼图，其中3个部分用于“Botanique＆＃39;”，“动物学”和＃39;和古生物学＆＃39;。所以对于一个集群我得到了孩子。对于每个孩子，我只能获得iconUrl链接，并计算每个“Botanique”，“动物学”和“动物学”。和＆＃39; Paleontologie＆＃39;。

我宣布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;
           }

是否有一种简单的方法可以创建返回svg的bakeThePie()函数？我找到的所有库都将svg直接附加到具有给定id的div中。

Answer 1

工作解决方案：

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

使用群集的 title 属性的 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调用以获取我需要的所有数据。例如，10个ajax调用谁创建每个500个标记。每次添加标记时，都会重新计算标记簇，并且图标的svg也会使浏览器冻结。也许只有在加载所有数据或使用函数调用时才能创建svg图标？

创建自定义传单markercluster svg图标

1 个答案: