更换地图显示采样点图层

src/views/User/cadmiumPrediction/CropCadmiumPrediction.vue

@@ -430,25 +430,6 @@ export default {
       }
     },
 
-    // 根据Cd含量获取对应的颜色
-    getColorByCdValue(cdValue) {
-      if (cdValue === null || cdValue === undefined) {
-        return '#CCCCCC'; // 无数据时显示灰色
-      }
-      const numValue = Number(cdValue);
-      if (isNaN(numValue)) {
-        return '#CCCCCC';
-      }
-      if (numValue >= 0.0 && numValue < 0.2) {
-        return '#00FF00'; // 安全区间 - 绿色
-      } else if (numValue >= 0.2 && numValue < 0.3) {
-        return '#FFFF00'; // 预警区间 - 黄色
-      } else if (numValue >= 0.3) {
-        return '#FF0000'; // 超标区间 - 红色
-      }
-      return '#CCCCCC'; // 默认灰色
-    },
-
     // 根据乡镇名请求接口
     async fetchTownshipDetailByName(townName) {
       if (this.dataMap[townName]) {
@@ -655,32 +636,30 @@ renderTownshipMap() {
       attributionControl: false
     });
 
-    // 添加缩放控件
+   // 添加缩放控件
     L.control.zoom({
       position: 'bottomright'
     }).addTo(this.townshipMapInstance);
 
+    // 添加比例尺控件
+    L.control.scale({
+      position: 'bottomleft',
+      imperial: false // 使用公制单位
+    }).addTo(this.townshipMapInstance);
+
     // 添加空白底图
     L.tileLayer('').addTo(this.townshipMapInstance);
 
     // 处理GeoJSON数据
     const geoJsonLayer = L.geoJSON(this.townshipGeoJson, {
-      style: (feature) => {
-        const townName = feature.properties.name;
-        const townData = this.dataMap[townName];
-        let avgValue = null;
-        
-        if (townData?.data?.基础统计) {
-          avgValue = Number(townData.data.基础统计.平均值);
-        }
-        
+      style: () => {
         return {
-          fillColor: this.getColorByCdValue(avgValue),
+          fillColor: 'transparent', // 固定为白色填充
           weight: 2,
           opacity: 1,
-          color: '#000',
+          color: '#000', // 黑色边界线
           dashArray: '',
-          fillOpacity: 0.7
+          fillOpacity: 0
         };
       },
       onEachFeature: (feature, layer) => {
@@ -688,13 +667,15 @@ renderTownshipMap() {
         
         // 保存原始样式，用于恢复
         const originalStyle = {
+          fillColor: 'transparent', // 固定为白色填充
           weight: 2,
-          color: '#000',
+          opacity: 1,
+          color: '#000', // 黑色边界线
           dashArray: '',
-          fillOpacity: 0.7,
-          fillColor: this.getColorByCdValue(this.dataMap[townName]?.data?.基础统计?.平均值)
+          fillOpacity: 0
         };
         
+        
         // 鼠标悬停事件 - 修复版本
         layer.on('mouseover', (e) => {
           // 高亮当前区域
@@ -719,14 +700,18 @@ renderTownshipMap() {
             layer.closeTooltip();
           }
         });
-        
-        // 点击事件
-        layer.on('click', () => {
-          this.$message.info(`${townName} 的Cd含量数据已显示`);
-        });
       }
     }).addTo(this.townshipMapInstance);
 
+    // 添加GeoServer WMS图层作为底图
+    const wmsLayer = L.tileLayer.wms('http://localhost:8080/geoserver/soilgd/wms', {
+      layers: 'soilgd:farmland_data', // 替换为你的图层名称
+      format: 'image/png',
+      transparent: true,
+      version: '1.1.0',
+      attribution: 'GeoServer WMS'
+    }).addTo(this.townshipMapInstance);
+
     // 调整地图视野
     if (geoJsonLayer.getBounds().isValid()) {
       // 方式1：完全禁用 fitBounds，直接设置中心和zoom
@@ -751,6 +736,7 @@ renderTownshipMap() {
   }
 },
 
+
   // 新增：显示tooltip的方法
 // 修复显示tooltip的方法
 showTooltip(layer, townName, latlng) {