天地图点聚合

不管是在什么地图中都会碰到接口返回的点位太多，导致地图比较卡或者显示不好看的情况，这时候就用到了点聚合。

• 创建并初始化地图
• 通过后台接口或者自定义加载点位
• 循环点位，对这些点进行聚合
• 修改聚合后的点位样式

<script>
    var map=""
    initMap()
    function initMap(){
        map = new T.Map('loadMap');
        map.centerAndZoom(new T.LngLat(120.5689390,30.2653626), zoom);
        initMarker()
    }
    function initMarker(){
        var markerObject
        var clustererObject 
        var pointArray=[
            {id: "bb01a3cd987f469d9e0f04dffa2d3201", point:["120.5722764100", "30.2743562500"], link: null, name: "晋欣商旅"}
            {id: "bb01a3cd987f469d9e0f04dffa2d3202", point:["120.5737974100", "30.2748042500"], link: null, name: "起点公寓"}            {id: "bb01a3cd987f469d9e0f04dffa2d3203", point:["120.5765520400", "30.2820338600"], link: null, name: "阳光公寓"}        
        ]
        for(var i=0;i<pointArray.length;i++){
            var icon;
            icon=new T.Icon({    
                iconUrl: "img/page3/position/zhgy1.png",    
                iconSize: new T.Point(20, 20),    
                iconAnchor: new T.Point(0, 0)
            });
            var point = new T.LngLat(pointArry[i].point[0],pointArry[i].point[1])            var marker = new T.Marker(point,{icon:icon})            marker.name = pointArry[i].name || ''
            markerObject.push(marker);
        }
        clustererObject = new T.MarkerClusterer(map, {markers: markerObject});  //点聚合        clustererObject.setMaxZoom(18)    //设置聚合点的最大缩放级别
        clustererObject[item].setStyles([    
            {        
                url:'img/page3/position/hlwjk.png',        
                size:[58, 75], //图片大小        
                offset:new T.Point(-15, -13), //显示图片的偏移量        
                textColor:'#fff', //显示数字的颜色        
                textSize:9,//显示文字的大小        
                range:[0, 10000],    
            }    
        ])
    }
</script>

效果图

这是我自己在项目中遇到的实际需求，有什么问题，欢迎私聊！！！