首页 / 浏览问题 / WebGIS / 问题详情
classic聚类图层怎么修改默认的marker图片
35EXP 2020年07月16日
classic聚类图层示例demo怎么修改默认的marker图片,示例是一些蓝色,一些红色marker图标

2 个回答

您好,再创建聚类图层的时候,您可以定义clusterStyles,每个数组对象可以设置不同聚合数量时后的样式包括png

//创建一个名为“Cluster”的聚散点图层,并修改其clusterStyles属性。
var clusterLayer = new SuperMap.Layer.ClusterLayer("Cluster",{
    clusterStyles:[
        {
            "count":15,//子节点小于等于15的聚散点
            "style":{
                fontColor:"#404040",
                graphic:true,
                externalGraphic:SuperMap.Util.getImagesLocation()+"cluster3.png",
                graphicWidth:37,
                graphicHeight:38,
                labelXOffset:-4,
                labelYOffset:5
            }
        },
        {
            "count":50,//子节点小于等于50大于15的聚散点
            "style":{
                fontColor:"#404040",
                graphic:true,
                externalGraphic:SuperMap.Util.getImagesLocation()+"cluster2.png",
                graphicWidth:41,
                graphicHeight:46,
                labelXOffset:-3,
                labelYOffset:6
            }
        },
        {
            "count":"moreThanMax",// 子节点大于50的聚散点
            "style":{
                fontColor:"#404040",
                graphic:true,
                externalGraphic:SuperMap.Util.getImagesLocation()+"cluster1.png",
                graphicWidth:48,
                graphicHeight:53,
                labelXOffset:-5,
                labelYOffset:8
            }
        }
]});
3,352EXP 2020年07月17日
你好,这个你可以从  该范例的  SuperMap.Control.SelectCluster()的layer.clusterStyles的属性进行设置,externalGraphic参数设置您的marker,例如

 var mystyle =  [{count:15,
        style:{externalGraphic:"https://iclient.supermap.io/web/libs/iclient8c/libs/../theme/images/cluster3.png",
        fontColor:"red",
        graphic:true,
        graphicHeight:38,
        graphicWidth: 37,
        labelXOffset: -4,
        labelYOffset: 5}},
        {count:"moreThanMax",
        style:{externalGraphic:"https://iclient.supermap.io/web/libs/iclient8c/libs/../theme/images/cluster2.png",
        fontColor:"red",
        graphic:true,
        graphicHeight:38,
        graphicWidth: 37,
        labelXOffset: -4,
        labelYOffset: 5}}];
        
        select.layer.clusterStyles = mystyle;
        map.addControl(select);
2,842EXP 2020年07月17日
...