提问人:Farid Guzman 提问时间:11/9/2023 更新时间:11/9/2023 访问量:7
对象迭代器,用于推送到带有信号 R websocket 和 Leaflet 的数组中
Object iterator to push into array with signal R websocket and Leaflet
问:
我有一个异步函数连接到一个套接字,我想遍历每个对象,然后推送到一个数组:
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>
);
}
我没有取回数组,因为它没有推动,有什么技巧可以让我这样做吗?
我尝试将整个过滤的对象推入数组中,但该数据可能不是按时间顺序排列的。
答: 暂无答案
评论