diff --git a/src/main.js b/src/main.js index 1d68ca7..d21a741 100644 --- a/src/main.js +++ b/src/main.js @@ -5,7 +5,8 @@ import Cookies from 'js-cookie' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import locale from 'element-plus/es/locale/lang/zh-cn' - +// fade/zoom +import 'element-plus/theme-chalk/base.css' import '@/assets/styles/index.scss' // global css // iconpark样式 import {install} from '@icon-park/vue-next/es/all'; @@ -52,6 +53,8 @@ import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap'; // import VueAMapLoca from '@vuemap/vue-amap-loca'; // import VueAMapExtra from '@vuemap/vue-amap-extra'; import '@vuemap/vue-amap/dist/style.css' +// collapse +import { ElCollapseTransition } from 'element-plus' const app = createApp(App) initAMapApiLoader({ key: '62c3411d6528d67db00ad510a7ee5fb9', @@ -82,7 +85,7 @@ app.component('ImagePreview', ImagePreview) app.component('RightToolbar', RightToolbar) app.component('Editor', Editor) app.component('LeftDrawer', LeftDrawer) - +app.component(ElCollapseTransition.name, ElCollapseTransition) app.use(VueAMap) app.use(router) app.use(store) diff --git a/src/views/system/base/massifMap.vue b/src/views/system/base/massifMap.vue index 3d52481..db5cb44 100644 --- a/src/views/system/base/massifMap.vue +++ b/src/views/system/base/massifMap.vue @@ -6,30 +6,41 @@ import {areaConversion, calculateCenter, drawGridLines} from "@/utils/ruoyi.js"; import {ElMessage, ElMessageBox} from "element-plus"; import useSettingsStore from "@/store/modules/settings.js"; import * as turf from '@turf/turf' + const polygonRef = ref(null) const settingsStore = useSettingsStore() +const theme = computed(()=>settingsStore.theme) +// 显示地块列表 +const showMassifList = ref(true) // 当前地块 const currentMassif = ref(null) +const router = useRouter() +const route = useRoute(); +// 基地id +const baseId = Number(route.params.baseId) +const baseInfo = ref({ + baseId: baseId, + baseName: '测试基地1', + area: 1232.45 +}) const control = reactive({ - // 地图类型 - dataType: 1, - // 显示地块标签 - massifLabel: true, - // 显示网格地块 - massifGrid: false, - // 显示垄 - showRidge: false, - // 显示垄标签 - ridgeLabel: false, - // 显示植株 - showPlant: false, - // 显示植株标签 - plantLabel: false, + // 地图类型 + dataType: 1, + // 显示地块标签 + massifLabel: true, + // 显示网格地块 + massifGrid: false, + // 显示垄 + showRidge: false, + // 显示垄标签 + ridgeLabel: false, + // 显示植株 + showPlant: false, + // 显示植株标签 + plantLabel: false, }) // 鼠标工具ref const mouseToolRef = ref(null) -const router = useRouter() -const route = useRoute(); // 绘制面积(亩) const floorSpace = ref(0) const maxHeight = ref(window.innerHeight - 100); @@ -38,8 +49,7 @@ const zoom = ref(17); const protract = ref(false) // 显示鼠标绘制 const createdMouse = ref(false) -// 基地id -const baseId = Number(route.params.baseId) + // 文本标记 const componentText = ref([]) // 折线标记 @@ -49,7 +59,8 @@ const polygonList = reactive([ { id: 1, title: '测试地块1', - path:[ + cropType: '甘蔗', + path: [ [ 116.337325, 39.979046 @@ -71,12 +82,13 @@ const polygonList = reactive([ 39.97906 ] ], - fillColor:'#09a882' + fillColor: undefined }, { - id:2, - title:'测试地块2', - path:[ + id: 2, + title: '测试地块2', + cropType: '甘蔗', + path: [ [ 116.338296, 39.978921 @@ -93,7 +105,8 @@ const polygonList = reactive([ 116.33859, 39.978905 ] - ] + ], + fillColor:undefined } ]) const polygonTemp = ref(null) @@ -118,7 +131,7 @@ const computeArea = (value) => { // 修改多边形事件 const updateMassif = (value) => { // 获取多边形路径 - let newPath = polygonRef.value.$$getInstance().getPath().map(item =>item.toArray()) + let newPath = polygonRef.value.$$getInstance().getPath().map(item => item.toArray()) polygonTemp.value = newPath computeArea(newPath) } @@ -151,11 +164,11 @@ const resetMassif = () => { { confirmButtonText: '确认重置', cancelButtonText: '不，我再想想', - customClass:'message-box' + customClass: 'message-box' } ) .then(() => { - if (mouseToolRef.value){ + if (mouseToolRef.value) { mouseToolRef.value.$$close(true) mouseToolRef.value.$$open() } @@ -167,43 +180,65 @@ const resetMassif = () => { // 点击确定完成绘制 const submitMassif = () => { lazyAMapApiLoaderInstance.then(() => { - if (polygonTemp.value.length<3){ + if (polygonTemp.value.length < 3) { ElMessage.error('地块至少需要三个点') return } for (let item of polygonList) { - if (AMap.GeometryUtil.doesRingRingIntersect(polygonTemp.value,item.path) || AMap.GeometryUtil.isRingInRing(polygonTemp.value,item.path) || AMap.GeometryUtil.isRingInRing(item.path,polygonTemp.value)){ + if (AMap.GeometryUtil.doesRingRingIntersect(polygonTemp.value, item.path) || AMap.GeometryUtil.isRingInRing(polygonTemp.value, item.path) || AMap.GeometryUtil.isRingInRing(item.path, polygonTemp.value)) { ElMessage.error('当前地块与已有地块边界重合,请修改后再确认') return } } - polygonList.push({path:polygonTemp.value,edit:false}) + polygonList.push({path: polygonTemp.value, edit: false}) polygonTemp.value = undefined createdMouse.value = false protract.value = false }) } -watch(()=>polygonList,(value)=>{ +watch(() => polygonList, (value) => { componentText.value = [] - value.forEach(item=>{ - let points = turf.points(item.path); - // 格式化标签位置 - componentText.value.push({text:item.title,position:turf.center(points).geometry.coordinates}) - // 格式化网格线显示 - // gridLines.value.push(drawGridLines(item.path)) - var bbox = turf.bbox(turf.lineString(item.path)); - // 网格密度 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 =>{ - newList.push(...item) - }) - gridLines.value.push(newList) + let sumArea = 0 + value.forEach(item => { + let points = turf.points(item.path); + // 格式化标签位置 + componentText.value.push({text: item.title, position: turf.center(points).geometry.coordinates}) + // 格式化网格线显示 + // gridLines.value.push(drawGridLines(item.path)) + var bbox = turf.bbox(turf.lineString(item.path)); + // 网格密度 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 => { + newList.push(...item) + }) + gridLines.value.push(newList) + // 计算基地全部地块面积 + lazyAMapApiLoaderInstance.then(() => { + // 算出平米 + let number = Math.round(AMap.GeometryUtil.ringArea(item.path)); + let number1 = areaConversion(number); + item.area = parseFloat(number1.toFixed(2)) + // 算出亩 + sumArea += number1 + baseInfo.value.area = parseFloat(sumArea.toFixed(2)) }) -},{deep:true,immediate:true}) + }) +}, {deep: true, immediate: true}) +// 点击当前地块 +const clickCurrentMassif = (item) => { + currentMassif.value = item + let points = turf.points(item.path); + polygonList.forEach(polygon =>{ + polygon.fillColor = '#00B2D5' + }) + item.fillColor = theme.value + // 点击的中心点 + center.value = turf.center(points).geometry.coordinates +}