前端腾讯地图marker优化

思路

1 监听地图的拖拽 和 缩放事件
2 根据地图的可视区域，显示在范围里面的锚点，
3 筛选出地图范围里面的点，将点更新到地图，
4 删除地图上存在范围外的点

监听地图事件

防止事件触发太多频繁，增加防抖

map.on("dragend", function (e:any) {
    debounce(()=>{
        renderPoint(list)
    })()
})
map.on("zoom", function (e:any) {
    debounce(()=>{
        renderPoint(list)
    })()
})

var timeout: any = null;
/**
 * 防抖函数
 * @param fn
 * @param wait
 */
export function debounce(fn: any, wait:number = 500) {
    return function() {
        if(timeout !== null)  {
            clearTimeout(timeout);
        }
        timeout = setTimeout(fn, wait);
    }
}

处理锚点

 function renderPoint(list: SitePointType[]){
        let bounds:any = map.getBounds()
        let gList = []
        for (let i = 0; i < list.length; i++) {
            let site = list[i];
            if(!site.latitude || !site.longitude ) continue 
            //确定是否在范围内
            if( isBetweenNum(Number(site.latitude), bounds._ne.lat,bounds._sw.lat  ) &&
                isBetweenNum(Number(site.longitude), bounds._ne.lng,bounds._sw.lng  )
            ){
                let center = new TMap.LatLng(site.latitude, site.longitude);
                gList.push({
                    "id":   site.id,   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id 
                    "position":center,  //点标记坐标位置
                    "properties": site  //锚点携带的数据
                }) 
            }
        } 
        let gListIds = gList.map(i=>i.id)
        
        let src = markerLayer.getGeometries() //地图上原本的点
        let removeIds = src.filter((item:any)=>{
            return !gListIds.includes(item.id)
        })?.map((i:any)=>i.id) // 要移除的点
        markerLayer.updateGeometries(gList)  //合并更新
        markerLayer.remove(removeIds) // 移除不必要的点
    }

/**
 * 校验时候在数字中间 (t1, t2)
 * @param num
 * @param t1
 * @param t2
 */
export function isBetweenNum(num: number, t1:number, t2:number) {
    if(t2 < t1){
         [t1, t2] = [t2,t1]
    }
    return num> t1 && num < t2
}