SuperMap iClient JS之图层点以聚散的形式渲染

SuperMap iClient JS之图层点以聚散的形式渲染

作者：WJH

地图功能:
使用ClusterLayer类将要素以聚散的形式渲染出来，可通过clusterStyles属性修改cluster的分级以及各级的样式（其样式可以为自定义点或者外部图片），具体在JavaScript API中进行参考。

代码块：
使用SuperMap.Layer.ClusterLayer创建聚散点图层。

var ClusterLayer = new SuperMap.Layer.ClusterLayer("Cluster Layer",{
            clusterStyles:[
                {
                    "count":50,//子节点小于等于50的聚散点
                    "style":{
                        fontColor:"#404040",
                        fontSize:"10px",
                        externalGraphic:"../../../static/imager/cluster2.png",
                        graphicWidth:40,
                        graphicHeight:46,
                        labelXOffset:-4,
                        labelYOffset:5
                    }
                },
                {
                    "count":"moreThanMax",// 子节点大于50的聚散点
                    "style":{
                        fontColor:"#404040",
                        fontSize:"12px",
                        externalGraphic:"../../../static/imager/cluster1.png",
                        graphicWidth:50,
                        graphicHeight:56,
                        labelXOffset:-6,
                        labelYOffset:7
                    }
                }
        ]});
        mySelf.map.addLayer(ClusterLayer);

之后把所有暂时的点循环添加到聚散点图层中。这部分的样式设置的是地图到一定范围内，显示的单个点的样式。

        res.data.data.forEach((item)=>{
            var point = new SuperMap.Geometry.Point(item.longitude == "" ? 0 : parseFloat(item.longitude), item.latitude == "" ? 0 : parseFloat(item.latitude));
            var style = {
                externalGraphic: "../../../static/imager/p_red_s111.png",
                graphicYOffset: -34,
                graphicXOffset: -18,
                graphicWidth: 20, // 图片宽
                graphicHeight: 26 // 图片高
            };
            var featureVector = new SuperMap.Feature.Vector(point,null,style);
            mySelf.pointVectors.push(featureVector);
        })
       ClusterLayer.addFeatures(mySelf.pointVectors);

效果：
比例范围比较大的状态下：蓝色图片代表小于50的节点，红色则是大于50的。

在比例范围比较小的状态下：

说明：点的样式可根据需要，自定义点样式或者连接外部图形。