高德地图API2.0，绘制轨迹线和轨迹点？

Question

请问各位大佬们。使用高德地图api2.0绘制轨迹线和轨迹点时，为了性能的优化我想实现在地图上渲染轨迹点和轨迹线的数量不超过30个，当超过30个时就删除以前的旧数据，新数据继续绘制轨迹点和轨迹线？

const trackPoints: any = ref([])//存储后台返回的经纬度
const timer: any = ref(null)// 定时器
const initMap = () => {
  AMapLoader.load({
    key: "859d5ecb09c62ff524ce665eb76f0543", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap) => {
    const map = new AMap.Map("container", {
      center: [103.932631, 30.743173], //初始化地图中心点位置
      //设置地图容器id
      viewMode: "3D", //是否为3D地图模式
      layers: [new AMap.TileLayer.Satellite()],//设置地图图层为卫星地图
      // layers: [currentLayer.value],//设置地图图层为卫星地图
      zoom: 18, //初始化地图级别
      zooms: [2, 30], //设置缩放级别范围 2-30 级
      resizeEnable: true
    });
    map.setDefaultCursor("pointer");//设置默认鼠标样式
    //添加插件
    AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.TileLayer", "AMap.HawkEye", "AMap.MapType", "AMap.MouseTool", "AMap.RangingTool",],
      function () {
        //异步同时加载多个插件
        map.addControl(new AMap.ToolBar({ position: { top: '10px', right: '20px' } })); // 工具条控件;范围选择控件
        map.addControl(new AMap.Scale()); //显示当前地图中心的比例尺
        // 以下是鼠标工具插件
        Car_Point_Polyline()
      });
  
    // 车辆图标 ,轨迹点，轨迹线
    function Car_Point_Polyline() {
      // 车辆图标
      const marker = new AMap.Marker({
        map: map,// 将图标添加到地图上
        position: [103.932631, 30.743173],//设置初始车辆起点
        icon: new AMap.Icon({
          size: new AMap.Size(40, 40),
          image: 'MapImg/car.png',
          imageSize: new AMap.Size(40, 20),
          imageOffset: new AMap.Pixel(0, 0),
          // angle: rotation, // 设置初始旋转角度
        })
      });
      // 轨迹点
      let circleMarker = new AMap.CircleMarker({
        map: map,
        // center: coordtransform.wgs84togcj02(104.22444664, 30.57401621),
        radius: 5,//圆形标记的半径大小，单位为像素。
        strokeColor: 'red',//边线颜色
        strokeWeight: 2,//边线宽度
        // strokeOpacity: 0.5,//边线透明度
        fillColor: 'red',//填充颜色
        // fillOpacity: 0.5,//填充透明度
        zIndex: 10,//圆形标记的层级，用于控制显示顺序
        bubble: true,//是否开启圆形标记的气泡效果
        cursor: 'pointer',//鼠标悬停在圆形标记上时的指针样式
        clickable: true,//圆形标记是否响应鼠标点击事件
      })
      function drawTrackPoints(points) {
        // 判断并保持轨迹点不超过30个
        while (points.length > 30) {
          points.shift(); // 如果超过30个，就从数组前端移除
        }
        // 以下是创建轨迹点的逻辑（不变）
        circleMarker.hide();  // 隐藏之前的轨迹点
        points.forEach(point => {
          circleMarker = new AMap.CircleMarker({
            map: map,
            center: point,
            radius: 5,
            strokeColor: 'red',
            strokeWeight: 2,
            fillColor: 'red',
            zIndex: 10
          });
        });
      }
      //轨迹线
      const polyline = new AMap.Polyline({
        map: map,// 将轨迹线添加到地图上
        path: [], // 初始为空
        // showDir: true,//(轨迹线内添加箭头)
        strokeColor: "red", // 轨迹线颜色
        strokeWeight: 5, // 轨迹线宽度
      });
      // 模拟后台返回的经纬度坐标数据
      function getRandomCoordinate() {
        // 目标经纬度
        let lng = Math.random() * 0.01 + 103.932631; // 随机生成经度
        let lat = Math.random() * 0.01 + 30.743173; // 随机生成纬度
        return [lng, lat];
      }
      setInterval(() => {
        const lnglat = getRandomCoordinate();
        // const angle = Math.random() * 360; // 生成一个0~360之间的随机角度
        // marker.setAngle(angle); // 设置车辆的旋转角度
        // marker.setPosition(lnglat); // 更新车辆图标位置
        trackPoints.value.push(lnglat); // 将轨迹点的位置信息保存在数组中
        drawTrackPoints(trackPoints.value); // 调用函数在地图上绘制轨迹点
        polyline.setPath([...polyline.getPath(), lnglat]); // 添加经纬度点到轨迹线对象
      }, 1000); // 每隔1秒执行一次
    }
  }).catch((e) => {
    console.log(e);
  });
}