Greate a GridLine

Author: yejiyang

src/App.tsx

@@ -5,6 +5,7 @@ import SelectFeature from "./examples/SelectFeature";
 import EarthquakeClusters from "./examples/EarthquakeClusters";
 import { useState } from "react";
 import SecondMapDialog from "./examples/SecondMapDialog";
+import GridLine from "./components/map/layers/GridLine";
 
 function App() {
   const [showDialog, setShowDialog] = useState(false);
@@ -17,6 +18,7 @@ function App() {
           <Map>
             {/* <SelectFeature /> */}
             <EarthquakeClusters />
+            <GridLine />
           </Map>
           {showDialog && <SecondMapDialog />}
         </div>

src/components/map/layers/GridLine.tsx

@@ -0,0 +1,36 @@
+import React, { useContext, useEffect } from "react";
+import MapContext from "../context/MapContext";
+import { Graticule } from "ol";
+import { Stroke } from "ol/style";
+
+type Props = {};
+
+const GridLine = (props: Props) => {
+  const { map } = useContext(MapContext);
+
+  // Create a grid line layer using OpenLayers Graticule function
+  const gridLineLayer = new Graticule({
+    strokeStyle: new Stroke({
+      color: "rgba(128,128,128,0.9)",
+      width: 2,
+      lineDash: [0.5, 4],
+    }),
+    showLabels: true,
+    wrapX: false,
+    zIndex: 10,
+  });
+
+  useEffect(() => {
+    console.log("Adding grid line layer to map");
+    if (!map) return;
+    map.addLayer(gridLineLayer);
+
+    return () => {
+      map.removeLayer(gridLineLayer);
+    };
+  });
+
+  return null;
+};
+
+export default GridLine;