思路
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
}
