diff options
author | Anton Tananaev <anton@traccar.org> | 2022-10-28 17:53:24 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2022-10-28 17:53:24 -0700 |
commit | 06c98c0b8216bbba5bf971cb92138741df03f1c4 (patch) | |
tree | 431c7e29649ed3824a26c01615904fa9cce81375 /modern/src/map | |
parent | 080164d310c9f789b400e9909c12423bf31ef79c (diff) | |
download | trackermap-web-06c98c0b8216bbba5bf971cb92138741df03f1c4.tar.gz trackermap-web-06c98c0b8216bbba5bf971cb92138741df03f1c4.tar.bz2 trackermap-web-06c98c0b8216bbba5bf971cb92138741df03f1c4.zip |
Improve live routes (fix #1017)
Diffstat (limited to 'modern/src/map')
-rw-r--r-- | modern/src/map/MapRoutePath.js | 2 | ||||
-rw-r--r-- | modern/src/map/main/MapLiveRoutes.js | 118 |
2 files changed, 59 insertions, 61 deletions
diff --git a/modern/src/map/MapRoutePath.js b/modern/src/map/MapRoutePath.js index 22f8d335..0eb48bdc 100644 --- a/modern/src/map/MapRoutePath.js +++ b/modern/src/map/MapRoutePath.js @@ -69,7 +69,7 @@ const MapRoutePath = ({ positions }) => { color: reportColor, }, }); - }, [positions, reportColor]); + }, [theme, positions, reportColor]); return null; }; diff --git a/modern/src/map/main/MapLiveRoutes.js b/modern/src/map/main/MapLiveRoutes.js index 55a04606..397d8c52 100644 --- a/modern/src/map/main/MapLiveRoutes.js +++ b/modern/src/map/main/MapLiveRoutes.js @@ -1,8 +1,7 @@ -import { useId, useEffect, useState } from 'react'; +import { useId, useEffect } from 'react'; import { useSelector } from 'react-redux'; import { useTheme } from '@mui/styles'; import { map } from '../core/MapView'; -import { usePrevious } from '../../reactHelper'; import { useAttributePreference } from '../../common/util/preferences'; const MapLiveRoutes = () => { @@ -10,74 +9,73 @@ const MapLiveRoutes = () => { const theme = useTheme(); - const liveRouteLength = useAttributePreference('web.liveRouteLength', 10); + const type = useAttributePreference('mapLiveRoutes', 'none'); + const devices = useSelector((state) => state.devices.items); const selectedDeviceId = useSelector((state) => state.devices.selectedId); - const currentDeviceId = usePrevious(selectedDeviceId); - const position = useSelector((state) => state.session.positions[selectedDeviceId]); - - const [route, setRoute] = useState([]); + const history = useSelector((state) => state.session.history); useEffect(() => { - map.addSource(id, { - type: 'geojson', - data: { - type: 'Feature', - geometry: { - type: 'LineString', - coordinates: [], + if (type !== 'none') { + map.addSource(id, { + type: 'geojson', + data: { + type: 'Feature', + geometry: { + type: 'LineString', + coordinates: [], + }, }, - }, - }); - map.addLayer({ - source: id, - id, - type: 'line', - layout: { - 'line-join': 'round', - 'line-cap': 'round', - }, - paint: { - 'line-color': theme.palette.colors.geometry, - 'line-width': 2, - }, - }); - - return () => { - if (map.getLayer(id)) { - map.removeLayer(id); - } - if (map.getSource(id)) { - map.removeSource(id); - } - }; - }, []); + }); + map.addLayer({ + source: id, + id, + type: 'line', + layout: { + 'line-join': 'round', + 'line-cap': 'round', + }, + paint: { + 'line-color': ['get', 'color'], + 'line-width': 2, + }, + }); - useEffect(() => { - if (selectedDeviceId !== currentDeviceId) { - if (!selectedDeviceId) { - setRoute([]); - } else if (position) { - setRoute([position]); - } - } else if (position) { - const last = route.at(-1); - if (!last || (last.latitude !== position.latitude && last.longitude !== position.longitude)) { - setRoute([...route.slice(1 - liveRouteLength), position]); - } + return () => { + if (map.getLayer(id)) { + map.removeLayer(id); + } + if (map.getSource(id)) { + map.removeSource(id); + } + }; } - }, [selectedDeviceId, currentDeviceId, position, route]); + return () => {}; + }, [type]); useEffect(() => { - map.getSource(id).setData({ - type: 'Feature', - geometry: { - type: 'LineString', - coordinates: route.map((item) => [item.longitude, item.latitude]), - }, - }); - }, [route]); + if (type !== 'none') { + const deviceIds = Object.values(devices) + .map((device) => device.id) + .filter((id) => (type === 'selected' ? id === selectedDeviceId : true)) + .filter((id) => history.hasOwnProperty(id)); + + map.getSource(id).setData({ + type: 'FeatureCollection', + features: deviceIds.map((deviceId) => ({ + type: 'Feature', + geometry: { + type: 'LineString', + coordinates: history[deviceId], + }, + properties: { + color: devices[deviceId].attributes['web.reportColor'] || theme.palette.colors.geometry, + }, + })), + }); + } + }, [theme, type, devices, selectedDeviceId, history]); return null; }; |