如何只展示当前地图视区的定位 mark

# 如何只展示当前地图视区的定位 mark

当项目里面需要用到地图来展示数据的时候，如果数据量过大，同时生成大量的定位 mark，会导致地图加载以及拖动变卡顿。因此在展示定位 mark 的时候就需要进行懒加载（这里的懒加载是我自己认为的），也就是只加载当前地图视区内的定位 mark, 视区外的定位 mark 不加载，当定位 mark 的坐标进入当前视区后再加载。

# 获取地图四个边角点的坐标

通过 openlayers 的 calculateExtent 方法可以获取到地图四个边角点的坐标，

const mapInfo = this.map.getView().calculateExtent(this.map.getSize()) // getView是获取地图view的方法

获取到的 mapInfo 是由四个边角点的经纬度组成的一个数组，其中：

左上边角点：经度 mapInfo[0]，纬度 mapInfo[3]

右上边角点：经度 mapInfo[2]，纬度 mapInfo[3]

左下边角点：经度 mapInfo[0]，纬度 mapInfo[1]

右下边角点：经度 mapInfo[2]，纬度 mapInfo[1]

# 根据获取到的地图四个边角点坐标计算当前地图视区内的定位 mark

// 生成地图定位mark
const overlayDom = document.querySelector(`#overlay-element-${factory.id}`)
const imgDom = document.querySelector(`#img-${factory.id}`)
const anchor = new window.ol.Overlay({
  element: imgDom,
  className: `customer-anchor customer-anchor-${index}`,
  positioning: 'center-center',
  position: positions[index],
})
// 计算mark是否在地图视图内
let newAnchors = {}
for (const key in anchors) {
  const posi = anchors[key].getPosition() // 获取定位mark的坐标，getPosition是获取地图view坐标的方法
  // 判断地图定位mark是否在当前地图视区内
  if (
    posi[0] > mapInfo[0] &&
    posi[0] < mapInfo[2] &&
    posi[1] < mapInfo[3] &&
    posi[1] > mapInfo[1]
  ) {
    newAnchors = { ...newAnchors, [`${key}`]: anchors[key] }
  }
}
// 将计算过后的新地图mark return
return {
  newAnchors,
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 将计算过后的新地图 mark 添加到地图 view 上

// 添加地图mark到地图view，addOverlay是地图添加mark方法
// 如果实际需求需要先移出地图mark可以使用removeOverlay方法，用法同addOverlay
that.map.addOverlay(newAnchors[item.id])

1
2
3

# 结论

经过计算当前地图视区内的定位 mark，再加载到地图 view 上，可以有效的优化地图加载大量 mark 而造成的卡顿问题

# 参考

#JavaScript #openlayers

上次更新: 2024/07/04, 10:29:40

npm私有仓库搭建→