对象迭代器,用于推送到带有信号 R websocket 和 Leaflet 的数组中

Object iterator to push into array with signal R websocket and Leaflet

提问人:Farid Guzman 提问时间:11/9/2023 更新时间:11/9/2023 访问量:7

问:

我有一个异步函数连接到一个套接字,我想遍历每个对象,然后推送到一个数组:

interface ECSEquipmentLocationUpdate {
  X: number;
  Y: number;
  Phi: number;
  EquipmentId: string;
  EquipmentType: EquipmentType;
}

let ascData: Record<string, ECSEquipmentLocationUpdate> = {};
let filteredASC = {};
let ascDataList: any[] = []

export const receiveASCData = async () => {
  connection.on('ReceiveEquipmentLocation', EquipmentLocation => {
    equipmentLocation = JSON.parse(EquipmentLocation)
    ascData[equipmentLocation.EquipmentType] = equipmentLocation
    filteredASC = ascData[1]
    console.log(filteredASC, 'filtered asc Objects')
    for (const filteredASCItem of filteredASC) {
      ascDataList.push(filteredASCItem)
    }
    console.log('ascDataList' , ascDataList)
    return ascDataList
  })
}

然后,我需要将该数组用于使用相同数组 X 和 Y 值在画布中移动的移动对象。数组中的第一个对象是起始位置,最后一个对象是最后一个对象。

import L from "leaflet";
import React, { useEffect, useState } from "react";
import { Popup } from "react-leaflet";
import { LeafletTrackingMarker } from "react-leaflet-tracking-marker";
import ascIcon from "../../../../../assets/che-items/ASCIcon.svg";
import { ASCTabsWrapper } from "../asc-items/ASCTabsWrapper";
import { receiveASCData } from "../../../../../services/equipment/EquipmentServices";

const icon = L.icon({
  iconSize: [150, 100],
  popupAnchor: [2, -20],
  iconUrl: ascIcon,
});

export default function ASC01({ data }: any) {

  const { lat, lng } = data;
  const [prevPos, setPrevPos] = useState([lat, lng]);
  const [ascId, setASCID] = useState(null)
  const [ascType, setAscYPE] = useState(null)
  const [ascXvalue, setAscXValue] = useState(null)
  const [ascYvalue, setAscYValue] = useState(null)
  const [ascObject, setAscObject] = useState({})

  const ascItems: any[] = [];

  useEffect(() => {
    if (prevPos[1] !== lng && prevPos[0] !== lat) {
      setPrevPos([lat, lng]);
    }
  }, [lat, lng, prevPos]);

  useEffect(() => {
    receiveASCData().then((ascObject) => setAscObject(ascObject))
    console.log('from asc01', ascObject)
  }, [])

  // if (!ascObject) return <div>Loading</div>


  return (
    <LeafletTrackingMarker
      icon={icon}
      position={[lat, lng]}
      previousPosition={prevPos}
      duration={4000}
    >
      <Popup>
        <ASCTabsWrapper />
        {ascItems} 
      </Popup>
    </LeafletTrackingMarker>
  );
}

我没有取回数组,因为它没有推动,有什么技巧可以让我这样做吗?

我尝试将整个过滤的对象推入数组中,但该数据可能不是按时间顺序排列的。

ReactJS WebSocket 传单 信号器

评论


答: 暂无答案