在vue2中使用高德地图，由于添加的摄像头贴图数量过多（超过1万个），导致地图卡顿，现在希望进行优化，使地图变得流畅起来，现在期望的优化方向是在地图初始化的时候，只加载地图展开范围内的摄像头，当地图缩放比例变大，使用点聚合并隐藏摄像头贴图，已知摄像头贴图的加载是根据数组markerList（里面每个对象对应一个摄像头的各种信息，也是超过一万个），请给出代码解决

可以使用AMap.MarkerClusterer进行点聚合，只加载地图展开范围内的摄像头可以使用AMap.Map的bounds属性获取当前地图的范围。

以下是示例代码：

// 初始化地图
var map = new AMap.Map('container', {
  zoom: 13,
  center: [116.39, 39.9]
});

// 加载地图展开范围内的摄像头
var bounds = map.getBounds(); // 获取当前地图范围
var markerList = []; // 模拟摄像头贴图数组
for (var i = 0; i < markerList.length; i++) {
  var marker = new AMap.Marker({
    position: [markerList[i].lng, markerList[i].lat],
    icon: markerList[i].icon,
    map: bounds.contains([markerList[i].lng, markerList[i].lat]) ? map : null // 只显示范围内的摄像头
  });
  markerList[i].marker = marker;
}

// 点聚合
var cluster = new AMap.MarkerClusterer(map, [], {
  gridSize: 80,
  maxZoom: 12
});
cluster.setMarkers(markerList.map(function (item) {
  return item.marker;
}));

// 监听地图缩放事件
map.on('zoomend', function () {
  var zoom = map.getZoom();
  if (zoom > 12) { // 缩放比例变大，隐藏摄像头贴图
    for (var i = 0; i < markerList.length; i++) {
      markerList[i].marker.hide();
    }
    cluster.show(); // 显示点聚合
  } else { // 显示摄像头贴图
    var bounds = map.getBounds();
    for (var i = 0; i < markerList.length; i++) {
      var marker = markerList[i].marker;
      if (bounds.contains(marker.getPosition())) {
        marker.show();
      } else {
        marker.hide();
      }
    }
    cluster.hide(); // 隐藏点聚合
  }
});

这段代码中，我们使用AMap.Map的bounds属性获取当前地图的范围，然后只加载范围内的摄像头贴图，使用AMap.MarkerClusterer进行点聚合，当地图缩放比例变大时，隐藏摄像头贴图并显示点聚合，缩放比例变小时，显示摄像头贴图并隐藏点聚合。