feat: 样式修改、地图采用js

web/components/maplibre/map.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
 import maplibregl from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 import * as turf from "@turf/turf";
@@ -7,58 +7,70 @@ import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
 
 const mapContainer = useTemplateRef("mapContainer");
 
-const map = ref<maplibregl.Map>();
+/**
+ * @type {Ref<maplibregl.Map>}
+ */
+const map = ref();
 
-const {feature} = useApi();
+const { feature } = useApi();
 
-MapboxDraw.constants.classes.CANVAS = 'maplibregl-canvas';
-MapboxDraw.constants.classes.CONTROL_BASE = 'maplibregl-ctrl';
-MapboxDraw.constants.classes.CONTROL_PREFIX = 'maplibregl-ctrl-';
-MapboxDraw.constants.classes.CONTROL_GROUP = 'maplibregl-ctrl-group';
-MapboxDraw.constants.classes.ATTRIBUTION = 'maplibregl-ctrl-attrib';
-
-MapboxDraw.lib.theme.find((x: any) => x.id === 'gl-draw-lines').paint['line-dasharray'] = [0.2, 2]
+MapboxDraw.constants.classes.CANVAS = "maplibregl-canvas";
+MapboxDraw.constants.classes.CONTROL_BASE = "maplibregl-ctrl";
+MapboxDraw.constants.classes.CONTROL_PREFIX = "maplibregl-ctrl-";
+MapboxDraw.constants.classes.CONTROL_GROUP = "maplibregl-ctrl-group";
+MapboxDraw.constants.classes.ATTRIBUTION = "maplibregl-ctrl-attrib";
 
+MapboxDraw.lib.theme.find((x) => x.id === "gl-draw-lines").paint[
+  "line-dasharray"
+] = [0.2, 2];
 
 onMounted(async () => {
   if (!mapContainer.value) return;
   map.value = new maplibregl.Map({
     container: mapContainer.value, // container id
     style: "https://demotiles.maplibre.org/style.json", // style URL
-    center: [0, 0], // starting position [lng, lat]
-    zoom: 12, // starting zoom
+    center: [116.405285, 39.904989], // starting position [lng, lat]
+    zoom: 4, // starting zoom
   });
-  // map.value.removeControl(map.value._controls[0]);
+  map.value.removeControl(map.value._controls[0]);
   const draw = new MapboxDraw({
     displayControlsDefault: false,
     controls: {
+      point: true,
+      line_string: true,
       polygon: true,
-      trash: true
-    }
-  })
-
-  const updateArea = (e: any) => {
-    const data = draw.getAll();
-    console.log(data)
-  }
-
-  map.value.addControl(draw, "top-right");
-  map.value.on('draw.create', updateArea);
-  map.value.on('draw.delete', updateArea);
-  map.value.on('draw.update', updateArea);
-  map.value.on('draw.selectionchange', (e: any) => {
-    console.log(e)
+      trash: true,
+      // combine_features: true,
+      // uncombine_features: true,
+    },
   });
 
-  const {data, status} = await feature.list<any>({page: 1, size: 10});
-  if (status.value !== 'success') return;
-  let jsonData = turf.featureCollection(data.value.data.map((x: any) => turf.feature(x.geometry, {
-    id: x.id,
-    name: x.name
-  })));
+  const updateArea = (e) => {
+    const data = draw.getAll();
+    console.log(data);
+  };
+
+  map.value.addControl(draw, "top-right");
+  map.value.on("draw.create", updateArea);
+  map.value.on("draw.delete", updateArea);
+  map.value.on("draw.update", updateArea);
+  map.value.on("draw.selectionchange", (e) => {
+    console.log(e);
+  });
+
+  const { data, status } = await feature.list({ page: 1, size: 10 });
+  if (status.value !== "success") return;
+  let jsonData = turf.featureCollection(
+    data.value.data.map((x) =>
+      turf.feature(x.geometry, {
+        id: x.id,
+        name: x.name,
+      })
+    )
+  );
   console.log(jsonData);
 
-  map.value.addSource("data", {type: "geojson", data: jsonData});
+  map.value.addSource("data", { type: "geojson", data: jsonData });
   map.value.addLayer({
     id: "data-symbol",
     type: "symbol",
@@ -81,10 +93,10 @@ onMounted(async () => {
       "fill-opacity": 0.5,
       "fill-outline-color": "#FF0000", // 添加边界线颜色
     },
-  })
+  });
 });
 </script>
 
 <template>
