openlayers 6 + vue3 添加地图闪烁点和添加栅格图层数据

传入参数，直接调用方法，上代码

在这里插入代码片
 /**
 * 批量添加闪烁点
 * @param points - 站点信息数组
 * @param points[].stcd - 站点 code
 * @param points[].stnm - 站点名称
 * @param points[].sttp - 站点类型
 * @param points[].icon - 显示在地图的 icon
 * @param points[].lng - 经度
 * @param points[].lat - 纬度
 * @param points[].data - 地图鼠标悬浮展示内容
 */
const addDynamicPoints = (points: {
  stcd?: number;
  stnm?: string;
  sttp?: string;
  icon?: string;
  lng: number;
  lat: number;
  data?: { name: string; value: string; unit: string }[];
}[]) => {
  if (!map.value) return;
  points.forEach(point => {
    const pointInMercator = fromLonLat([point.lng, point.lat]); // 转换为 Web Mercator
    const vectorSource = new VectorSource();
    console.log(pointInMercator)
    // 创建 Feature 时设置 properties
    const pointFeature = new Feature({
      geometry: new Point(pointInMercator),
      // 将 point 对象的属性设置到 properties 中
      ...point
    });
    vectorSource.addFeature(pointFeature);
    const pointLayer = new VectorLayer({
      source: vectorSource,
      zIndex: 1000
    });

    let radius = 0;
    const maxRadius = 20;
    const opacityFactor = 1 / 20;
    const initialStrokeWidth = 5;
    const speed = 0.3;

    const handlePostRender = (e: any) => {
      const vectorContext = getVectorContext(e);

      if (radius >= maxRadius) radius = 0;

      const opacity = (maxRadius - radius) * opacityFactor;
      const strokeWidth = initialStrokeWidth - radius / 10;

      const pointStyle = new Style({
        image: new Circle({
          radius,
          stroke: new Stroke({
            color: `rgba(255, 0, 0, ${opacity})`,
            width: strokeWidth,
          }),
        }),
      });

      vectorContext.setStyle(pointStyle);
      vectorContext.drawGeometry(pointFeature.getGeometry());

      radius += speed;
      // 使用 requestAnimationFrame 优化渲染性能
      requestAnimationFrame(() => {
        pointLayer.changed();
      });
    };
    pointLayer.on('postrender', handlePostRender);
    map.value.addLayer(pointLayer);
  });
};

添加栅格数据

/**
 * 处理栅格数据 图层存在更改颜色，图层不存在，添加图层
 * @param gridData - 栅格数据对象
 * @param gridData.provideID - 数据提供方 ID
 * @param gridData.productFIDPs - 栅格点数据数组
 * @param gridData.productFIDPs[].griD_X - 栅格点的 X 坐标（经度）
 * @param gridData.productFIDPs[].griD_ID - 栅格点的唯一 ID
 * @param gridData.productFIDPs[].griD_Y - 栅格点的 Y 坐标（纬度）
 * @param gridData.productFIDPs[].griD_P - 栅格点的降雨量值
 * @param gridData.dtlen - 数据时间长度
 * @param gridData.gridName - 栅格名称
 * @param gridData.intv - 时间间隔
 * @param gridData.rtm - 数据对应的时间
 */
const handelGrid = (gridData: any) => {
  // 清除现有栅格图层
  if (gridLayer.value?.getFeatures()?.length) {
    // map.value.removeLayer(gridLayer.value);
    // gridLayer.value.clear()
    // 处理每个栅格点数据
    gridData.productFIDPs.forEach((point: any) => {
        if (point.griD_P === undefined) return
        // 获取特定ID的feature
        const featureId = `grid_${point.griD_ID}`; // 你要查找的feature ID
        const feature = drownLayer.value.getFeatureById(featureId);
         if (feature) {
            // console.log('找到feature:', feature);
            // console.log('高度值:', feature.get('heightValues'));
          } else {
            console.log('未找到对应ID的feature');
            return false;
          }
        // 根据降雨量设置颜色
        const color = getColorForRainfall(point.griD_P);
        feature.setStyle(
          new Style({
            fill: new Fill({
              color: color.fill
            }),
            stroke: new Stroke({
              color: color.stroke,
              width: 0.5
            }),
            text: new Text({
              text: point.griD_P.toString(),
              fill: new Fill({
                color: '#2fc176'
              }),
              scale: 1.2
            })
          })
        );
        feature.setProperties({
          gridX: point.griD_X,
          gridY: point.griD_Y,
          gridP: point.griD_P,
          time: gridData.rtm,
          griD_ID: point.griD_ID,
        });
      })

  }else{
    // 如果图层不存在添加图层，图层存在直接改变数据
    const features = [];
    const gridSize = 0.05; // 5公里大约对应0.05度
    // 处理每个栅格点数据
    gridData.productFIDPs.forEach((point: any) => {
      if (point.griD_P === undefined) return;
      // 创建栅格矩形
      const minX = point.griD_X - gridSize / 2;
      const maxX = point.griD_X + gridSize / 2;
      const minY = point.griD_Y - gridSize / 2;
      const maxY = point.griD_Y + gridSize / 2;

      const polygon = new Polygon([
        [
          [minX, minY],
          [maxX, minY],
          [maxX, maxY],
          [minX, maxY],
          [minX, minY]
        ]
      ]);

      // 根据降雨量设置颜色
      const color = getColorForRainfall(point.griD_P);

      const feature = new Feature({
        geometry: polygon.transform('EPSG:4326', 'EPSG:3857'),
        rainfall: point.griD_P
      });
      // 为feature设置唯一ID (可以使用任何你喜欢的ID生成方式)
      feature.setId(`grid_${point.griD_ID}`);
      feature.setStyle(
        new Style({
          fill: new Fill({
            color: color.fill
          }),
          stroke: new Stroke({
            color: color.stroke,
            width: 0.5
          }),
          text: new Text({
            text: point.griD_P.toString(),
            fill: new Fill({
              color: '#2fc176'
            }),
            scale: 1.2
          })
        })
      );
      feature.setProperties({
        gridX: point.griD_X,
        gridY: point.griD_Y,
        gridP: point.griD_P,
        time: gridData.rtm,
        griD_ID: point.griD_ID,

      });
      features.push(feature);
      gridLayer.value.addFeature(feature);
    });
  }
 
}