引入采样点和韶关市耕地数据

src/router/index.ts

@@ -72,7 +72,7 @@ const routes = [
       {
         path: 'mapView',
         name: 'mapView',
-        component: () => import('../views/menu/leafletMapView.vue'),
+        component: () => import('../views/menu/tencentMapView.vue'),
         meta: { title: '地图展示' },
       },
       {

src/views/menu/Calculation.vue

@@ -222,7 +222,7 @@ const onSubmit = async () => {
 
   console.log("开始计算...");
   const data = {
-    model_id: 9,
+    model_id: 25,
     parameters: {
       organic_matter: form.OM,
       chloride: form.CL,

src/views/menu/tencentMapView.vue

@@ -16,7 +16,15 @@
         <input type="checkbox" v-model="state.showOverlay" @change="toggleOverlay" />
         显示耕地图层
       </label>
-      <!-- 新增截图控制 -->
+      <label>
+        <input type="checkbox" v-model="state.showSoilTypes" @change="toggleSoilTypeLayer" />
+        显示土壤类型
+      </label>
+      <label>
+        <input type="checkbox" v-model="state.showSurveyData" @change="toggleSurveyDataLayer" />
+        显示韶关市调查数据
+      </label>
+      <!-- 截图控制 -->
       <div class="export-controls">
         <button @click="exportMapImage" :disabled="!isMapReady">
           {{ isExporting ? '生成中...' : '导出截图' }}
@@ -31,6 +39,7 @@ import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
 import axios from 'axios'
 import markerIcon from '@/assets/marker.png' 
 import html2canvas from 'html2canvas'
+
 const isExporting = ref(false)
 const isMapReady = ref(false)
 const exportSettings = reactive({
@@ -48,11 +57,15 @@ let markersLayer = null
 let overlay = null
 const state = reactive({
   showOverlay: false,
+  showSoilTypes: false,
+  showSurveyData: false,
   excelData: [],
   lastTapTime: 0
 })
 let farmlandLayer = null
 let bboxLayer = null
+let soilTypeLayer = null
+let surveyDataLayer = null
 
 const tMapConfig = reactive({
   key: import.meta.env.VITE_TMAP_KEY, // 请替换为你的开发者密钥
@@ -504,10 +517,55 @@ const getPhValue = async (lng, lat) => {
         }
       });
 
+       // 加载土壤类型图层
+       const soilTypeData = await fetch('/data/单元格.geojson').then(res => res.json());
+       soilTypeLayer = new TMap.vector.GeoJSONLayer({
+         map: map,
+         data: soilTypeData,
+         polygonStyle: new TMap.PolygonStyle({
+            color: '#4CAF50',
+            width: 1,
+            fillColor: '#C8E6C9',
+           fillOpacity: 0.6
+         }),
+         featureStyle: (feature) => {
+           // 根据土壤类型设置不同颜色
+           const typeColorMap = {
+             'TypeA': '#FFEB3B',
+             'TypeB': '#FF9800',
+             'TypeC': '#795548'
+           }
+           return {
+             fillColor: typeColorMap[feature.properties.type] || '#9E9E9E'
+           }
+         }
+       });
+
+      // 加载调查数据图层
+      const surveyData = await fetch('/data/调查数据.geojson').then(res => res.json());
+      console.log(surveyData);
+      surveyDataLayer = new TMap.vector.GeoJSONLayer({
+        map: map,
+        data: surveyData,
+        markerStyle: new TMap.MarkerStyle({
+          width: 34,
+          height: 34,
+          anchor: { x: 17, y: 34 }
+        }),
+        featureStyle: (feature) => {
+          return { styleId: 'marker' }; // 统一使用线样式
+        }
+      });
+
+      // 初始化图层可见性
+      soilTypeLayer.setVisible(state.showSoilTypes);
+      surveyDataLayer.setVisible(state.showSurveyData);
+
       // 根据初始状态控制显示
       if (!state.showOverlay) {
         farmlandLayer.setVisible(false);
         bboxLayer.setVisible(false);
+
       }
 
     } catch (err) {
@@ -532,6 +590,26 @@ const getPhValue = async (lng, lat) => {
     }
   };
 
+  const toggleSoilTypeLayer = () => {
+    if (!soilTypeLayer) {
+      console.error('利用类型图层未初始化');
+      return;
+    }
+    if (soilTypeLayer) {
+      soilTypeLayer.setVisible(state.showSoilTypes);
+    }
+  };
+
+  const toggleSurveyDataLayer = () => {
+    if (!surveyDataLayer) {
+      console.error('调查数据图层未初始化');
+      return;
+    }
+    if (surveyDataLayer) {
+      surveyDataLayer.setVisible(state.showSurveyData);
+    }
+  };
+
 // // 切换覆盖层
 // const toggleOverlay = () => {
 //   if (state.showOverlay) {
@@ -579,6 +657,14 @@ onBeforeUnmount(() => {
     bboxLayer.destroy(); 
     bboxLayer = null;
   }
+  if (soilTypeLayer) {
+    soilTypeLayer.destroy();
+    soilTypeLayer = null;
+  }
+  if (surveyDataLayer) {
+    surveyDataLayer.destroy();
+    surveyDataLayer = null;
+  }
 })
 </script>