社区首页 >问答首页 >创建自定义传单标记簇svg图标

问创建自定义传单标记簇svg图标
EN

Stack Overflow用户

提问于 2015-03-03 02:01:08

回答 1查看 2.9K关注 0票数 1

我用的是传单和商标。

我在传单上显示了数千个标记，并使用MarkerCluster创建集群。工作很好。现在，我想替换图标，以获得饼图为这里的例子

因此，我重载了创建图标的函数：

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

我无法修改代码是链接，因为我不使用geojson数据，我的标记是从ajax调用中获得的。我想要做的是得到一个简单的饼图，每个星系团有三个部分，分别是“植物学”、“动物学”和“古生物论”。所以对于一个集群，我得到了孩子。对于每一个孩子，我只能得到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;
           }

有没有一种简单的方法来创建返回svg的bakeThePie()函数？我找到的所有库都直接在带有给定id的div中追加svg。

markerclusterer

leaflet

回答 1

Stack Overflow用户

发布于 2015-03-27 01:06:06

工作解决方案：

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;