diff --git a/public/data/sps.json b/public/data/sps.json
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/geoserver.js b/src/assets/geoserver.js
new file mode 100644
index 0000000..974c6f4
--- /dev/null
+++ b/src/assets/geoserver.js
@@ -0,0 +1,70 @@
+const GEOSERVER_CONFIG = {
+ baseUrl: "http://8.130.135.159:8000/geoserver/lydc/wms",
+ typeName: "lydc:NYTB",
+};
+
+/**
+ * 获取图斑数据 (WFS请求)
+ */
+export const fetchPlotGeoJSON = async () => {
+ // 1. 构建 WFS 请求 URL
+ const params = new URLSearchParams({
+ service: "",
+ version: "1.0.0",
+ request: "GetFeature",
+ typeName: GEOSERVER_CONFIG.typeName,
+ outputFormat: "application/json",
+ // 强制返回 WGS84 经纬度，防止坐标跑偏
+ srsName: "EPSG:3857",
+ });
+
+ try {
+ const response = await fetch(`${GEOSERVER_CONFIG.baseUrl}?${params.toString()}`);
+
+ if (!response.ok) {
+ throw new Error(`GeoServer 请求失败: ${response.status}`);
+ }
+
+ const geoJsonData = await response.json();
+
+ // 2. 数据清洗与映射 (Mapping)
+ // GeoServer 返回的属性名通常是数据库字段（如 "xb_type", "img_url"）
+ // 我们需要把它们映射回你前端代码里用的 "type", "images" 等
+ const mappedFeatures = geoJsonData.features.map((feature) => {
+ const p = feature.properties;
+
+ return {
+ ...feature,
+ properties: {
+ // 保留原始属性
+ ...p,
+
+ // --- 关键映射区域 (根据你的数据库字段修改左边的值) ---
+ name: p.xb_name || p.name || "未命名图斑",
+
+ // 这里的映射决定了地图颜色！确保数据库里有 "乔木林"/"灌木林" 等值
+ // 如果数据库存的是代码(1,2,3)，这里需要写转换逻辑
+ type: p.forest_type || p.type || "其他",
+
+ area: p.area_mu || 0,
+ collector: p.manager || "未知人员",
+
+ // --- 图片/视频处理 ---
+ // 假设数据库里存的是 "url1,url2" 这样的字符串
+ images: p.image_urls ? p.image_urls.split(',') : [],
+ videos: p.video_urls ? p.video_urls.split(',') : [],
+ },
+ };
+ });
+
+ return {
+ type: "FeatureCollection",
+ features: mappedFeatures,
+ };
+
+ } catch (error) {
+ console.error("图斑数据加载失败:", error);
+ // 出错时返回空集合，保证地图不崩
+ return { type: "FeatureCollection", features: [] };
+ }
+};
\ No newline at end of file
diff --git a/src/components/MapView.vue b/src/components/MapView.vue
index f012f56..e964e17 100644
--- a/src/components/MapView.vue
+++ b/src/components/MapView.vue
@@ -1,48 +1,72 @@
+
+
+ 数据日期：
+
+
+
+
+
+
+
+
+
+
+
+