更改高德地图自定义数据范围

在项目中遇到用高德地图中绘制海量图标，但是如果数据量太多的话，一次性绘制大量的图标marker，导致页面加载速度很慢。

这个问题，我想到在高德地图绘制一个透明的圆来作为用户查看数据的范围，在圆内显示部分数据，当用户点击圆范围之外的地图的话，以点击的位置的坐标作为圆范围的中心，以达到修改显示范围的目的，如此，每次高度地图只渲染部分数据，加快了页面的加载速度，还解决了图标过多，显得页面过于凌乱

            请求方法.then(res=>{
                AMapLoader.load({
                  key: "", // 申请好的Web端开发者Key，首次调用 load                 时必填
                  version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                  plugins: [
                     "AMap.ToolBar", //工具条
                     "AMap.Geocoder",
                  ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                }).then((AMap) =>{
                    this.map = new AMap.Map("mapid", {
                        zoom: 14,
                        center: 地图中心,
                    });
                    res.data.map(item=>{
                        var marker = new AMap.Marker({
                            opacity: 1,
                            zIndex: 0,
                            cursor: "pointer",
                            position: [item.longitude, item.latitude], //经纬度位置
                            icon: new AMap.Icon({
                            size: new AMap.Size(36, 36), // 图标尺寸
                            image: require("@/assets/images/"), // Icon的图像
                            imageSize: new AMap.Size(36, 36), // 根据所设置的大小拉伸或压缩图片
                            imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
                            extData: {
                                id: item.firstaidMemberId,   //设置marker点击时获取的数据，以便后续操作
                            },
                          }),

                        marker.setLabel({
                          direction: "top",
                          offset: new AMap.Pixel(10, 0), //设置文本标注偏移量
                          content: `<div style='background-color: #ffffff;padding:                2px;border-radius: 2px;color:#000'>${item.name}</div>`, //设置文本标注内容
                        });
                        that.map.add(marker);   //将marker添加到地图中
                           
                        //marker点击事件
                        marker.on('click',(e)=>{
                            console.log(e.target.getExtData())
                        })

                        //将渲染好的marker填充到数组中，以便后续删除
                        that.markerList.push(marker)
                        })
                    })
                // 渲染透明圆
            var circle = new AMap.Circle({
              center: new AMap.LngLat(lng, lat),
              radius: 2000, //半径单位m
              strokeColor: "#76D5C2", //线颜色
              strokeOpacity: 1, //线透明度
              strokeWeight: 1, //线粗细度
              fillColor: "#4BB2FD", //填充颜色
              fillOpacity: 0.35, //填充透明度
            }); // 圆心位置

            this.map.add(circle);

          //地图点击
           this.map.on("click", function (e) {
              // console.log(
              //   e.lnglat.getLng(),
              //   e.lnglat.getLat(),
                );
               
              //清除之前的marker，渲染新的marker
              that.map.remove(that.markerList);
               //更改圆的位置
              circle.setCenter([e.lnglat.getLng(), e.lnglat.getLat()]);
            }
         })