添加惠州市的耕地数据

src/views/menu/mapView.vue

@@ -5,11 +5,17 @@
     ></div>
     <div v-if="error" class="error">{{ error }}</div>
     <!-- 覆盖层控制 -->
-    <div class="control-panel">
+    <!-- <div class="control-panel">
       <label>
         <input type="checkbox" v-model="state.showOverlay" @change="toggleOverlay" />
         显示土壤类型覆盖
       </label>
+    </div> -->
+    <div class="control-panel">
+      <label>
+        <input type="checkbox" v-model="state.showOverlay" @change="toggleOverlay" />
+        显示耕地边界
+      </label>
     </div>
   </div>
 </template>
@@ -32,6 +38,8 @@ const state = reactive({
   excelData: [],
   lastTapTime: 0
 })
+let farmlandLayer = null
+let bboxLayer = null
 
 const tMapConfig = reactive({
   key: import.meta.env.VITE_TMAP_KEY, // 请替换为你的开发者密钥
@@ -46,7 +54,7 @@ const loadSDK = () => {
     }
 
     const script = document.createElement('script')
-    script.src = `https://map.qq.com/api/gljs?v=2.exp&libraries=basic,service&key=${tMapConfig.key}&callback=initTMap`
+    script.src = `https://map.qq.com/api/gljs?v=2.exp&libraries=basic,service,vector&key=${tMapConfig.key}&callback=initTMap`
     window.initTMap = () => {
       if (!window.TMap?.service?.Geocoder) {
         reject(new Error('地图SDK加载失败'))
@@ -162,7 +170,8 @@ const initMap = async () => {
       map: map,
       styles: { default: defaultStyle }
     })
-
+    
+    await loadGeoJSONLayers();
     // 绑定点击事件
     map.on('click', handleMapClick)
     markersLayer.on('click', handleMarkerClick)
@@ -250,7 +259,7 @@ const manageTempMarker = {
       position: new TMap.value.LatLng(lat, lng),
       styleId: 'temp',
       properties: {
-        title: '临时检测点',
+        title: '克里金插值',
         phValue: parseFloat(phValue).toFixed(2),
         isTemp: true
       }
@@ -392,26 +401,92 @@ const getPhValue = async (lng, lat) => {
 }
 }
 
+  const loadGeoJSONLayers = async () => {
+    try {
+      const polygonStyle = new TMap.PolygonStyle({
+      color: '#FFA500',      // 边框颜色（橙色）
+      width: 2,              // 边框宽度
+      fillColor: '#FFF3E0',  // 填充颜色（浅橙色）
+      opacity: 1,            // 边框透明度
+      fillOpacity: 0.4       // 填充透明度
+      });
+
+      // 定义线条样式类
+      const polylineStyle = new TMap.PolylineStyle({
+      color: '#1565C0',      // 线条颜色（深蓝色）
+      width: 3,              // 线条宽度
+      opacity: 0.8,          // 透明度
+      lineCap: 'round'       // 线头样式
+      });
+
+      // 加载耕地多边形
+      const farmlandData = await fetch('/data/耕地边界.geojson').then(res => res.json());
+      farmlandLayer = new TMap.vector.GeoJSONLayer({
+        map: map,
+        data: farmlandData,
+        polygonStyle: polygonStyle,
+        featureStyle: (feature) => {
+          return { styleId: 'polygon' }; // 统一使用多边形样式
+        }
+      });
+
+      // 加载边界框
+      const bboxData = await fetch('/data/耕地边界框.geojson').then(res => res.json());
+      bboxLayer = new TMap.vector.GeoJSONLayer({
+        map: map,
+        data: bboxData,
+        polylineStyle: polylineStyle,
+        featureStyle: (feature) => {
+          return { styleId: 'line' }; // 统一使用线样式
+        }
+      });
+
+      // 根据初始状态控制显示
+      if (!state.showOverlay) {
+        farmlandLayer.setVisible(false);
+        bboxLayer.setVisible(false);
+      }
 
+    } catch (err) {
+      console.error('加载GeoJSON失败:', err);
+      error.value = '地理数据加载失败';
+    }
+  };
 
-// 切换覆盖层
-const toggleOverlay = () => {
-  if (state.showOverlay) {
-    overlay = new TMap.value.ImageGroundLayer({
-      map: map,
-      bounds: new TMap.value.LatLngBounds(
-        new TMap.value.LatLng(18.03, 104.25), 
-        new TMap.value.LatLng(31.26, 119.86)
-      ),
-      src: 'https://soilgd.com/images/farmland_cut.png'
-    })
-  } else {
-    if (overlay) {
-      overlay.setMap(null)
-      overlay = null
+  // 修改切换逻辑
+  const toggleOverlay = () => {
+    if (!farmlandLayer || !bboxLayer) {
+      console.error('图层未初始化');
+      return;
     }
-  }
-}
+
+    if (state.showOverlay) {
+      farmlandLayer.setVisible(true);
+      bboxLayer.setVisible(true);
+    } else {
+      farmlandLayer.setVisible(false);
+      bboxLayer.setVisible(false);
+    }
+  };
+
+// // 切换覆盖层
+// const toggleOverlay = () => {
+//   if (state.showOverlay) {
+//     overlay = new TMap.value.ImageGroundLayer({
+//       map: map,
+//       bounds: new TMap.value.LatLngBounds(
+//         new TMap.value.LatLng(18.17, 103.55), 
+//         new TMap.value.LatLng(32.32, 119.82)
+//       ),
+//       src: 'https://soilgd.com/images/farmland_cut.png'
+//     })
+//   } else {
+//     if (overlay) {
+//       overlay.setMap(null)
+//       overlay = null
+//     }
+//   }
+// }
 
 onMounted(async () => {
   try {
@@ -433,6 +508,14 @@ onBeforeUnmount(() => {
     infoWindow.value.close()
     infoWindow.value = null
   }
+  if (farmlandLayer) {
+    farmlandLayer.destroy(); 
+    farmlandLayer = null;
+  }
+  if (bboxLayer) {
+    bboxLayer.destroy(); 
+    bboxLayer = null;
+  }
 })
 </script>