-  <div ref="mapContainer" class="w-full h-full"/>
+  <div ref="mapContainer" class="w-full h-full" />
 </template>

web/layouts/default.vue

@@ -6,7 +6,6 @@ const handleMenuChange = () => {
 };
 
 const route = useRoute();
-
 </script>
 
 <template>
@@ -55,7 +54,7 @@ const route = useRoute();
         aria-label="close sidebar"
         class="drawer-overlay"
       ></label>
-      <ul class="menu bg-base-300 text-base-content min-h-full w-56 p-2">
+      <ul class="menu bg-base-300 text-base-content h-full w-56 p-2">
         <li>
           <a href="/" :class="route.path === '/' ? 'active' : ''"
             ><Icon name="material-symbols:home-outline-rounded" />首页</a
@@ -74,14 +73,16 @@ const route = useRoute();
         <li><a>Sidebar Item 2</a></li>
       </ul>
     </nav>
-    <main class="drawer-content flex-auto overflow-x-hidden overflow-y-auto bg-base-100">
-      <section class="min-h-full relative p-4 pb-8">
-        <Breadcrumbs />
+    <main
+      class="drawer-content flex-auto relative p-4 pb-0 overflow-hidden bg-base-100 flex flex-col"
+    >
+      <Breadcrumbs />
+      <section class="flex-auto overflow-y-auto overflow-x-hidden">
         <slot />
-        <footer class="absolute bottom-0 w-full h-4 my-2 text-center text-xs">
-          &copy;powered by maptile
-        </footer>
       </section>
+      <footer class="mt-auto w-full h-8 py-2 text-center text-xs">
+        &copy;powered by maptile
+      </footer>
     </main>
   </section>
 </template>

web/package-lock.json

@@ -1326,7 +1326,6 @@
       "version": "0.0.1",
       "resolved": "https://registry.npmmirror.com/@mapbox/geojson-normalize/-/geojson-normalize-0.0.1.tgz",
       "integrity": "sha512-82V7YHcle8lhgIGqEWwtXYN5cy0QM/OHq3ypGhQTbvHR57DF0vMHMjjVSQKFfVXBe/yWCBZTyOuzvK7DFFnx5Q==",
-      "license": "ISC",
       "bin": {
         "geojson-normalize": "geojson-normalize"
       }
@@ -1356,7 +1355,6 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmmirror.com/@mapbox/mapbox-gl-draw/-/mapbox-gl-draw-1.5.0.tgz",
       "integrity": "sha512-uchQbTa8wiv6GWWTbxW1g5b8H6VySz4t91SmduNH6jjWinPze7cjcmsPUEzhySXsYpYr2/50gRJLZz3bx7O88A==",
-      "license": "ISC",
       "dependencies": {
         "@mapbox/geojson-area": "^0.2.2",
         "@mapbox/geojson-normalize": "^0.0.1",
@@ -1371,8 +1369,7 @@
     "node_modules/@mapbox/mapbox-gl-draw/node_modules/@mapbox/point-geometry": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/@mapbox/point-geometry/-/point-geometry-1.1.0.tgz",
-      "integrity": "sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ==",
-      "license": "ISC"
+      "integrity": "sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ=="
     },
     "node_modules/@mapbox/node-pre-gyp": {
       "version": "2.0.0",
@@ -6069,14 +6066,13 @@
       }
     },
     "node_modules/call-bound": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmmirror.com/call-bound/-/call-bound-1.0.3.tgz",
-      "integrity": "sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "call-bind-apply-helpers": "^1.0.1",
-        "get-intrinsic": "^1.2.6"
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
       },
       "engines": {
         "node": ">= 0.4"

web/pages/index.vue

@@ -5,7 +5,7 @@ definePageMeta({
 </script>
 
 <template>
-  <div class="h-[600px] bg-red-200">
+  <div class="w-full h-full relative">
     <Map />
   </div>
 </template>