diff --git a/src/components/titleDivider/index.vue b/src/components/titleDivider/index.vue index 7ac7bfe..bc0ad16 100644 --- a/src/components/titleDivider/index.vue +++ b/src/components/titleDivider/index.vue @@ -9,15 +9,17 @@ const theme = computed(() => settingsStore.theme) diff --git a/src/views/system/base/mapMarkers.vue b/src/views/system/base/mapMarkers.vue index 8fe5d2d..8b21677 100644 --- a/src/views/system/base/mapMarkers.vue +++ b/src/views/system/base/mapMarkers.vue @@ -16,6 +16,24 @@ const baseList = ref([ label:'测试', } ]) +const control = reactive({ + // 地图类型 + dataType: 1, + // 显示地块标签 + massifLabel: true, + // 显示网格地块 + massifGrid: false, + // 显示垄 + showRidge: false, + // 显示垄标签 + ridgeLabel: false, + // 显示植株 + showPlant: false, + // 显示植株标签 + plantLabel: false, + // 显示地标 + showPoi: true, +}) // 点击的基地 const clickBase = ref(null) @@ -54,6 +72,7 @@ const selectPoi = ({poi}) => { @@ -82,7 +101,7 @@ const selectPoi = ({poi}) => { @select="selectPoi" />
- +
diff --git a/src/views/system/base/massifForm.vue b/src/views/system/base/massifForm.vue index 5d6cbcc..e9f9c20 100644 --- a/src/views/system/base/massifForm.vue +++ b/src/views/system/base/massifForm.vue @@ -3,75 +3,243 @@ import LeftDrawer from "@/components/LeftDrawer/index.vue"; import TitleDivider from "@/components/titleDivider/index.vue"; import {deepClone} from "@/utils/index.js"; +import useSettingsStore from "@/store/modules/settings.js"; +import {isArray} from "@/utils/validate.js"; +import {ElMessage} from "element-plus"; +import {areaConversion} from "@/utils/ruoyi.js"; +import * as turf from "@turf/turf"; + +const uploadJsonData = ref([]) const props = defineProps({}) +const settingsStore = useSettingsStore() +const theme = computed(() => settingsStore.theme) +const selectOptions = reactive({ + // 地块性质 + massifType: [ + {label: '旱地', value: 1}, + {label: '水浇地', value: 2}, + {label: '水田', value: 2}, + ], + // 作物种类 + cropClass: [ + {label: '甘蔗', value: 1}, + {label: '其他', value: 9}, + ] +}) const showDrawer = ref(false) const formData = ref({}) +const resetForm = (params) => { + formData.value = { + // 坐标集合 + coordinateList: [ + {}, + {}, + {}, + {}, + ], + // 坐标上传方式 + coordinateType: 1, + ...params + } +} const toAdd = (params = {}) => { - formData.value = deepClone(params) + resetForm(deepClone(params)) + uploadJsonData.value = [] showDrawer.value = true } +// 计算地块面积(亩) +const calculateArea = () => { + let value = []; + if (formData.value.coordinateType === 1) { + value = formData.value.coordinateList || []; + for (let item of value) { + if (!item.longitude || !item.latitude){ + ElMessage.error('请确认坐标是否完整') + return + } + } + } else { + value = uploadJsonData.value || []; + } + let list = value.map(item => [item.longitude, item.latitude]) + let turfData = [[...list, list[0]]] + // 算出平米 + let number = turf.area(turf.polygon(turfData)); + formData.value.area = parseFloat(areaConversion(number).toFixed(2)) +} +// 添加坐标点 +const addCoordinate = () => { + formData.value.coordinateList.push({}) +} +const uploadJson = (file) => { + var reader = new FileReader() //新建一个FileReader + reader.readAsText(file.raw, 'UTF-8') //读取文件 + reader.onload = async function (evt) { //读取文件完毕执行此函数 + try { + let jsonData = JSON.parse(evt.target.result) + if (!isArray(jsonData.FMapRegion)) { + throw new Error('json文件格式不正确') + } + uploadJsonData.value = jsonData.FMapRegion.map(item => { + return { + longitude: item.x, + latitude: item.y + } + }) + calculateArea(uploadJsonData.value) + } catch (e) { + console.error(e) + ElMessage.error('json文件格式不正确') + } + } +} defineExpose({ toAdd }) \ No newline at end of file diff --git a/src/views/system/base/massifMap.vue b/src/views/system/base/massifMap.vue index d7ea00b..dd1bd6c 100644 --- a/src/views/system/base/massifMap.vue +++ b/src/views/system/base/massifMap.vue @@ -223,7 +223,8 @@ watch(() => polygonList, (value) => { // 遍历网格中的每一个单元（多边形） squareGrid.features.forEach(gridCell => { // 使用turf.intersect检查网格单元是否与原始多边形相交 - const intersection = turf.intersect(polygon, gridCell); + // booleanContains判断原始多边形是否包含网格单元 + const intersection = turf.booleanContains(polygon, gridCell); // 如果有交集（即该网格单元至少部分位于多边形内），则保留 if (intersection) { @@ -442,7 +443,7 @@ const toAddMassif = () => { - +