fix: 编辑认养列表

src/components/fnHeader.vue

@@ -63,7 +63,7 @@ const toggleFarm = (val) => {
     const curGarden = options.value.filter(item =>item.organId === val)
     sessionStorage.setItem("point", curGarden[0].wkt);
     eventBus.emit('garden:organId',val)
-    router.push({ name: "Home" });
+    // router.push({ name: "Home" });
 };
 
 function getCurrentFormattedTime(type) {

src/views/customTree/index.vue

@@ -83,6 +83,18 @@
                             />
                         </el-select>
                     </div>
+                    <div class="custom-user">
+                        平均斤数：
+                        <el-select v-model="selectUser" placeholder="选择客户" style="width: 256px">
+                            <el-option
+                                v-for="item in userOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            />
+                        </el-select>
+                    </div>
+                    <div class="total">总斤数为<span>250</span>斤</div>
                     <div class="selected-tree" v-show="selectedItems.length">
                         <div class="tree-text">选择果树：</div>
                         <div

src/views/home/components/adoptList.vue

@@ -23,58 +23,94 @@
             </el-select>
         </div>
 
-        <div class="many-setting" v-show="isManySetting">
-            批量定价
+        <div class="many-setting select-wrap" v-show="isManySetting">
+            <el-select class="select-item many-select" v-model="settingType" placeholder="选中设置项" style="width: 96px">
+                <template #label="{ label, value }">
+                    <span v-show="value!=='total'">设置</span>
+                    <span>{{ label }}</span>
+                </template>
+                <el-option v-for="(item, index) in settingTypeOptions" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
             <el-input-number
-                style="width: 230px"
-                placeholder="请输入价格"
+                style="width: 174px"
+                placeholder="请输入"
                 class="number-input"
                 :controls="false"
                 v-model="unifyPrice"
                 :min="0"
                 @change="setManyPrice"
             />
-            <span class="unit">元/斤</span>
+            <span class="unit">{{settingType === "price" ? "元/斤" : settingType === "age" ? "年" : "斤"}}</span>
         </div>
 
         <div class="list-wrap">
             <div class="list-item" v-for="(item, index) in displayedAdoptList" :key="index">
-                <div class="tree-icon">
-                    <div class="tree-tag" v-show="item.status === 0">未定价</div>
-                    <div class="tree-tag wait" v-show="item.status === 1">待认养</div>
-                    <div class="tree-tag done" v-show="item.status === 2">已认养</div>
-                    <!-- <img class="tree-img" src="@/assets/images/foster-home/tree-item.png" alt="" /> -->
-                    <img class="tree-img" :src="require(`@/assets/images/foster-home/list/${index < 7 ? index : 0}.png`)" alt="" />
-                    <div class="tree-type-name-tag">白糖罂</div>
-                </div>
-                <div class="item-center">
-                    <div class="center-t">
-                        {{item.bm ? item.bm : "BTY-A3"+index}}
-                        <span class="type-tag">综合:{{item.zh||94}}分</span>
-                        <span class="type-tag">生态:{{item.st||92}}分</span>
-                        <span class="type-tag">树龄:{{item.sl||3}}年</span>
+                <div class="list-info">
+                    <div class="tree-icon">
+                        <div class="tree-tag" v-show="item.status === 0">未定价</div>
+                        <div class="tree-tag wait" v-show="item.status === 1">待认养</div>
+                        <div class="tree-tag done" v-show="item.status === 2">已认养</div>
+                        <!-- <img class="tree-img" src="@/assets/images/foster-home/tree-item.png" alt="" /> -->
+                        <img class="tree-img" :src="require(`@/assets/images/foster-home/list/${index < 7 ? index : 0}.png`)" alt="" />
+                        <div class="tree-type-name-tag">白糖罂</div>
+                    </div>
+                    <div class="item-center">
+                        <div class="center-t">
+                            {{item.bm ? item.bm : "BTY-A3"+index}}
+                            <span class="type-tag">综合:{{item.zh||94}}分</span>
+                            <span class="type-tag">生态:{{item.st||92}}分</span>
+                            <span class="type-tag" v-show="ROLE == 2">树龄:{{item.sl||3}}年</span>
+                        </div>
+                        <!-- 批量设置单价 -->
+                        <div class="center-item" v-show="isManySetting && settingType !== 'price'">单价：<span class="unit">{{item.price||12}}元/斤</span></div>
+                        
+                        <!-- 批量设置树龄或单项设置 -->
+                        <div class="center-item p-t-2 has-input" v-show="(isManySetting && settingType === 'age') || item.settingPrice">
+                            <span class="edit-label">树龄：</span>
+                            <el-input-number @change="settingSinglePrice" class="number-input" :controls="false" v-model="item.age" :min="0" />
+                            <span class="unit">年</span>
+                        </div>
+                        <!-- 不是编辑状态 -->
+                        <div class="center-item p-t-2 age-line" v-show="!isManySetting && !item.settingPrice">
+                            <div v-show="ROLE == 1" class="age-wrap">
+                                <div class="has-age">
+                                    <div class="age">树龄：<span>5年</span></div>
+                                </div>
+                                <div class="sort-line"></div>
+                            </div>
+                            单价：<span>{{item.status === 0 ? "--" : item.price||12}}元/斤</span>
+                        </div>
+                        <div class="center-item p-t-2 has-input" v-show="(isManySetting && settingType === 'price') || item.settingPrice">
+                            <span class="edit-label">单价：</span>
+                            <el-input-number @change="settingSinglePrice" class="number-input" :controls="false" v-model="item.price" :min="0" />
+                            <span class="unit">元/斤</span>
+                        </div>
+                        <div class="center-item" v-show="isManySetting && settingType !== 'age'">树龄：<span class="unit">{{item.age||5}}年</span></div>
+                        <div class="center-item" v-show="!item.settingPrice && !isManySetting">总认养斤数：<span class="unit">{{item.total||212}}斤</span></div>
+                        <div class="center-item" v-show="(isManySetting && settingType !== 'total')">总认养斤数：<span class="unit">{{item.total||212}}斤</span></div>
+                        
+                        <div class="center-item p-t-2 has-input" v-show="(isManySetting && settingType === 'total') || item.settingPrice">
+                            <span class="edit-label">总认养斤数：</span>
+                            <el-input-number @change="settingSinglePrice" class="number-input" :controls="false" v-model="item.total" :min="0" />
+                            <span class="unit">斤</span>
+                        </div>
                     </div>
-                    <div class="center-item p-t-2" v-show="!isManySetting">单价：<span>{{item.status === 0 ? "--" : item.price||12}}元/斤</span></div>
-                    <div class="center-item p-t-2 has-input" v-show="isManySetting || item.settingPrice">
-                        单价： <el-input-number @change="settingSinglePrice" class="number-input" :controls="false" v-model="item.price" :min="0" />
-                        <span class="unit">元/斤</span>
+                    <div v-show="!isManySetting && !item.settingPrice" @click="toSettingSinglePrice(index, true)">
+                        <img src="@/assets/images/common/edit-icon.png" alt="" />
                     </div>
-                    <div class="center-item">总认养斤数：<span>{{item.total||212}}斤</span></div>
                 </div>
-                <div v-show="!isManySetting && !item.settingPrice" @click="toSettingSinglePrice(index)">
-                    <img src="@/assets/images/common/edit-icon.png" alt="" />
+                <div v-show="item.settingPrice" class="btn-group edit-one">
+                    <!-- 渐变主色按钮 -->
+                    <div class="btn cancel-btn" @click="toSettingSinglePrice(index, false)">取消</div>
+                    <div class="btn edit-btn" @click="toSettingSinglePrice(index, false)">确认修改</div>
                 </div>
-                <div class="small-btn-group" v-show="item.settingPrice">
-                  <div class="btn cancel-btn">取消</div>
-                  <div class="btn edit-btn">保存</div>
-              </div>
             </div>
         </div>
 
         <!-- 渐变主色按钮 -->
         <div class="center-btn" v-show="!isManySetting" @click="manySetPrice">批量定价</div>
         <!-- 渐变主色按钮 -->
-        <div class="btn-group" v-show="isManySetting">
+        <div class="btn-group list-btn" v-show="isManySetting">
             <div class="btn cancel-btn" @click="saveManySetting(0)">取消</div>
             <div class="btn edit-btn" @click="saveManySetting(1)">保存</div>
         </div>
@@ -84,6 +120,8 @@
 <script setup>
 import { onMounted, ref } from "vue";
 
+const ROLE = 1;
+
 const areaVal = ref(0);
 const areaOptions = ref([
     { label: "全区", value: 0 },
@@ -138,6 +176,12 @@ onMounted(() => {});
 // 批量定价
 const unifyPrice = ref(null);
 const isManySetting = ref(false);
+const settingTypeOptions = [
+    {name: "单价", value: "price"},
+    {name: "树龄", value: "age"},
+    {name: "认养斤数", value: "total"},
+]
+const settingType = ref("price")
 function manySetPrice() {
     isManySetting.value = true;
     displayedAdoptList.value = adoptList.value.filter((item) => item.status === 0);
@@ -156,9 +200,9 @@ function setManyPrice(v) {
 
 // 设置单棵树单价
 
-function toSettingSinglePrice(i) {
+function toSettingSinglePrice(i, val) {
   console.log('tototot');
-  displayedAdoptList.value[i].settingPrice = true
+  displayedAdoptList.value[i].settingPrice = val
 }
 function settingSinglePrice() {
   console.log('sss');
@@ -210,13 +254,32 @@ function settingSinglePrice() {
     .list-wrap {
         padding: 12px 0;
         .list-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
             background: rgba(255, 255, 255, 0.08);
             padding: 8px 10px;
             border-radius: 5px;
+            .list-info {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+            .edit-one {
+                margin-top: 12px;
+                border-top: 1px solid #444444;
+                &.btn-group {
+                    padding: 12px 0;
+                    .btn {
+                        flex: 1;
+                        text-align: center;
+                        padding: 5px;
+                        &.cancel-btn {
+                            border-color: #363636;
+                            color: #FFFFFF;
+                        }
+                    }
+                }
+            }
             .tree-icon {
+                align-self: baseline;
                 position: relative;
                 .tree-tag {
                     position: absolute;
@@ -264,10 +327,25 @@ function settingSinglePrice() {
                     color: #6c6c6c;
                     font-size: 12px;
                     padding-top: 2px;
-                    span {
-                        color: #fff;
+                }
+                .age-line {
+                    display: flex;
+                    align-items: center;
+                    .age-wrap {
+                        display: flex;
+                        align-items: center;
+                        .sort-line {
+                            margin: 0 10px;
+                            height: 10px;
+                            width: 1px;
+                            background: #6C6C6C;
+                        }
                     }
                 }
+                .edit-label {
+                    display: inline-block;
+                    width: 76px;
+                }
                 .has-input {
                     padding: 4px 0;
                     .unit {
@@ -295,8 +373,17 @@ function settingSinglePrice() {
         color: #ffd489;
         padding: 12px 8px;
         margin-top: 12px;
+        .many-select {
+            ::v-deep {
+                .el-select__wrapper {
+                    padding: 4px;
+                    box-shadow: none;
+                }
+            }
+        }
     }
     .number-input {
+        margin: 0 12px;
         ::v-deep {
             &.el-input-number {
                 width: 80px;
@@ -336,13 +423,15 @@ function settingSinglePrice() {
         text-align: center;
     }
 
+    .list-btn {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+    }
     .btn-group {
         display: flex;
         align-items: center;
         justify-content: end;
-        position: absolute;
-        bottom: 0;
-        right: 0;
         background: #232323;
         width: 100%;
         padding: 10px 12px;

src/views/home/homeMap-amap.vue

@@ -0,0 +1,311 @@
+<template>
+    <div id="map-container"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+import AMapLoader from "@amap/amap-jsapi-loader";
+import eventBus from "@/api/eventBus";
+import { convertPointToArray } from "@/utils/index";
+import { deepClone } from "@/common/commonFun";
+import wellknown from 'wellknown';
+import {base_img_url,base_img_url3} from "@/api/config";
+
+const map = ref(null);
+const mouseTool = ref(null);
+const selectedArea = ref(null);
+const selectedPoints = ref([]);
+const allPoints = ref([]);
+const defalutAllPoints = ref([])
+const pointList = ref([])
+
+const mapEventType = ref('rectangle')
+
+// 自定义圆点样式
+const createMarkerContent = (color = 'rgba(0, 0, 0, 0.4)') => {
+    return `
+        <div style="
+            width: 15px;
+            height: 15px;
+            background-color: ${color};
+            border: 1px solid #fff;
+            border-radius: 50%;
+        ">
+        </div>
+    `;
+}
+
+//高亮样式
+const createMarkerImg = () => {
+    return `
+        <img style="width: 38px;height: 38px;" src="${require('@/assets/images/map/status/active-icon.png')}">
+    `;
+}
+// 初始化地图
+const initMap = async () => {
+    try {
+        const AMap = await AMapLoader.load({
+            key: "41769169f0f157e13a197e7eb0dd7b5b", // 替换为你的高德地图 Key
+            version: "2.0", // SDK 版本
+            plugins: ["AMap.MouseTool","AMap.MarkerCluster"], // 加载 MouseTool 插件
+        }).then(async (AMap) => {
+            // 创建地图实例
+            map.value = new AMap.Map("map-container", {
+                zoom: 18, // 初始缩放级别
+                center: [111.01055729572, 21.7743543],
+                layers: [
+                    // 天地图卫星
+                    new AMap.TileLayer({
+                        tileSize: 256, // 瓦片大小
+                        getTileUrl: function(x, y, z) {
+                            // 天地图影像 WMTS 地址
+                            const s = Math.floor(Math.random() * 8); // 随机选择服务器节点
+                            // return `https://t{0-7}.tianditu.gov.cn/img_c/w mts?tk=e95115c454a663cd052d96019fd83840`
+                            return `https://t${s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=${z}&TILEROW=${y}&TILECOL=${x}&tk=e95115c454a663cd052d96019fd83840`;
+                        },
+                    }),
+                    //天地图路网
+                    new AMap.TileLayer({
+                        tileSize: 256, // 瓦片大小
+                        getTileUrl: function(x, y, z) {
+                            // 天地图影像 WMTS 地址
+                            const s = Math.floor(Math.random() * 8); // 随机选择服务器节点
+                            return `https://t${s}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=${z}&TILEROW=${y}&TILECOL=${x}&tk=e95115c454a663cd052d96019fd83840`;
+                        },
+                    }),
+                    //正射影像
+                    new AMap.TileLayer({
+                        tileUrl: base_img_url + 'map/lby/[z]/[x]/[y].png',
+                        zIndex:2
+                    }),
+                    new AMap.TileLayer({
+                        tileUrl: base_img_url3 + 'map/lby/[z]/[x]/[y].png',
+                        zIndex:2
+                    })
+                ],
+            });
+
+            // // 初始化点聚合
+            // const cluster = new AMap.MarkerCluster(map, markers, {
+            //     gridSize: 60,          // 聚合网格像素大小
+            //     maxZoom: 15,           // 最大聚合级别
+            //     renderClusterMarker: customizeCluster // 自定义聚合样式
+            // });
+
+            // 初始化 MouseTool
+            mouseTool.value = new AMap.MouseTool(map.value);
+            
+            // startRectangleSelection()
+
+            // 监听框选完成事件
+            mouseTool.value.on("draw", (event) => {
+                if(mapEventType.value==='click') return
+                const { obj} = event;
+                if (obj instanceof AMap.Rectangle) {
+                    selectedArea.value = obj;
+                    map.value.remove(selectedArea.value);
+                    checkPointsInArea(); // 检查框选区域内的点位
+                }
+            });
+
+        });
+    } catch (error) {
+        console.error("地图加载失败:", error);
+    }
+};
+
+//重置数据
+const resetData = () =>{
+    allPoints.value = defalutAllPoints.value
+    allPoints.value.forEach(item =>{
+        item.icon.setContent(createMarkerContent(item.color))
+        item.icon.setOffset(new window.AMap.Pixel(-7, -7))
+        item.type = 'defalutIcon'
+    })
+}
+
+//初始化数据
+const initData = (data) =>{
+    allPoints.value = data
+    defalutAllPoints.value = []
+    totalList.value.forEach(item => map.value.remove(item.icon))
+    totalList.value = []
+    allPoints.value.forEach(item =>{
+        item.icon = new window.AMap.Marker({
+            position: item.lnglat,
+            map: map.value,
+            content: createMarkerContent(item.color),
+            offset: new window.AMap.Pixel(-7, -7),
+            extData: { id: item.id, priority: item.status > item.noImg > item.wys } // 标记优先级
+        });
+        item.type = 'defalutIcon'
+
+        // 绑定点击事件
+        item.icon.on('click', () => {
+            mapEventType.value = 'click'
+            if(item.type === 'defalutIcon'){
+                if (startDraw.value) {
+                    item.icon.setContent(createMarkerImg()); 
+                    item.icon.setOffset(new window.AMap.Pixel(-18, -18))
+                    item.type = 'activeIcon'
+                    const arr = pointList.value.filter(ele => ele.id === item.id)
+                    if(arr.length===0){
+                        pointList.value.push(item)
+                    }
+                }
+            }else{
+                item.icon.setContent(createMarkerContent(item.color)); 
+                item.icon.setOffset(new window.AMap.Pixel(-7, -7))
+                item.type = 'defalutIcon'
+            }
+
+            console.log('item', item);
+            eventBus.emit("clickMapPoint", item)
+            setTimeout(()=>{
+                mapEventType.value = 'draw'
+            },100)
+        });
+        defalutAllPoints.value.push(item)
+    })
+    // 初始化点聚合
+    // console.log('data',data);
+    // const cluster = new window.AMap.MarkerCluster(map.value, data, {
+    //     gridSize: 30,          // 聚合网格像素大小
+    //     // maxZoom: 15,           // 最大聚合级别
+    //     // renderClusterMarker: customizeCluster // 自定义聚合样式
+    // });
+    setTimeout(()=>{
+        map.value.setFitView(null, false, [0, 0, 0, 0]);
+    },100)
+    // 范围
+    // const p1 = [
+    //     [111.00745562137854, 21.77564355219471],
+    //     [111.00982318507914, 21.77557930674749],
+    //     [111.01133652227907, 21.776531091149934],
+    //     [111.0125762214629, 21.775945743742568],
+    //     [111.01290458708189, 21.775241423284797],
+    //     [111.01341617119812, 21.773759019078113],
+    //     [111.01320915809049, 21.77329502418189],
+    //     [111.01209794980082, 21.772538355582128],
+    //     [111.01117233946951, 21.772414623609905],
+    //     [111.00909744947245, 21.772878618505956],
+    //     [111.00744610353439, 21.774094523079953],
+    //     [111.00745562137854, 21.77564355219471]
+    //     ]
+    // addPolygon(p1)
+    
+}
+
+const startDraw = ref(false)
+// 开始框选
+const startRectangleSelection = () => {
+    if (mouseTool.value) {
+        startDraw.value = true
+        mouseTool.value.rectangle({
+            strokeColor: "#ffffff", // 框选区域边框颜色
+            strokeOpacity: 1, // 边框透明度
+            strokeWeight: 2, // 边框宽度
+            fillColor: "#000000", // 填充颜色
+            fillOpacity: 0.5, // 填充透明度
+        }); // 启用矩形框选工具
+        map.value.setDefaultCursor("crosshair");
+    }
+};
+
+ // 停止绘制矩形
+const stopDrawRectangle = () => {
+    mouseTool.value.close(); // 关闭 mouseTool
+    map.value.setDefaultCursor("default");
+};
+
+// 清除框选
+const clearSelection = () => {
+    if (selectedArea.value) {
+        map.value.remove(selectedArea.value); // 移除框选区域
+        selectedArea.value = null;
+    }
+    resetData()                                                                                                                                                                                                                                                                                                                                      
+    selectedPoints.value = []; // 清空选中的点位
+};
+
+// 检查框选区域内的点位
+const checkPointsInArea = () => {
+    if (!selectedArea.value) return;
+    const bounds = selectedArea.value.getBounds(); // 获取框选区域的边界
+    selectedPoints.value = allPoints.value.filter((point) => {
+        return bounds.contains(point.lnglat); // 判断点位是否在框选区域内
+    });
+    
+    selectedPoints.value.forEach(item =>{
+        if(item.type==='defalutIcon'){
+            item.icon.setContent(createMarkerImg())
+            item.icon.setOffset(new window.AMap.Pixel(-18, -18))
+            item.type = 'activeIcon'
+        }else{
+            item.icon.setContent(createMarkerContent(item.color))
+            item.icon.setOffset(new window.AMap.Pixel(-7, -7))
+            item.type = 'defalutIcon'
+        }
+    })
+};
+
+const totalList = ref([])
+
+function getSelectPoint(){
+    totalList.value = selectedPoints.value.concat(pointList.value)
+    const arr = totalList.value.filter(item =>item.type==='activeIcon')
+    return arr
+}
+
+function getRegionList(farmId) {
+    VE_API.region.list({farmId}).then(({data}) =>{
+        data.map(item => {
+            addPolygon(wktToAmapPolygon(item.wkt))
+        })
+    })
+}
+
+function addPolygon(data) {
+    console.log('dddddd', data);
+    let polygon = new window.AMap.Polygon({
+      path: data,
+      fillColor: '#FFE17E',
+      strokeOpacity: 1,
+      fillOpacity: 0.1,
+      strokeColor: 'rgba(255, 255, 255, 0.3)',
+      strokeWeight: 1,
+      strokeStyle: 'solid',
+    //   strokeDasharray: [5, 5],
+    });
+    map.value.add(polygon)
+}
+
+defineExpose({getSelectPoint,initData,startRectangleSelection,stopDrawRectangle,clearSelection, getRegionList})
+
+// 组件挂载时初始化地图
+onMounted(() => {
+    initMap()
+});
+
+onUnmounted(()=>{
+    map.value.destroy()// 销毁地图实例以释放资源
+})
+
+function wktToAmapPolygon(wkt) {
+    const geoJSON = wellknown.parse(wkt);
+    if (!geoJSON || geoJSON.type !== 'MultiPolygon') {
+        console.error('Invalid WKT or not a MULTIPOLYGON');
+        return [];
+    }
+
+    // MULTIPOLYGON 的坐标结构：[[[ [环1], [环2], ... ]]]，取第一个环
+    return geoJSON.coordinates[0][0].map(coord => [coord[0], coord[1]]);
+}
+</script>
+
+<style scoped>
+#map-container {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/home/homeMap.vue

@@ -1,462 +1,275 @@
 <template>
-    <div id="map-container"></div>
+    <div>
+        <div id="map" ref="areaRef" class="area-map"></div>
+    </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, nextTick } from "vue";
-import AMapLoader from "@amap/amap-jsapi-loader";
-import eventBus from "@/api/eventBus";
-import { convertPointToArray } from "@/utils/index";
-import { deepClone } from "@/common/commonFun";
-import wellknown from "wellknown";
-import { base_img_url, base_img_url3 } from "@/api/config";
-
-const map = ref(null);
-const mouseTool = ref(null);
-const selectedArea = ref(null);
-const selectedPoints = ref([]);
-const allPoints = ref([]);
-const defalutAllPoints = ref([]);
-const pointList = ref([]);
-
-const mapEventType = ref("rectangle");
-
-// 自定义圆点样式
-const createMarkerContent = (color = "rgba(0, 0, 0, 0.4)") => {
-    return `
-        <div style="
-            width: 15px;
-            height: 15px;
-            background-color: ${color};
-            border: 1px solid #fff;
-            border-radius: 50%;
-        ">
-        </div>
-    `;
-};
-
-//高亮样式
-const createMarkerImg = () => {
-    return `
-        <img style="width: 38px;height: 38px;" src="${require("@/assets/images/map/status/active-icon.png")}">
-    `;
-};
-// 初始化地图
-const initMap = async (mapData, callback) => {
-    try {
-        const AMap = await AMapLoader.load({
-            key: "41769169f0f157e13a197e7eb0dd7b5b", // 替换为你的高德地图 Key
-            version: "2.0", // SDK 版本
-            plugins: ["AMap.MouseTool", "AMap.MarkerCluster"], // 加载 MouseTool 插件
-        }).then(async (AMap) => {
-            // 创建地图实例
-            map.value = new AMap.Map("map-container", {
-                zoom: 18, // 初始缩放级别
-                center: [111.01055729572, 21.7743543],
-                layers: [
-                    // 天地图卫星
-                    new AMap.TileLayer({
-                        tileSize: 256, // 瓦片大小
-                        getTileUrl: function (x, y, z) {
-                            // 天地图影像 WMTS 地址
-                            const s = Math.floor(Math.random() * 8); // 随机选择服务器节点
-                            // return `https://t{0-7}.tianditu.gov.cn/img_c/w mts?tk=e95115c454a663cd052d96019fd83840`
-                            return `https://t${s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=${z}&TILEROW=${y}&TILECOL=${x}&tk=e95115c454a663cd052d96019fd83840`;
-                        },
-                    }),
-                    //天地图路网
-                    new AMap.TileLayer({
-                        tileSize: 256, // 瓦片大小
-                        getTileUrl: function (x, y, z) {
-                            // 天地图影像 WMTS 地址
-                            const s = Math.floor(Math.random() * 8); // 随机选择服务器节点
-                            return `https://t${s}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=${z}&TILEROW=${y}&TILECOL=${x}&tk=e95115c454a663cd052d96019fd83840`;
-                        },
-                    }),
-                    //正射影像
-                    new AMap.TileLayer({
-                        tileUrl: base_img_url + "map/lby/[z]/[x]/[y].png",
-                        zIndex: 2,
-                    }),
-                    new AMap.TileLayer({
-                        tileUrl: base_img_url3 + "map/lby/[z]/[x]/[y].png",
-                        zIndex: 2,
-                    }),
-                ],
-            });
-
-            // // 初始化点聚合
-            // const cluster = new AMap.MarkerCluster(map, markers, {
-            //     gridSize: 60,          // 聚合网格像素大小
-            //     maxZoom: 15,           // 最大聚合级别
-            //     renderClusterMarker: customizeCluster // 自定义聚合样式
-            // });
-
-            // 初始化 MouseTool
-            mouseTool.value = new AMap.MouseTool(map.value);
-
-            // startRectangleSelection()
-
-            // 监听框选完成事件
-            mouseTool.value.on("draw", (event) => {
-                if (mapEventType.value === "click") return;
-                const { obj } = event;
-                if (obj instanceof AMap.Rectangle) {
-                    selectedArea.value = obj;
-                    map.value.remove(selectedArea.value);
-                    checkPointsInArea(); // 检查框选区域内的点位
-                }
-            });
-        });
-        initData(mapData, true);
-        callback && callback();
-    } catch (error) {
-        console.error("地图加载失败:", error);
-    }
-};
-
-//重置数据
-const resetData = () => {
-    allPoints.value = defalutAllPoints.value;
-    allPoints.value.forEach((item) => {
-        item.icon.setContent(createMarkerContent(item.color));
-        // item.icon.setOffset(new window.AMap.Pixel(-7, -7));
-        item.type = "defalutIcon";
-    });
-};
-
-//初始化数据
-const initData = (data) => {
-    allPoints.value = data;
-    defalutAllPoints.value = [];
-    totalList.value.forEach((item) => map.value.remove(item.icon));
-    totalList.value = [];
-    // allPoints.value.forEach(item =>{
-    //     item.icon = new window.AMap.Marker({
-    //         position: item.lnglat,
-    //         map: map.value,
-    //         content: createMarkerContent(item.color),
-    //         offset: new window.AMap.Pixel(-7, -7),
-    //         extData: { id: item.id, priority: item.status > item.noImg > item.wys } // 标记优先级
-    //     });
-    //     item.type = 'defalutIcon'
-
-    //     // 绑定点击事件
-    //     item.icon.on('click', () => {
-    //         mapEventType.value = 'click'
-    //         if(item.type === 'defalutIcon'){
-    //             if (startDraw.value) {
-    //                 item.icon.setContent(createMarkerImg());
-    //                 item.icon.setOffset(new window.AMap.Pixel(-18, -18))
-    //                 item.type = 'activeIcon'
-    //                 const arr = pointList.value.filter(ele => ele.id === item.id)
-    //                 if(arr.length===0){
-    //                     pointList.value.push(item)
-    //                 }
-    //             } else {
-    //                 eventBus.emit("clickMapPoint", item)
-    //             }
-    //         }else{
-    //             item.icon.setContent(createMarkerContent(item.color));
-    //             item.icon.setOffset(new window.AMap.Pixel(-7, -7))
-    //             item.type = 'defalutIcon'
-    //         }
-
-    //         setTimeout(()=>{
-    //             mapEventType.value = 'draw'
-    //         },100)
-    //     });
-    //     defalutAllPoints.value.push(item)
-    // })
-
-    // 先清除现有的聚合实例
-    if (clusterInstance.value) {
-        clusterInstance.value.setMap(null); // 从地图上移除
-        clusterInstance.value = null; // 释放引用
-    }
-
-    // 初始化点聚合
-    // console.log('data',data);
-    clusterInstance.value = new window.AMap.MarkerCluster(map.value, allPoints.value, {
-        gridSize: 20, // 聚合网格像素大小
-        // maxZoom: 15,           // 最大聚合级别
-        renderClusterMarker: _renderClusterMarker, // 自定义聚合样式
-        renderMarker: _renderMarker, // 自定义非聚合点样式
+import * as KMap from "@/utils/ol-map/KMap";
+import * as util from "@/common/ol_common.js";
+import "ol/ol.css";
+import Map from "ol/Map";
+import View from "ol/View";
+import TileLayer from "ol/layer/Tile";
+import OSM from "ol/source/OSM";
+import VectorLayer from "ol/layer/Vector";
+// import VectorSource from "ol/source/Vector";
+import Feature from "ol/Feature";
+import Point from "ol/geom/Point";
+import Icon from "ol/style/Icon";
+import { fromLonLat } from "ol/proj";
+import DragBox from "ol/interaction/DragBox";
+import { platformModifierKeyOnly } from "ol/events/condition";
+import { newPoint } from "@/utils/map.js";
+import { Circle, Fill, Stroke, Style, Text } from "ol/style.js";
+import { Cluster, Vector as VectorSource } from "ol/source.js";
+import { boundingExtent } from "ol/extent.js";
+
+import { onMounted, ref } from "vue";
+import { useStore } from "vuex";
+import { unByKey } from "ol/Observable";
+let store = useStore();
+
+// 选中样式（高亮）
+// const selectedStyle = new Style({
+//     image: new Icon({
+//         src: require("@/assets/images/map/status/active-icon.png"),
+//         scale: 0.6,
+//     }),
+// });
+
+let kmap = null;
+const areaRef = ref(null);
+let dragBox;
+
+const isDrawing = ref(false);
+const enableBoxSelect = () => {
+    const data = mapPoint.value.filter((item) => item.fosterStatus === 0);
+    addCluster(data, 1);
+    isDrawing.value = true;
+    dragBox = new DragBox({
+        condition: platformModifierKeyOnly, // 按住 Ctrl 才可框选（可去掉）
     });
 
-    // 创建 AMap.Marker 实例数组
-    const markers = allPoints.value.map((item) => {
-        return new window.AMap.Marker({
-            position: item.lnglat
+    // 添加键盘事件监听
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+
+    kmap.map.addInteraction(dragBox);
+    // areaRef.value.style.cursor = 'crosshair';
+    dragBox.on("boxend", () => {
+        const extent = dragBox.getGeometry().getExtent();
+
+        treeClusterLayer.layer.getSource().getSource().getFeatures().forEach((feature) => {
+            const isInside = feature.getGeometry().intersectsExtent(extent);
+            if (isInside) {
+                // feature.setStyle(selectedStyle);
+                feature.set("highlight", true);
+            }
         });
     });
-    setTimeout(() => {
-        map.value.setFitView(markers);
-    }, 100);
 };
 
-function updateClusterData(isAll) {
-    let data = []
-    console.log('updateClusterData', isAll);
-    if (isAll) {
-        data = allPoints.value
-    } else {
-        // 筛选待开放点位
-        data = allPoints.value.filter((item) => item.fosterStatus === 0);
-    }
-
-    // 先清除现有的聚合实例
-    if (clusterInstance.value) {
-        clusterInstance.value.setMap(null); // 从地图上移除
-        clusterInstance.value = null; // 释放引用
+const handleKeyDown = (e) => {
+    if (e.ctrlKey) {
+        areaRef.value.style.cursor = "crosshair";
     }
-    // if (markersPoints.value) {
-    //     markersPoints.value.map(marker => {
-    //         map.value.remove(marker)
-    //     })
-    // }
-
-    // 初始化点聚合
-    // console.log('data',data);
-    clusterInstance = new window.AMap.MarkerCluster(map.value, data, {
-        gridSize: 20, // 聚合网格像素大小
-        // maxZoom: 15,           // 最大聚合级别
-        renderClusterMarker: _renderClusterMarker, // 自定义聚合样式
-        renderMarker: _renderMarker, // 自定义非聚合点样式
-    });
-}
-
-let clusterInstance = ref(null); // 存储聚合实例
-let markersPoints = null; // 存储点位实例
-
-// 聚合样式
-const _renderClusterMarker = function (context) {
-    const isActive = context.clusterData[0].activePoint
-    console.log('isActive', isActive);
-    context.marker.setContent(createMarkerContent(context.clusterData[0].color));
-    // context.marker.setOffset(new window.AMap.Pixel(-7, -7));
-
-    context.marker.on("click", function (e) {
-        if (startDraw.value) {
-            context.data[0].activePoint = true;
-            e.target.setContent(createMarkerImg());
-            e.target.setOffset(new window.AMap.Pixel(-19, -44));
-        } else {
-            eventBus.emit("clickMapPoint", context.clusterData[0]);
-        }
-    });
 };
 
-// 单个非聚合样式
-const _renderMarker = function (context) {
-    const isActive = context.data[0].activePoint
-    console.log('aaaaisActive', isActive);
-    if (isActive) {
-        context.marker.setContent(createMarkerImg());
-    } else {
-        context.marker.setContent(createMarkerContent(context.data[0].color));
+const handleKeyUp = (e) => {
+    if (!e.ctrlKey) {
+        areaRef.value.style.cursor = "";
     }
-    // context.marker.setOffset(new window.AMap.Pixel(-7, -7));
-
-    context.marker.on("click", function (e) {
-        if (startDraw.value) {
-            context.data[0].activePoint = true;
-            e.target.setContent(createMarkerImg());
-            e.target.setOffset(new window.AMap.Pixel(-19, -42));
-        } else {
-            eventBus.emit("clickMapPoint", context.data[0]);
-        }
-    });
 };
 
-const startDraw = ref(false);
-// 开始框选
-const startRectangleSelection = () => {
-    // 筛选聚合点位数据
-    updateClusterData();
-    if (mouseTool.value) {
-        startDraw.value = true;
-        mouseTool.value.rectangle({
-            strokeColor: "#ffffff", // 框选区域边框颜色
-            strokeOpacity: 1, // 边框透明度
-            strokeWeight: 2, // 边框宽度
-            fillColor: "#000000", // 填充颜色
-            fillOpacity: 0.5, // 填充透明度
-        }); // 启用矩形框选工具
-        map.value.setDefaultCursor("crosshair");
-    }
+const stopBoxSelect = () => {
+    addCluster(mapPoint.value);
+    kmap.map.removeInteraction(dragBox);
+    // 移除事件监听
+    window.removeEventListener("keydown", handleKeyDown);
+    window.removeEventListener("keyup", handleKeyUp);
 };
 
-// 停止绘制矩形
-const stopDrawRectangle = () => {
-    mouseTool.value.close(); // 关闭 mouseTool
-    map.value.setDefaultCursor("default");
-    startDraw.value = false;
-    updateClusterData(true)
-};
+let treeClusterLayer;
+onMounted(() => {
+    let level = 16;
+    let coordinate = util.wktCastGeom(store.getters.userinfo.location).getFirstCoordinate();
+    kmap = new KMap.Map(areaRef.value, level, coordinate[0], coordinate[1], null, 1, 22, "img", true, true);
 
-// 清除框选
-const clearSelection = () => {
-    if (selectedArea.value) {
-        map.value.remove(selectedArea.value); // 移除框选区域
-        selectedArea.value = null;
+});
+let styleCache = {};
+let listenKey;
+const mapPoint = ref([]);
+let clusterSource;
+// --------聚合-----------
+function addCluster(treeListData, distanceVal) {
+    if (!distanceVal) {
+        mapPoint.value = treeListData;
     }
-    resetData();
-    selectedPoints.value = []; // 清空选中的点位
-};
-
-// 检查框选区域内的点位
-const checkPointsInArea = () => {
-    if (!selectedArea.value) return;
-    console.log('selectedArea.value', selectedArea.value);
-    const bounds = selectedArea.value.getBounds(); // 获取框选区域的边界
-    selectedPoints.value = allPoints.value.filter((point) => {
-        return bounds.contains(point.lnglat); // 判断点位是否在框选区域内
+    clearCluster();
+    let that = this;
+    let features = [];
+    // 根据状态加上对应的图标
+    for (let item of treeListData) {
+        let point = newPoint(item);
+        features.push(point);
+    }
+    const source = new VectorSource({
+        features: features,
     });
 
-    selectedPoints.value.forEach((item) => {
-        if (item.type === "defalutIcon") {
-            item.icon.setContent(createMarkerImg());
-            // item.icon.setOffset(new window.AMap.Pixel(-18, -18));
-            item.type = "activeIcon";
-        } else {
-            item.icon.setContent(createMarkerContent(item.color));
-            // item.icon.setOffset(new window.AMap.Pixel(-7, -7));
-            item.type = "defalutIcon";
-        }
+    clusterSource = new Cluster({
+        distance: distanceVal ? distanceVal : 20, // 集合范围
+        // minDistance: 60,
+        source: source,
     });
-};
-
-const totalList = ref([]);
-
-function getSelectPoint() {
-    totalList.value = selectedPoints.value.concat(pointList.value);
-    const arr = totalList.value.filter((item) => item.type === "activeIcon");
-    return arr;
-}
-
-function getRegionList(farmId) {
-    // 先清除所有现有多边形
-    clearAllPolygons();
-    VE_API.region.list({ farmId }).then(({ data }) => {
-        data.map((item) => {
-            // 分区区域
-            addPolygon(wktToAmapPolygon(item.wkt));
 
-            // 分区名称
-            new window.AMap.Marker({
-                position: convertPointToArray(item.pointWkt),
-                map: map.value,
-                content: createTextContent(item),
-                zIndex: 99,
-                offset: new window.AMap.Pixel(-80, -10),
-            });
-        });
+    treeClusterLayer = new KMap.VectorLayer("forest-cluster", 1000, {
+        minZoom: 15,
+        source: clusterSource,
+        style: (feature) => {
+            const size = feature.get("features").length;
+            let testStyle;
+            // 只有一个数据，不需要聚合，直接使用第一项数据的图标
+            if (size == 1) {
+               let featureOne = feature.get("features")[0];
+                const key = featureOne.get('fosterStatus')+"status"
+                // let style = styleCache[key];
+                let style = false;
+                if (!style) {
+                    const highlight = featureOne.get("highlight");
+                    if (highlight) {
+                        style = new Style({
+                            image: new Icon({
+                                src: require("@/assets/images/map/status/active-icon.png"),
+                                scale: 0.6,
+                            }),
+                        });
+                    } else {
+                        style = new Style({
+                            image: new Circle({
+                                radius: featureOne.get("fosterStatus") === 0 || !featureOne.get("fosterStatus") ? 10 : 12,
+                                fill: new Fill({
+                                    color:
+                                        featureOne.get("fosterStatus") === 0
+                                            ? "#ffffff00"
+                                            : featureOne.get("fosterStatus") === 1
+                                            ? "#EEEEEE"
+                                            : featureOne.get("fosterStatus") === 2
+                                            ? "#F0AC37"
+                                            : "#ffffff00",
+                                }),
+                                stroke: new Stroke({
+                                    color: "#fff",
+                                    width: 1,
+                                }),
+                            }),
+                        });
+                    }
+                    // styleCache[key] = style;
+                }
+                return style;
+            }
+            // 多个点位聚合，循环处理得到图标
+            const featureObj = feature.get("features")[0];
+            // let pointId = featureObj.get('fosterStatus')
+            // let style = styleCache[pointId];
+            let style = false;
+            if (!style) {
+                testStyle = new Style({
+                    text: new Text({
+                        text: size + "",
+                        offsetX: 0,
+                        offsetY: 0,
+                        font: "bold 10px sans-serif",
+                        fill: new Fill({ color: featureObj.get("fosterStatus") === 1 ? "#000" : "#fff" }), // 字体颜色
+                        // stroke: new Stroke({ color: "green" }), // 字体颜色
+                    }),
+                    zIndex: 3,
+                });
+
+                const highlight = featureObj.get("highlight");
+                if (highlight) {
+                    style = new Style({
+                        image: new Icon({
+                            src: require("@/assets/images/map/status/active-icon.png"),
+                            scale: 0.6,
+                        }),
+                    });
+                } else {
+                    style = new Style({
+                        image: new Circle({
+                            radius: featureObj.get("fosterStatus") === 0 || !featureObj.get("fosterStatus") ? 10 : 12,
+                            fill: new Fill({
+                                color:
+                                    featureObj.get("fosterStatus") === 0
+                                        ? "#ffffff00"
+                                        : featureObj.get("fosterStatus") === 1
+                                        ? "#EEEEEE"
+                                        : featureObj.get("fosterStatus") === 2
+                                        ? "#F0AC37"
+                                        : "#ffffff00",
+                            }),
+                            stroke: new Stroke({
+                                color: "#fff",
+                                width: 1,
+                            }),
+                        }),
+                    });
+                }
+                // styleCache[pointId] = style;
+            }
+            return [style, testStyle];
+        },
     });
-}
 
-let polygons = []; // 存储所有多边形实例的数组
+    kmap.addLayer(treeClusterLayer.layer);
 
-function addPolygon(data) {
-    let polygon = new window.AMap.Polygon({
-        path: data,
-        fillColor: "#FFE17E",
-        strokeOpacity: 1,
-        fillOpacity: 0.1,
-        strokeColor: "rgba(255, 255, 255, 0.3)",
-        strokeWeight: 1,
-        strokeStyle: "solid",
-        //   strokeDasharray: [5, 5],
+    if(!distanceVal) {
+        zoomToFeatures(features)
+    }
+    // kmap.getView().fit(this.treeClusterLayer.layer.getSource().getSource().getExtent(), { duration: 1000, padding: [120, 120, 200, 120] });
+    // 监听聚合点位的点击，点击后缩放到范围内
+    listenKey = kmap.on("click", (e) => {
+        if (treeClusterLayer) {
+            treeClusterLayer.layer.getFeatures(e.pixel).then((clickedFeatures, layer) => {
+                if (clickedFeatures.length) {
+                    const features = clickedFeatures[0].get("features");
+                    if (features.length > 1) {
+                        const extent = boundingExtent(features.map((r) => r.getGeometry().getCoordinates()));
+                        kmap.getView().fit(extent, { duration: 1000, padding: [250, 250, 250, 250] });
+                    }
+                    if (isDrawing.value) {
+                        features[0].set("highlight", true);
+                        // features[0].setStyle(selectedStyle)
+                    }
+                }
+            });
+        }
     });
-    map.value.add(polygon);
-    polygons.push(polygon);
 }
 
-// 清除所有多边形函数
-function clearAllPolygons() {
-    if (polygons.length > 0) {
-        polygons.forEach((polygon) => {
-            map.value.remove(polygon);
-        });
-        polygons = []; // 清空数组
+// 清除聚合图层，解除绑定
+function clearCluster() {
+    if (treeClusterLayer) {
+        treeClusterLayer.layer.getSource().getSource().clear();
+        treeClusterLayer.layer.getSource().clear();
+        treeClusterLayer = null;
+        unByKey(listenKey);
     }
 }
 
-// 分区名称
-function createTextContent(item) {
-    console.log("item", item);
-    return `
-        <div class="area-name">
-            ${item.name}
-            <div class="area-count" style="display: ${item.pointCount ? "block" : "none"}">
-            ${item.pointCount}/${item.pointCount}
-                </div>
-        </div>
-    `;
+function zoomToFeatures(features) {
+    const extent = boundingExtent(features.map((r) => r.getGeometry().getCoordinates()));
+    kmap.getView().fit(extent, { duration: 500, padding: [200, 250, 120, 250] });
 }
 
-defineExpose({
-    getSelectPoint,
-    initData,
-    initMap,
-    startRectangleSelection,
-    stopDrawRectangle,
-    clearSelection,
-    getRegionList,
-});
-
-// 组件挂载时初始化地图
-onMounted(() => {
-    // nextTick(() => {
-    //     initMap();
-    // })
-});
-
-onUnmounted(() => {
-    map.value.destroy(); // 销毁地图实例以释放资源
-});
-
-function wktToAmapPolygon(wkt) {
-    const geoJSON = wellknown.parse(wkt);
-    if (!geoJSON || geoJSON.type !== "MultiPolygon") {
-        console.error("Invalid WKT or not a MULTIPOLYGON");
-        return [];
-    }
-
-    // MULTIPOLYGON 的坐标结构：[[[ [环1], [环2], ... ]]]，取第一个环
-    return geoJSON.coordinates[0][0].map((coord) => [coord[0], coord[1]]);
-}
+defineExpose({ addCluster, enableBoxSelect, stopBoxSelect });
 </script>
 
-<style scoped>
-#map-container {
+<style lang="less" scoped>
+.area-map {
     width: 100%;
     height: 100%;
 }
 </style>
-
-<style lang="less">
-.area-name {
-    width: 155px;
-    height: 40px;
-    line-height: 40px;
-    font-size: 30px;
-    color: #fff;
-    font-family: "PangMenZhengDao";
-    text-align: center;
-    position: relative;
-    background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.1) 100%);
-}
-.area-count {
-    position: absolute;
-    font-family: "PangMenZhengDao";
-    left: calc(100% - 48px);
-    top: -22px;
-    font-size: 16px;
-    padding: 0px 12px;
-    height: 32px;
-    line-height: 32px;
-    border-radius: 40px;
-    background: linear-gradient(162deg, #ffcf80, #d18100);
-}
-</style>

src/views/home/index.vue

@@ -52,14 +52,14 @@
 
             <div class="tips" v-show="checkShow">
                 <div class="text">
-                    <span>提示：</span>请在底图上点选 <span>认养的果树</span>，或框选 <span>认养的区域</span>
+                    <span>提示：</span>请在底图上点选 <span>认养的果树</span>，或按住 Ctrl 框选 <span>认养的区域</span>
                 </div>
             </div>
 
             <div v-show="!checkShow" class="right-button yes-events" @click="hanldeCheck">勾选认养区域</div>
-            <div v-show="checkShow" class="center-button yes-events">
-                <div class="cancel" @click="handleCancel">取消</div>
-                <div @click="handleCancel">确认开放认养权限</div>
+            <div v-show="checkShow" class="center-button">
+                <div class="cancel yes-events" @click="handleCancel">取消</div>
+                <div class="yes-events" @click="handleCancel">确认开放认养权限</div>
             </div>
         </div>
     </div>
@@ -113,16 +113,18 @@ onUnmounted(() => {
 
 const getPointList = () =>{
     VE_API.variety.pointList({ farmId:organId.value, selectAll:1 }).then(({ data }) => {
-        const arr = data.map(item =>{
-            return{
-                ...item,
-                color: item.fosterStatus === 0 ? "transprent" : (item.fosterStatus === 1 ? "#EEEEEE" : (item.fosterStatus === 2 ? "#F0AC37" : "transprent")),
-                lnglat:convertPointToArray(item.point)
-            }
-        })
+        // const arr = data.map(item =>{
+        //     return{
+        //         ...item,
+        //         color: item.fosterStatus === 0 ? "transprent" : (item.fosterStatus === 1 ? "#EEEEEE" : (item.fosterStatus === 2 ? "#F0AC37" : "transprent")),
+        //         lnglat:convertPointToArray(item.point)
+        //     }
+        // })
         if(mapRef.value){
             nextTick(() => {
-                mapRef.value.initMap(arr, () =>  mapRef.value.getRegionList(organId.value))
+                mapRef.value.addCluster(data)
+                // mapRef.value.initData(arr)
+                // mapRef.value.initMap(arr, () =>  mapRef.value.getRegionList(organId.value))
             })
         }
     })
@@ -131,13 +133,13 @@ const getPointList = () =>{
 const checkShow = ref(false)
 const hanldeCheck = () =>{
     checkShow.value = true
-    mapRef.value.startRectangleSelection()
+    mapRef.value.enableBoxSelect()
 }
 
 const handleCancel = () =>{
     checkShow.value = false
-    mapRef.value.clearSelection()
-    mapRef.value.stopDrawRectangle()
+    // mapRef.value.clearSelection()
+    mapRef.value.stopBoxSelect()
 }
 
 // 图例
@@ -167,7 +169,6 @@ const handleTab = async ({ name, id, isUpdate, params, legend, colorObj }) => {
 function areaId({ areaId, farmId }) {
     organId.value = farmId;
     regionId.value = areaId;
-    console.log('aaaaaaaaaaaaaaa',areaId, farmId);
 
     // 树点位
     getPointList()