网格排除超出部分

src/views/system/base/massifMap.vue

@@ -38,6 +38,8 @@ const control = reactive({
   showPlant: false,
   // 显示植株标签
   plantLabel: false,
+  // 显示地标
+  showPoi: true,
 })
 // 鼠标工具ref
 const mouseToolRef = ref(null)
@@ -207,12 +209,24 @@ watch(() => polygonList, (value) => {
     // 格式化网格线显示
     // gridLines.value.push(drawGridLines(item.path))
     var bbox = turf.bbox(turf.lineString(item.path));
+    var polygon = turf.polygon([[...item.path, item.path[0]]]);
     // 网格密度 km
     var cellSide = 0.01;
     var options = {units: 'kilometers'};
     var squareGrid = turf.squareGrid(bbox, cellSide, options);
     let newList = []
-    squareGrid.features.map(item => item.geometry.coordinates).forEach(item => {
+    const filteredGrid = turf.featureCollection([]);
+    // 遍历网格中的每一个单元（多边形）
+    squareGrid.features.forEach(gridCell => {
+      // 使用turf.intersect检查网格单元是否与原始多边形相交
+      const intersection = turf.intersect(polygon, gridCell);
+
+      // 如果有交集（即该网格单元至少部分位于多边形内），则保留
+      if (intersection) {
+        filteredGrid.features.push(gridCell);
+      }
+    });
+    filteredGrid.features.map(item => item.geometry.coordinates).forEach(item => {
       newList.push(...item)
     })
     gridLines.value.push(newList)
@@ -239,6 +253,25 @@ const clickCurrentMassif = (item) => {
   // 点击的中心点
   center.value = turf.center(points).geometry.coordinates
 }
+// 删除地块
+const delMassif = (item,index) => {
+  ElMessageBox.confirm(
+      '地块删除后，将无法被找回，是否人要删除该地块？',
+      '删除地块',
+      {
+        confirmButtonText: '确认删除',
+        cancelButtonText: '不，我再想想',
+        customClass: 'message-box'
+      }
+  ).then(()=>{
+    polygonList.splice(index,1)
+    ElMessage.success(`${item.label || '地块'}删除成功`)
+  })
+}
+const updMassifStatus = (item,enabled) => {
+  item.enabled = enabled
+  ElMessage.success(`${item.title || '地块'}状态已更新为${enabled?'启用':'禁用'}`)
+}
 </script>
 
 <template>
@@ -246,6 +279,7 @@ const clickCurrentMassif = (item) => {
     <el-amap
         :center="center"
         :zoom="zoom"
+        :features="control.showPoi?['bg','point','road','building']:['bg']"
     >
       <!--卫星云图-->
       <el-amap-layer-satellite :visible="true"/>
@@ -270,13 +304,13 @@ const clickCurrentMassif = (item) => {
           @draw="draw"
       />
       <!--多边形-->
+      <!-- @mousedown="clickCurrentMassif(polygon)"-->
       <el-amap-polygon
           v-for="(polygon, index) in polygonList"
           :path="polygon.path"
           :visible="true"
           :fillColor="polygon.fillColor"
           :editable="false"
-          @mousedown="clickCurrentMassif(polygon)"
       />
       <!--多边形-->
       <el-amap-polygon
@@ -324,7 +358,8 @@ const clickCurrentMassif = (item) => {
           </div>
           <el-collapse-transition>
             <div class="massif-list" v-show="showMassifList">
-              <div class="massif-item" :class="{'massif-item-click':item.id === currentMassif?.id}" v-for="(item,index) in polygonList" @click="clickCurrentMassif(item)">
+              <div class="massif-item" :class="{'massif-item-click':item.id === currentMassif?.id}"
+                   v-for="(item,index) in polygonList" @click="clickCurrentMassif(item)">
                 <el-row>
                   <el-col :span="12">
                     <div class="title">
@@ -349,7 +384,25 @@ const clickCurrentMassif = (item) => {
                         {{ item.enabled ? '启用' : '禁用' }}
                       </div>
                       <div class="more">
+                        <el-popover placement="right" :width="60" trigger="click">
+                          <template #reference>
                             <i-more theme="outline" size="24" fill="#5c5e5d"/>
+                          </template>
+                          <div>
+                            <div class="more-item">
+                              地块详情
+                            </div>
+                            <div class="more-item">
+                              编辑地块
+                            </div>
+                            <div class="more-item" @click="delMassif(item,index)">
+                              删除地块
+                            </div>
+                            <div class="more-item" @click="updMassifStatus(item,!item.enabled)">
+                              {{ item.enabled?'禁用':'启用' }}地块
+                            </div>
+                          </div>
+                        </el-popover>
                       </div>
                     </div>
                   </el-col>
@@ -437,32 +490,39 @@ const clickCurrentMassif = (item) => {
       border-radius: 5px;
       float: left;
     }
+
     .title-text {
       margin-left: 10px;
       float: left;
       font-size: 16px;
+
       .crop {
         font-size: 12px;
         margin-top: 2px;
       }
     }
+
     .massif-item-click {
       border: 1px solid v-bind(theme) !important;
     }
+
     .massif-item {
       border-radius: 5px;
       border-bottom: 1px solid rgba(0, 0, 0, 0.08);
       padding: 10px;
       margin: 0 -5px;
+
       .massif-item-right {
         display: flex;
         justify-content: flex-end;
         align-items: center;
         font-size: 14px;
         color: #5c5e5d;
+
         div {
           margin: 0 3px;
         }
+
         .more {
           //鼠标悬浮变成点击
           cursor: pointer;
@@ -486,7 +546,16 @@ const clickCurrentMassif = (item) => {
   background: none;
   color: #FFFFFF;
 }
-
+.more-item {
+  text-align: center;
+  //鼠标悬浮变成点击
+  cursor: pointer;
+  padding: 5px 0;
+  &:hover {
+    background-color: var(--el-color-primary-light-9);
+    color: var(--el-color-primary);
+  }
+}
 //绘制操作区
 .protract-control {
   position: absolute;
@@ -495,11 +564,18 @@ const clickCurrentMassif = (item) => {
 }
 </style>
 <style lang="scss">
+.el-popover.el-popper{
+  min-width: 100px;
+  padding: 5px;
+}
 //修改确认弹窗样式
 .message-box {
   --el-messagebox-width: 450px;
   padding: 20px;
-
+  .el-message-box__message{
+    text-align: center;
+    width: 100%;
+  }
   .el-message-box__btns {
     justify-content: center;
   }