Draw front lines on the react map.

https://github.com/dcs-liberation/dcs_liberation/issues/2039
This commit is contained in:
Dan Albert
2022-03-02 23:33:15 -08:00
parent 9a2c10a98f
commit b39a44ae37
13 changed files with 116 additions and 0 deletions

View File

@@ -0,0 +1,14 @@
import { FrontLine as FrontLineModel } from "../../api/frontline";
import { Polyline } from "react-leaflet";
interface FrontLineProps {
front: FrontLineModel;
}
function FrontLine(props: FrontLineProps) {
return (
<Polyline positions={props.front.extents} weight={8} color={"#fe7d0a"} />
);
}
export default FrontLine;

View File

@@ -0,0 +1 @@
export { default } from "./FrontLine";

View File

@@ -0,0 +1,15 @@
import FrontLine from "../frontline";
import { LayerGroup } from "react-leaflet";
import { selectFrontLines } from "../../api/frontLinesSlice";
import { useAppSelector } from "../../app/hooks";
export default function SupplyRoutesLayer() {
const fronts = useAppSelector(selectFrontLines).fronts;
return (
<LayerGroup>
{fronts.map((front, idx) => {
return <FrontLine key={idx} front={front} />;
})}
</LayerGroup>
);
}

View File

@@ -0,0 +1 @@
export { default } from "./FrontLinesLayer";

View File

@@ -6,6 +6,7 @@ import AirDefenseRangeLayer from "../airdefenserangelayer";
import { BasemapLayer } from "react-esri-leaflet";
import ControlPointsLayer from "../controlpointslayer";
import FlightPlansLayer from "../flightplanslayer";
import FrontLinesLayer from "../frontlineslayer";
import { LatLng } from "leaflet";
import SupplyRoutesLayer from "../supplyrouteslayer";
import { TgoType } from "../../api/tgo";
@@ -42,6 +43,9 @@ export default function LiberationMap(props: GameProps) {
<LayersControl.Overlay name="Supply routes" checked>
<SupplyRoutesLayer />
</LayersControl.Overlay>
<LayersControl.Overlay name="Front lines" checked>
<FrontLinesLayer />
</LayersControl.Overlay>
<LayersControl.Overlay name="Enemy SAM threat range" checked>
<AirDefenseRangeLayer blue={false} />
</LayersControl.Overlay>