使用高德地图作为数据源

src/components/land/Land.tsx

@@ -6,22 +6,27 @@ import TileLayer from 'ol/layer/Tile';
 import OSM from 'ol/source/OSM';
 import 'ol/ol.css';
 import './Land.css'
+import XYZ from "ol/source/XYZ";
 
 const Land = ()=>{
     const mapRef = useRef(null);
-
+    const gaodeSource = new XYZ({
+      url: 'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
+    });
+ 
+    const gaodeLayer = new TileLayer({
+      source: gaodeSource,
+    });
     useEffect(() => {
       if (mapRef.current) {
         const map = new Map({
           target: mapRef.current,
           layers: [
-            new TileLayer({
-              source: new OSM(),
-            }),
+            gaodeLayer
           ],
           view: new View({
             center: [0, 0],
-            zoom: 2,
+            zoom: 3,
           }),
         });
   
@@ -32,7 +37,7 @@ const Land = ()=>{
     }, []);
   
     return(<>
-    <div ref={mapRef}  className=" bottom-14  h-3/5 w-full  absolute"></div>
+    <div ref={mapRef}  className=" bottom-14 h-3/5  w-full  absolute"></div>
     <Footer></Footer>
     </>)
 }

src/components/layers/Layers.tsx

-import Footer from "../common/Footer"
+import Footer from "../common/Footer";
+import { useEffect, useRef } from "react";
+import Map from "ol/Map";
+import View from "ol/View";
+import TileLayer from "ol/layer/Tile";
+import "ol/ol.css";
+import XYZ from "ol/source/XYZ";
+const Layers = () => {
+  const mapRef = useRef(null);
+  const gaodeSource = new XYZ({
+    url: "https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
+  });
 
-const Layers = ()=>{
-    return(<>
-    <Footer></Footer>
-    </>)
-}
+  const gaodeLayer = new TileLayer({
+    source: gaodeSource,
+  });
+  useEffect(() => {
+    if (mapRef.current) {
+      const map = new Map({
+        target: mapRef.current,
+        layers: [gaodeLayer],
+        view: new View({
+          center: [0, 0],
+          zoom: 3,
+          minZoom: 3, // 设置最小缩放等级为 5
+          maxZoom: 18, // 设置最大缩放等级为 15
+        }),
+      });
 
-export default Layers;
\ No newline at end of file
+      return () => {
+        map.setTarget();
+      };
+    }
+  }, []);
+
+  return (
+    <>
+      <div ref={mapRef} className=" bottom-14  top-0 w-full  absolute"></div>
+      <Footer></Footer>
+    </>
+  );
+};
+
+export default Layers;