feat：对接平台首页地图分区和确权地图框选功能

src/api/modules/home.js

@@ -9,4 +9,8 @@ module.exports = {
     url: config.base_dev_url + "garden/listByUser?key="+config.mini_key,
     type: "get",
   },
+  farmIndexReport: {
+    url: config.base_url + "farm/farmIndexReport",
+    type: "get",
+  },
 };

src/components/fnHeader.vue

@@ -55,7 +55,7 @@ const props = defineProps({
     },
 });
 
-const farmVal = ref(sessionStorage.getItem("farmId") * 1 || "");
+const farmVal = ref(sessionStorage.getItem("farmId")*1 || "");
 const toggleFarm = (val) => {
     sessionStorage.setItem("farmId", farmVal.value);
     eventBus.emit('garden:organId',val)

src/components/navigation.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="navigation yes-events">
-        <el-select class="select" v-model="id" size="large" @change="changeSelect" popper-class="focus-farm-select">
+        <el-select class="select" v-model="areaId" size="large" @change="changeSelect" popper-class="focus-farm-select">
             <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
         <div class="tabs" v-for="(ele, idx) in list" :key="idx">
@@ -34,24 +34,26 @@ import { onMounted, ref } from "vue";
 import eventBus from "@/api/eventBus";
 const router = useRouter();
 
-const id = ref("");
+const areaId = ref("");
 const options = ref([]);
 eventBus.on('garden:organId',gardenOrganId)
 
+const organId = ref(null)
 function gardenOrganId(farmId){
+    organId.value = farmId
     VE_API.region.list({farmId}).then(res =>{
         options.value = res.data
-        id.value = res.data[0].id
-        eventBus.emit('area:id',id.value)
+        areaId.value = res.data[0].id
+        eventBus.emit('area:id',{areaId:areaId.value,farmId})
     })
 }
 
 const changeSelect = (e) =>{
-    eventBus.emit('area:id',e)
+    eventBus.emit('area:id',{areaId:areaId.value,farmId:organId.value})
 }
 
 onMounted(()=>{
-    gardenOrganId(sessionStorage.getItem('farmId'))
+    gardenOrganId(sessionStorage.getItem('farmId')*1)
 })
 
 const emit = defineEmits(["handleTab","handleTabItem"])
@@ -61,6 +63,7 @@ const childrenData = ref([]);
 const handleCheckedChange = (e) => {
     checkedChildren.value = [e[e.length -1]];
     emit('handleTabItem',checkedChildren.value[0])
+    eventBus.emit('handleTabItem',checkedChildren.value[0])
 };
 
 const active = ref(0);
@@ -88,7 +91,7 @@ const list = ref([
         {
             name: "物候指标",
             id: 2,
-            children: ["花穗长度", "单数华穗率"],
+            children: ["花穗长度", "单树花穗率"],
         },
         {
             name: "生态指标",
@@ -98,10 +101,12 @@ const list = ref([
         {
             name: "生长指标",
             id: 4,
+            children: ["生长缓慢", "花量大","花带叶"],
         },
         {
             name: "病虫指标",
             id: 5,
+            children: ["病害比例", "虫害比例"],
         },
     ],
     [

src/styles/common.scss

@@ -209,6 +209,12 @@ div{
     background-color: #F4F4F400;
 }
 
+//隐藏高德地图logo和版权
+.amap-logo ,.amap-copyright{
+    display: none;
+    opacity: 0 !important;
+}
+
 .chart_box{
     position: absolute;
     top:80px;

src/views/home/components/homePage.vue

@@ -93,7 +93,7 @@
 </template>
 
 <script setup>
-import {ref} from 'vue'
+import {ref,onMounted} from 'vue'
 import chartBox from "@/components/chartBox.vue";
 import tabs from "./tabs.vue";
 import barChart from "@/components/charts/barChart.vue";
@@ -104,10 +104,33 @@ import { useRouter } from "vue-router";
 const store = useStore()
 const router = useRouter()
 
+onMounted(()=>{
+  getReoprt()
+})
+
+const reportData = ref([])
+
+// function filterArr(){}
+
+const getReoprt = () =>{
+  VE_API.home.farmIndexReport({farmId:766,regionId:2}).then(res =>{
+    reportData.value = res.data || []
+  })
+}
+
 const handlePage = () =>{
   router.push('/variety_map')
 }
 
+const btnWrap = [
+  ["树高","冠幅"]
+]
+//选项子项监听事件
+eventBus.on('handleTabItem',handleTabItem)
+function handleTabItem(e){
+  console.log('e');
+}
+
 //基本指标
 const btnGroup = ["树高","冠幅"]
 // 物候指标

src/views/home/index.vue

@@ -47,7 +47,7 @@
         <div class="list">
           <chart-box name="农事列表" arrow="arrow-left" :class="{'list-wrap': rightIndex===0}">
             <template v-if="rightIndex===0">
-              <album></album>
+              <!-- <album></album> -->
               <!-- <img class="tabs" src="@/assets/images/home/ns-tabs.png" alt="">
               <div class="img-box">
                 <img @click="handleAct(item)" v-for="item in 2" :key="item" :src="require(`@/assets/images/home/0${act<=2&&act==item?item+'-act':item}.png`)" alt="">
@@ -96,7 +96,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 import config from "@/api/config.js"
 import timeLine from "@/components/timeLine.vue";
 import PicturePreview from "@/components/PicturePreview.vue";
@@ -150,12 +150,18 @@ onMounted(() => {
 
   getYellow()
   getFarmLog()
-  getBlueRegionList()
+
+  //区域切换监听事件
+  eventBus.on('area:id',areaId)
 });
 
+onUnmounted(()=>{
+  eventBus.off('area:id',areaId)
+})
+
 const blueList = ref([])
 const getBlueRegionList = () =>{
-  VE_API.farm.blueRegionList({farmId:766,regionId:2}).then(({ data }) => {
+  VE_API.farm.blueRegionList({farmId:organId.value,regionId:regionId.value}).then(({ data }) => {
       blueList.value = data.map(item =>{
         let color = 'rgba(255, 255, 255, 0.5)' //失效区域
         if(item.status===2){ //物候期风险
@@ -176,26 +182,47 @@ const getBlueRegionList = () =>{
   });
 }
 
+const organId = ref(null)
+const regionId = ref(null)
+const tabName = ref('')
+const tabId = ref(0)
 //选项卡事件监听
 const handleTab = ({name,id}) =>{
-  console.log('name',name,id);
+    tabName.value = name
+    tabId.value = id
     if(id===0){
       getBlueRegionList()
     }else{
       getFarmIndexReport()
     }
 }
-//选项卡子项事件监听
-const handleTabItem = () =>{
 
+//区域切换监听事件
+function areaId({areaId,farmId}){
+  organId.value = farmId
+  regionId.value = areaId
+  if(tabId.value===0){
+    getBlueRegionList()
+  }else{
+    getFarmIndexReport()
+  }
+}
+
+//选项卡子项事件监听
+const handleTabItem = (e) =>{
+  const index = reportData.value.blueZoneList.findIndex(item => item.key===e)
+  let arr = []
+  if(reportData.value.blueZoneList.length){
+    arr = blueListConvert(reportData.value.blueZoneList[index].obj,index)
+  }
+  blueRegionLayer.initData(arr,'87')
 }
 
-const active = ref(0)
 const reportData = ref({})
-const blueListConvert = (data)=>{
+const blueListConvert = (data,index)=>{
     const list = []
     for (let key in data) {
-        const filterData = reportData.value.blueZoneLegendList[active.value].list.filter(item => item.val === key)
+        const filterData = reportData.value.blueZoneLegendList[index].list.filter(item => item.val === key)
         const arr = data[key]
         arr.forEach(item =>{
             const listObj = blueList.value.filter(ele =>ele.blueZoneCode === item)
@@ -214,11 +241,14 @@ const blueListConvert = (data)=>{
 }
 
 const getFarmIndexReport = () =>{
-  const params = { farmId:766,regionId:2, type: '生态指标' };
+  const params = { farmId:organId.value,regionId:regionId.value, type: tabName.value };
     VE_API.farm.farmIndexReport(params).then(({data,code}) => {
       if (code === 0) {
           reportData.value = data || {};
-          const arr = blueListConvert(data.blueZoneList[active.value].obj)
+          let arr = []
+          if(data.blueZoneList.length){
+            arr = blueListConvert(data.blueZoneList[0].obj,0)
+          }
           blueRegionLayer.initData(arr,'87')
       }
   });

src/views/home/map/blueRegionLayer.js

@@ -22,13 +22,15 @@ class BlueRegionLayer {
         if (this.blueRegionLayer) {
             this.blueRegionLayer.source.clear();
         }
-        for (let item of arr) {
-            let feature = newAreaFeature(item);
-            let strokeColor = "#FFFFFF";
-            feature.setStyle(this.vectorStyle.getPolygonStyle(item.color+opacity, strokeColor, 1));
-            this.blueRegionLayer.addFeature(feature);
+        if(arr.length>0){
+            for (let item of arr) {
+                let feature = newAreaFeature(item);
+                let strokeColor = "#FFFFFF";
+                feature.setStyle(this.vectorStyle.getPolygonStyle(item.color+opacity, strokeColor, 1));
+                this.blueRegionLayer.addFeature(feature);
+            }
+            this.kmap.fit(this.blueRegionLayer.source.getExtent(), [200, 200, 200, 200]);
         }
-        this.kmap.fit(this.blueRegionLayer.source.getExtent(), [0, 0, 0, 0]);
     }
 }
 

src/views/varietyMap/index.vue

@@ -26,9 +26,10 @@
                         <img src="@/assets/images/common/area-icon.png" alt="" />
                         品种确权
                     </div>
+                    <div class="button" @click="handleClear">清除框选</div>
                 </div>
-                <map1 class="map"></map1>
-                <!-- <div ref="mapRef" class="map">
+                <div class="map">
+                    <my-map></my-map>
                     <div class="checkbox-list">
                         <span class="text">全部设置为</span>
                         <el-checkbox-group class="checkbox" v-model="checkedCities" @change="handleCheckedCitiesChange">
@@ -45,7 +46,7 @@
                         <div class="cancel">取消</div>
                         <div>保存</div>
                     </div>
-                </div> -->
+                </div>
             </div>
         </div>
     </div>
@@ -69,25 +70,36 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 import { ElMessage } from "element-plus";
 import fnHeader from "@/components/fnHeader.vue";
-import VarietyMap from "./varietyMap";
-import map1 from "./map";
+import myMap from "./map";
 import chartBox from "@/components/chartBox.vue";
 import { useRouter, useRoute } from "vue-router";
 import { useStore } from "vuex";
+import eventBus from "@/api/eventBus";
 const store = useStore();
-const varietyMap = new VarietyMap();
 
 const router = useRouter();
 const route = useRoute();
-const mapRef = ref();
 onMounted(() => {
     getList();
-    varietyMap.initMap("POINT(113.61448114737868 23.585550924763083)", mapRef.value);
+    eventBus.on('map:list',getMapList)
 });
 
+onUnmounted(()=>{
+    eventBus.off('map:list',getMapList)
+})
+
+function getMapList(arr){
+    console.log('arr',arr);
+}
+
+//清除框选
+const handleClear = () =>{
+    eventBus.emit('handle:clear')
+}
+
 const getList = () => {
     console.log("000");
 };
@@ -208,6 +220,7 @@ const handleClose = () => {
             border-radius: 8px;
             .map-header {
                 display: flex;
+                align-items: flex-start;
                 justify-content: space-between;
                 .title {
                     font-size: 22px;
@@ -219,6 +232,14 @@ const handleClose = () => {
                         margin-right: 8px;
                     }
                 }
+                .button{
+                    color: #fff;
+                    padding: 5px 15px;
+                    border-radius: 4px;
+                    font-size: 16px;
+                    border: 1px solid #fff;
+                    cursor: pointer;
+                }
             }
             .map {
                 width: 100%;
@@ -257,11 +278,11 @@ const handleClose = () => {
                                 border-color: #FFD489;
                                 &::after{
                                     border-color: #000;
+                                    border-width: 2px;
                                     height: 10px;
                                     left: 4px;
                                     width: 5px;
                                     top: 0;
-                                    border: 2px solid transparent;
                                 }
                             }
                         }

src/views/varietyMap/map.vue

@@ -1,122 +1,143 @@
 <template>
-  <div id="map-container" style="width: 100%; height: 600px;"></div>
-  <button @click="startRectangleSelection">开始框选</button>
-  <button @click="clearSelection">清除框选</button>
-  <div>
-    <h3>框选区域内的点位：</h3>
-    <ul>
-      <li v-for="(point, index) in selectedPoints" :key="index">
-        {{ point }}
-      </li>
-    </ul>
-  </div>
+    <div id="map-container"></div>
 </template>
 
-<script>
-import { ref, onMounted } from 'vue';
-import AMapLoader from '@amap/amap-jsapi-loader';
-
-export default {
-  setup() {
-    const map = ref(null);
-    const mouseTool = ref(null);
-    const selectedArea = ref(null);
-    const selectedPoints = ref([]);
-    const allPoints = ref([
-      { lng: 116.397428, lat: 39.90923 }, // 示例点位
-      { lng: 116.407428, lat: 39.91923 },
-      { lng: 116.417428, lat: 39.92923 },
-    ]);
-
-    // 初始化地图
-    const initMap = async () => {
-      try {
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+import AMapLoader from "@amap/amap-jsapi-loader";
+import eventBus from "@/api/eventBus";
+
+const map = ref(null);
+const mouseTool = ref(null);
+const selectedArea = ref(null);
+const selectedPoints = ref([]);
+const allPoints = ref([
+    { lng: 113.61448114737868, lat: 23.585550924763083 }, // 示例点位
+]);
+const defalutIcon = ref(null)
+const activeIcon = ref(null)
+
+const defalutOffset = ref(null)
+const activeOffset = ref(null)
+
+// 初始化地图
+const initMap = async () => {
+    try {
         const AMap = await AMapLoader.load({
-          key: '41769169f0f157e13a197e7eb0dd7b5b', // 替换为你的高德地图 Key
-          version: '2.0', // SDK 版本
-          plugins: ['AMap.MouseTool'], // 加载 MouseTool 插件
-        });
+            key: "41769169f0f157e13a197e7eb0dd7b5b", // 替换为你的高德地图 Key
+            version: "2.0", // SDK 版本
+            plugins: ["AMap.MouseTool"], // 加载 MouseTool 插件
+        }).then((AMap) => {
+            // 创建地图实例
+            map.value = new AMap.Map("map-container", {
+                zoom: 17, // 初始缩放级别
+                center: [113.61448114737868 ,23.585550924763083],
+                layers: [
+                    // 卫星
+                    new AMap.TileLayer.Satellite(),
+                ],
+            });
 
-        // 创建地图实例
-        map.value = new AMap.Map('map-container', {
-          zoom: 10, // 初始缩放级别
-          center: [116.397428, 39.90923], // 初始中心点（北京）
-        });
+            // 初始化 MouseTool
+            mouseTool.value = new AMap.MouseTool(map.value);
 
-        // 初始化 MouseTool
-        mouseTool.value = new AMap.MouseTool(map.value);
+            defalutIcon.value = new AMap.Icon({
+              // 图标的取图地址
+              image: require('@/assets/images/map/status/defalut-icon.png'),
+              // 图标所用图片大小
+              imageSize: new AMap.Size(26, 26),
+            });
+            activeIcon.value = new AMap.Icon({
+              // 图标的取图地址
+              image: require('@/assets/images/map/status/active-icon.png'),
+              // 图标所用图片大小
+              imageSize: new AMap.Size(40, 40),
+            });
 
-        // 添加示例点位
-        allPoints.value.forEach((point) => {
-          new AMap.Marker({
-            position: [point.lng, point.lat],
-            map: map.value,
-          });
-        });
+            defalutOffset.value = new AMap.Pixel(-5, -5)
+            activeOffset.value = new AMap.Pixel(-12, -14)
 
-        // 监听框选完成事件
-        mouseTool.value.on('draw', (event) => {
-          console.log('框选完成', event); // 调试日志
-          const { obj } = event;
-          if (obj instanceof AMap.Rectangle) {
-            selectedArea.value = obj;
-            checkPointsInArea(); // 检查框选区域内的点位
-          }
+            // 添加示例点位
+            allPoints.value.forEach((point) => {
+                point.icon = new AMap.Marker({
+                    position: [point.lng, point.lat],
+                    map: map.value,
+                    icon:defalutIcon.value,
+                    offset: defalutOffset.value
+                });
+            });
+            startRectangleSelection()
+
+            // 监听框选完成事件
+            mouseTool.value.on("draw", (event) => {
+                const { obj } = event;
+                if (obj instanceof AMap.Rectangle) {
+                    selectedArea.value = obj;
+                    map.value.remove(selectedArea.value);
+                    checkPointsInArea(); // 检查框选区域内的点位
+                }
+            });
         });
-      } catch (error) {
-        console.error('地图加载失败:', error);
-      }
-    };
-
-    // 开始框选
-    const startRectangleSelection = () => {
-      if (mouseTool.value) {
+    } catch (error) {
+        console.error("地图加载失败:", error);
+    }
+};
+
+// 开始框选
+const startRectangleSelection = () => {
+    if (mouseTool.value) {
         mouseTool.value.rectangle({
-          strokeColor: '#FF33FF', // 框选区域边框颜色
-          strokeOpacity: 1, // 边框透明度
-          strokeWeight: 2, // 边框宽度
-          fillColor: '#FF33FF', // 填充颜色
-          fillOpacity: 0.2, // 填充透明度
+            strokeColor: "#ffffff", // 框选区域边框颜色
+            strokeOpacity: 1, // 边框透明度
+            strokeWeight: 2, // 边框宽度
+            fillColor: "#000000", // 填充颜色
+            fillOpacity: 0.5, // 填充透明度
         }); // 启用矩形框选工具
-      }
-    };
+    }
+};
 
-    // 清除框选
-    const clearSelection = () => {
-      if (selectedArea.value) {
+// 清除框选
+const clearSelection = () => {
+    if (selectedArea.value) {
         map.value.remove(selectedArea.value); // 移除框选区域
         selectedArea.value = null;
+        selectedPoints.value.forEach(item =>{
+          item.icon.setIcon(defalutIcon.value)
+          item.icon.setOffset(defalutOffset.value)
+        })
         selectedPoints.value = []; // 清空选中的点位
-      }
-    };
+    }
+};
 
-    // 检查框选区域内的点位
-    const checkPointsInArea = () => {
-      if (!selectedArea.value) return;
+// 检查框选区域内的点位
+const checkPointsInArea = () => {
+    if (!selectedArea.value) return;
 
-      const bounds = selectedArea.value.getBounds(); // 获取框选区域的边界
-      selectedPoints.value = allPoints.value.filter((point) => {
+    const bounds = selectedArea.value.getBounds(); // 获取框选区域的边界
+    selectedPoints.value = allPoints.value.filter((point) => {
         return bounds.contains([point.lng, point.lat]); // 判断点位是否在框选区域内
-      });
-    };
-
-    // 组件挂载时初始化地图
-    onMounted(() => {
-      initMap();
     });
-
-    return {
-      startRectangleSelection,
-      clearSelection,
-      selectedPoints,
-    };
-  },
+    selectedPoints.value.forEach(item =>{
+      item.icon.setIcon(activeIcon.value)
+      item.icon.setOffset(activeOffset.value)
+    })
+    eventBus.emit('map:list',selectedPoints.value)
 };
+
+// 组件挂载时初始化地图
+onMounted(() => {
+    initMap();
+    eventBus.on('handle:clear',clearSelection)
+});
+
+onUnmounted(()=>{
+  eventBus.off('handle:clear',clearSelection)
+})
 </script>
 
 <style scoped>
 #map-container {
-  width: 100%;
-  height: 600px;
+    width: 100%;
+    height: 100%;
 }
-</style>
+</style>

src/views/varietyMap/varietyMap.js

@@ -1,223 +0,0 @@
-import { getCenter } from 'ol/extent';
-import config from "@/api/config.js";
-import * as KMap from "@/utils/ol-map/KMap";
-import Stroke from "ol/style/Stroke";
-import * as util from "@/common/ol_common.js";
-import VectorSource from 'ol/source/Vector';
-import {newPoint} from "@/utils/map";
-import Feature from "ol/Feature";
-import Draw from 'ol/interaction/Draw';
-import { Style, Fill, Circle as CircleStyle } from 'ol/style';
-import { Polygon } from 'ol/geom';
-import Icon from "ol/style/Icon";
-import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
-import {Cluster} from "ol/source";
-
-/**
- * @description
- */
-class VarietyMap {
-  constructor() {
-    let that = this;
-    let vectorStyle = new KMap.VectorStyle();
-    this.vectorStyle = vectorStyle;
-    this.drawInteraction = null;
-    this.vectorSource = new VectorSource();
-    this.clusterSource = new Cluster({
-      distance: 15,
-      minDistance: 60,
-    });
-
-    this.centerPointLayer = new KMap.VectorLayer("centerPointLayer", 1000, {
-      source:this.clusterSource,
-      style: (f) => {
-        return new Style({
-          image: new Icon({
-            src: require('@/assets/images/map/active-icon.png'),
-            scale: 0.4,
-          }),
-        });
-      },
-    });
-  }
-
-  initMap(location, target) {
-    let level = 16;
-    let coordinate = util.wktCastGeom(location).getFirstCoordinate();
-    this.kmap = new KMap.Map( target, level, coordinate[0], coordinate[1], null, 1, 22 ,"vec", true, true);
-    // 添加矢量图层用于显示框选结果
-    const vectorLayer = new VectorLayer({
-      source: this.vectorSource,
-      style: new Style({
-        fill: new Fill({
-          color: 'rgba(255, 255, 255, 0.2)',
-        }),
-        stroke: new Stroke({
-          color: '#ffcc33',
-          width: 2,
-        }),
-        image: new CircleStyle({
-          radius: 7,
-          fill: new Fill({
-            color: '#ffcc33',
-          }),
-        }),
-      }),
-    });
-    this.kmap.addLayer(this.centerPointLayer.layer);
-
-    this.kmap.addLayer(vectorLayer);
-    // this.startDrawing(this.kmap.map)
-    
-
-    // // 初始化框选交互
-    this.draw = new Draw({
-      source: this.vectorSource,
-      type: 'Circle', // 框选类型
-      // geometryFunction: (coordinates, geometry) => {
-      //   if (coordinates.length < 2) {
-      //     return null;
-      //   }
-      //   return this.drawSquare(coordinates); // 绘制矩形
-      // },
-    });
-
-    // 添加框选交互到地图
-    this.kmap.map.addInteraction(this.draw);
-
-    this.initData()
-
-    // 监听drawend事件，获取框选范围
-    let that = this
-    this.draw.on('drawend', (event) => {
-      // const feature = event.feature;
-      let pixel=that.kmap.map.getEventPixel(event.originalEvent)
-      const geometry = feature.getGeometry();
-      const extent = geometry.getExtent();
-      let feature=that.kmap.map.forEachFeatureAtPixel(pixel,function (feature) {
-        console.log('feature',feature);
-        return feature
-      })
-      // if(feature != null && feature == vm.polyline){
-      //     that.pointmoveFeature = feature
-      //     callback(vm.polyline)
-      // }
-      // if(feature==undefined){
-      //     if(that.pointmoveFeature){
-      //         that.pointmoveFeature = null
-      //         callback(null)
-      //     }
-      // }
-      console.log('Selected extent:', extent);
-      console.log('Center of selected area:', getCenter(extent));
-    });
-  }
-
-  initData(farmId, regionId){
-    let that = this
-    VE_API.sample.list({farmId:766,regionId:2}).then(({data})=>{
-      // data[0].status = 9
-      let features = []
-      for(let item of data){
-        let point = newPoint(item);
-        features.push(point)
-      }
-      const source = new VectorSource({
-        features: features,
-      });
-      that.clusterSource.setSource(source)
-    })
-  }
-
-  // 绘制矩形
-   drawRectangle = (coordinates) => {
-    const start = coordinates[0];
-    const end = coordinates[1];
-    const minX = Math.min(start[0], end[0]);
-    const maxX = Math.max(start[0], end[0]);
-    const minY = Math.min(start[1], end[1]);
-    const maxY = Math.max(start[1], end[1]);
-
-    // 定义矩形的四个顶点
-    const rectangleCoordinates = [
-      [minX, minY],
-      [maxX, minY],
-      [maxX, maxY],
-      [minX, maxY],
-      [minX, minY], // 闭合矩形
-    ];
-
-    return new Polygon([rectangleCoordinates]);
-  };
-
-    drawSquare = (coordinates) => {
-      const start = coordinates[0];
-      const end = coordinates[1];
-      const dx = end[0] - start[0];
-      const dy = end[1] - start[1];
-      const size = Math.max(Math.abs(dx), Math.abs(dy));
-    
-      const minX = start[0];
-      const minY = start[1];
-      const maxX = minX + size * Math.sign(dx);
-      const maxY = minY + size * Math.sign(dy);
-    
-      // 定义正方形的四个顶点
-      const squareCoordinates = [
-        [minX, minY],
-        [maxX, minY],
-        [maxX, maxY],
-        [minX, maxY],
-        [minX, minY], // 闭合正方形
-      ];
-    
-      return new Polygon([squareCoordinates]);
-    };
-
-
-  startDrawing = (map) => {
-    if (this.drawInteraction) {
-      map.removeInteraction(this.drawInteraction);
-    }
-
-    // 自定义绘制逻辑
-    this.drawInteraction = new Draw({
-      source: this.vectorSource,
-      type: 'Circle', // 使用 Circle 作为基础
-      geometryFunction: (coordinates, geometry) => {
-        if (coordinates.length < 2) {
-          return null;
-        }
-        return this.drawRectangle(coordinates); // 绘制矩形
-      },
-    });
-
-    map.addInteraction(this.drawInteraction);
-
-    // 监听绘制完成事件
-    this.drawInteraction.on('drawend', (event) => {
-      const feature = event.feature;
-      const geometry = feature.getGeometry();
-
-      console.log('正多边形坐标:', geometry.getCoordinates());
-    });
-  };
-
-  // 清除绘制
-  clearDrawing = () => {
-    this.vectorSource.clear();
-  };
-
-  // 重新渲染地图
-  updateMap() {
-    setTimeout(() => {
-      this.kmap.map.updateSize()
-    }, 1000);
-  }
-
-  fit(geomOrExtent, padding) {
-    this.kmap.fit(geomOrExtent, padding);
-  }
-}
-
-export default VarietyMap;