diff --git a/src/views/system/base/massifMap.vue b/src/views/system/base/massifMap.vue index db5cb44..90b748c 100644 --- a/src/views/system/base/massifMap.vue +++ b/src/views/system/base/massifMap.vue @@ -9,7 +9,7 @@ import * as turf from '@turf/turf' const polygonRef = ref(null) const settingsStore = useSettingsStore() -const theme = computed(()=>settingsStore.theme) +const theme = computed(() => settingsStore.theme) // 显示地块列表 const showMassifList = ref(true) // 当前地块 @@ -38,6 +38,8 @@ const control = reactive({ showPlant: false, // 显示植株标签 plantLabel: false, + // 显示地标 + showPoi: true, }) // 鼠标工具ref const mouseToolRef = ref(null) @@ -106,7 +108,7 @@ const polygonList = reactive([ 39.978905 ] ], - fillColor:undefined + fillColor: undefined } ]) const polygonTemp = 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) @@ -232,12 +246,31 @@ watch(() => polygonList, (value) => { const clickCurrentMassif = (item) => { currentMassif.value = item let points = turf.points(item.path); - polygonList.forEach(polygon =>{ + polygonList.forEach(polygon => { polygon.fillColor = '#00B2D5' }) item.fillColor = theme.value // 点击的中心点 - center.value = turf.center(points).geometry.coordinates + 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?'启用':'禁用'}`) } @@ -246,6 +279,7 @@ const clickCurrentMassif = (item) => { @@ -270,13 +304,13 @@ const clickCurrentMassif = (item) => { @draw="draw" /> + {
-
+
@@ -349,7 +384,25 @@ const clickCurrentMassif = (item) => { {{ item.enabled ? '启用' : '禁用' }}
- + + +
+
+ 地块详情 +
+
+ 编辑地块 +
+
+ 删除地块 +
+
+ {{ item.enabled?'禁用':'启用' }}地块 +
+
+
@@ -437,33 +490,40 @@ const clickCurrentMassif = (item) => { border-radius: 5px; float: left; } - .title-text{ + + .title-text { margin-left: 10px; float: left; font-size: 16px; - .crop{ + + .crop { font-size: 12px; margin-top: 2px; } } - .massif-item-click{ + + .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{ + + .massif-item-right { display: flex; justify-content: flex-end; align-items: center; font-size: 14px; color: #5c5e5d; - div{ + + div { margin: 0 3px; } - .more{ + + .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) => { }