feat:对接农场确权页面增删改查接口

src/api/config.js

@@ -1,5 +1,5 @@
 // let server = "http://127.0.0.1:81/"
-let server = "https://birdseye-api.sysuimars.cn/"
+let server = "https://birdseye-api.feiniaotech.sysuimars.cn/"
 let serverMock = "https://mock.apipark.cn/m1/4662471-4313509-default/"
 // let djiCloudBase = "http://127.0.0.1/";
 let djiCloudBase = "https://djiapi.sysuimars.com/";
@@ -32,8 +32,3 @@ module.exports = {
         "find",
     ]
 }
-
-
-
-
-

src/api/data.json

@@ -1,932 +0,0 @@
-{
-  "cropTypes": [
-    {
-      "classId": 1,
-      "id": 1,
-      "name": "小麦"
-    },
-    {
-      "classId": 1,
-      "id": 2,
-      "name": "大麦"
-    },
-    {
-      "classId": 1,
-      "id": 3,
-      "name": "黑麦"
-    },
-    {
-      "classId": 1,
-      "id": 4,
-      "name": "燕麦"
-    },
-    {
-      "classId": 1,
-      "id": 5,
-      "name": "玉米"
-    },
-    {
-      "classId": 1,
-      "id": 6,
-      "name": "水稻"
-    },
-    {
-      "classId": 1,
-      "id": 7,
-      "name": "谷子"
-    },
-    {
-      "classId": 1,
-      "id": 8,
-      "name": "糜子"
-    },
-    {
-      "classId": 1,
-      "id": 9,
-      "name": "黍子"
-    },
-    {
-      "classId": 1,
-      "id": 10,
-      "name": "高粱"
-    },
-    {
-      "classId": 1,
-      "id": 11,
-      "name": "荞麦"
-    },
-    {
-      "classId": 2,
-      "id": 12,
-      "name": "大豆"
-    },
-    {
-      "classId": 2,
-      "id": 13,
-      "name": "蚕豆"
-    },
-    {
-      "classId": 2,
-      "id": 14,
-      "name": "豌豆"
-    },
-    {
-      "classId": 2,
-      "id": 15,
-      "name": "绿豆"
-    },
-    {
-      "classId": 2,
-      "id": 16,
-      "name": "红豆"
-    },
-    {
-      "classId": 2,
-      "id": 17,
-      "name": "黑豆"
-    },
-    {
-      "classId": 2,
-      "id": 18,
-      "name": "黄豆"
-    },
-    {
-      "classId": 2,
-      "id": 19,
-      "name": "刀豆"
-    },
-    {
-      "classId": 2,
-      "id": 20,
-      "name": "扁豆"
-    },
-    {
-      "classId": 2,
-      "id": 21,
-      "name": "芸豆"
-    },
-    {
-      "classId": 2,
-      "id": 22,
-      "name": "木豆"
-    },
-    {
-      "classId": 2,
-      "id": 23,
-      "name": "豇豆"
-    },
-    {
-      "classId": 2,
-      "id": 24,
-      "name": "鹰嘴豆"
-    },
-    {
-      "classId": 3,
-      "id": 25,
-      "name": "芝麻"
-    },
-    {
-      "classId": 3,
-      "id": 26,
-      "name": "花生"
-    },
-    {
-      "classId": 3,
-      "id": 27,
-      "name": "油菜"
-    },
-    {
-      "classId": 3,
-      "id": 28,
-      "name": "向日葵"
-    },
-    {
-      "classId": 3,
-      "id": 29,
-      "name": "蓖麻"
-    },
-    {
-      "classId": 4,
-      "id": 30,
-      "name": "棉花"
-    },
-    {
-      "classId": 4,
-      "id": 31,
-      "name": "红麻"
-    },
-    {
-      "classId": 4,
-      "id": 32,
-      "name": "苎麻"
-    },
-    {
-      "classId": 4,
-      "id": 33,
-      "name": "亚麻"
-    },
-    {
-      "classId": 4,
-      "id": 34,
-      "name": "芒麻"
-    },
-    {
-      "classId": 4,
-      "id": 35,
-      "name": "黄麻"
-    },
-    {
-      "classId": 5,
-      "id": 36,
-      "name": "甜菜"
-    },
-    {
-      "classId": 5,
-      "id": 37,
-      "name": "甘蔗"
-    },
-    {
-      "classId": 6,
-      "id": 38,
-      "name": "西瓜"
-    },
-    {
-      "classId": 6,
-      "id": 39,
-      "name": "甜瓜"
-    },
-    {
-      "classId": 7,
-      "id": 40,
-      "name": "葡萄"
-    },
-    {
-      "classId": 7,
-      "id": 41,
-      "name": "草莓"
-    },
-    {
-      "classId": 7,
-      "id": 42,
-      "name": "猕猴桃"
-    },
-    {
-      "classId": 7,
-      "id": 43,
-      "name": "苹果"
-    },
-    {
-      "classId": 7,
-      "id": 44,
-      "name": "梨"
-    },
-    {
-      "classId": 7,
-      "id": 45,
-      "name": "桃"
-    },
-    {
-      "classId": 7,
-      "id": 46,
-      "name": "李"
-    },
-    {
-      "classId": 7,
-      "id": 47,
-      "name": "杏"
-    },
-    {
-      "classId": 7,
-      "id": 48,
-      "name": "蓝莓"
-    },
-    {
-      "classId": 7,
-      "id": 49,
-      "name": "柑橘"
-    },
-    {
-      "classId": 7,
-      "id": 50,
-      "name": "柠檬"
-    },
-    {
-      "classId": 7,
-      "id": 51,
-      "name": "金橘"
-    },
-    {
-      "classId": 7,
-      "id": 52,
-      "name": "香蕉"
-    },
-    {
-      "classId": 7,
-      "id": 53,
-      "name": "芒果"
-    },
-    {
-      "classId": 7,
-      "id": 54,
-      "name": "荔枝"
-    },
-    {
-      "classId": 7,
-      "id": 55,
-      "name": "龙眼"
-    },
-    {
-      "classId": 7,
-      "id": 56,
-      "name": "榴莲"
-    },
-    {
-      "classId": 7,
-      "id": 57,
-      "name": "柿"
-    },
-    {
-      "classId": 7,
-      "id": 58,
-      "name": "椰子"
-    },
-    {
-      "classId": 7,
-      "id": 59,
-      "name": "槟榔"
-    },
-    {
-      "classId": 7,
-      "id": 60,
-      "name": "菠萝"
-    },
-    {
-      "classId": 7,
-      "id": 61,
-      "name": "杨梅"
-    },
-    {
-      "classId": 7,
-      "id": 62,
-      "name": "菠萝蜜"
-    },
-    {
-      "classId": 7,
-      "id": 63,
-      "name": "山楂"
-    },
-    {
-      "classId": 7,
-      "id": 64,
-      "name": "木瓜"
-    },
-    {
-      "classId": 7,
-      "id": 65,
-      "name": "樱桃"
-    },
-    {
-      "classId": 7,
-      "id": 66,
-      "name": "黑莓"
-    },
-    {
-      "classId": 7,
-      "id": 67,
-      "name": "无花果"
-    },
-    {
-      "classId": 7,
-      "id": 68,
-      "name": "胡桃"
-    },
-    {
-      "classId": 7,
-      "id": 69,
-      "name": "栗"
-    },
-    {
-      "classId": 7,
-      "id": 70,
-      "name": "银杏（白果）"
-    },
-    {
-      "classId": 7,
-      "id": 71,
-      "name": "榛子"
-    },
-    {
-      "classId": 7,
-      "id": 72,
-      "name": "枣"
-    },
-    {
-      "classId": 7,
-      "id": 73,
-      "name": "石榴"
-    },
-    {
-      "classId": 7,
-      "id": 74,
-      "name": "柚"
-    },
-    {
-      "classId": 7,
-      "id": 75,
-      "name": "橙"
-    },
-    {
-      "classId": 7,
-      "id": 76,
-      "name": "枇杷"
-    },
-    {
-      "classId": 7,
-      "id": 77,
-      "name": "橄榄"
-    },
-    {
-      "classId": 7,
-      "id": 78,
-      "name": "松子"
-    },
-    {
-      "classId": 8,
-      "id": 79,
-      "name": "茶"
-    },
-    {
-      "classId": 8,
-      "id": 80,
-      "name": "咖啡"
-    },
-    {
-      "classId": 8,
-      "id": 81,
-      "name": "可可"
-    },
-    {
-      "classId": 9,
-      "id": 82,
-      "name": "红薯"
-    },
-    {
-      "classId": 9,
-      "id": 83,
-      "name": "马铃薯"
-    },
-    {
-      "classId": 9,
-      "id": 84,
-      "name": "山药"
-    },
-    {
-      "classId": 9,
-      "id": 85,
-      "name": "木薯"
-    },
-    {
-      "classId": 9,
-      "id": 86,
-      "name": "芋头"
-    },
-    {
-      "classId": 10,
-      "id": 87,
-      "name": "萝卜"
-    },
-    {
-      "classId": 10,
-      "id": 88,
-      "name": "胡萝卜"
-    },
-    {
-      "classId": 10,
-      "id": 89,
-      "name": "芦笋"
-    },
-    {
-      "classId": 10,
-      "id": 90,
-      "name": "榨菜"
-    },
-    {
-      "classId": 10,
-      "id": 91,
-      "name": "番茄"
-    },
-    {
-      "classId": 10,
-      "id": 92,
-      "name": "茄子"
-    },
-    {
-      "classId": 10,
-      "id": 93,
-      "name": "辣椒"
-    },
-    {
-      "classId": 10,
-      "id": 94,
-      "name": "甜椒"
-    },
-    {
-      "classId": 10,
-      "id": 95,
-      "name": "黄瓜"
-    },
-    {
-      "classId": 10,
-      "id": 96,
-      "name": "南瓜"
-    },
-    {
-      "classId": 10,
-      "id": 97,
-      "name": "西葫芦"
-    },
-    {
-      "classId": 10,
-      "id": 98,
-      "name": "冬瓜"
-    },
-    {
-      "classId": 10,
-      "id": 99,
-      "name": "丝瓜"
-    },
-    {
-      "classId": 10,
-      "id": 100,
-      "name": "白菜"
-    },
-    {
-      "classId": 10,
-      "id": 101,
-      "name": "甘蓝"
-    },
-    {
-      "classId": 10,
-      "id": 102,
-      "name": "菠菜"
-    },
-    {
-      "classId": 10,
-      "id": 103,
-      "name": "韭菜"
-    },
-    {
-      "classId": 10,
-      "id": 104,
-      "name": "生菜"
-    },
-    {
-      "classId": 10,
-      "id": 105,
-      "name": "莴苣"
-    },
-    {
-      "classId": 10,
-      "id": 106,
-      "name": "茼蒿"
-    },
-    {
-      "classId": 10,
-      "id": 107,
-      "name": "洋葱"
-    },
-    {
-      "classId": 10,
-      "id": 108,
-      "name": "芹菜"
-    },
-    {
-      "classId": 10,
-      "id": 109,
-      "name": "竹笋"
-    },
-    {
-      "classId": 10,
-      "id": 110,
-      "name": "花椰菜"
-    },
-    {
-      "classId": 10,
-      "id": 111,
-      "name": "茭白"
-    },
-    {
-      "classId": 10,
-      "id": 112,
-      "name": "葱"
-    },
-    {
-      "classId": 10,
-      "id": 113,
-      "name": "蒜"
-    },
-    {
-      "classId": 10,
-      "id": 114,
-      "name": "姜"
-    },
-    {
-      "classId": 10,
-      "id": 115,
-      "name": "花椒"
-    },
-    {
-      "classId": 10,
-      "id": 116,
-      "name": "莲藕"
-    },
-    {
-      "classId": 10,
-      "id": 117,
-      "name": "苋菜"
-    },
-    {
-      "classId": 10,
-      "id": 118,
-      "name": "宽菜"
-    },
-    {
-      "classId": 10,
-      "id": 119,
-      "name": "芥菜"
-    },
-    {
-      "classId": 10,
-      "id": 120,
-      "name": "苦瓜"
-    },
-    {
-      "classId": 10,
-      "id": 121,
-      "name": "香椿"
-    }
-  ],
-  "cropPeriods": [
-    {
-      "id": 1,
-      "name": "出苗"
-    },
-    {
-      "id": 2,
-      "name": "分蘖"
-    },
-    {
-      "id": 3,
-      "name": "拔节"
-    },
-    {
-      "id": 4,
-      "name": "抽穗"
-    },
-    {
-      "id": 5,
-      "name": "开花"
-    },
-    {
-      "id": 6,
-      "name": "灌浆"
-    },
-    {
-      "id": 7,
-      "name": "成熟"
-    },
-    {
-      "id": 8,
-      "name": "孕穗"
-    },
-    {
-      "id": 9,
-      "name": "乳熟"
-    },
-    {
-      "id": 10,
-      "name": "蜡熟"
-    },
-    {
-      "id": 11,
-      "name": "完熟"
-    },
-    {
-      "id": 12,
-      "name": "播种"
-    },
-    {
-      "id": 13,
-      "name": "生长"
-    },
-    {
-      "id": 14,
-      "name": "分枝"
-    },
-    {
-      "id": 15,
-      "name": "结荚"
-    },
-    {
-      "id": 16,
-      "name": "鼓粒"
-    },
-    {
-      "id": 17,
-      "name": "荚果"
-    },
-    {
-      "id": 18,
-      "name": "蕾薹"
-    },
-    {
-      "id": 19,
-      "name": "结果"
-    },
-    {
-      "id": 20,
-      "name": "现蕾"
-    },
-    {
-      "id": 21,
-      "name": "花铃"
-    },
-    {
-      "id": 22,
-      "name": "吐絮"
-    },
-    {
-      "id": 23,
-      "name": "发芽"
-    },
-    {
-      "id": 24,
-      "name": "伸长"
-    },
-    {
-      "id": 25,
-      "name": "伸蔓"
-    },
-    {
-      "id": 26,
-      "name": "树潦藤动"
-    },
-    {
-      "id": 27,
-      "name": "萌芽"
-    },
-    {
-      "id": 28,
-      "name": "新梢生长"
-    },
-    {
-      "id": 29,
-      "name": "浆果生长"
-    },
-    {
-      "id": 30,
-      "name": "浆果成熟"
-    },
-    {
-      "id": 31,
-      "name": "落叶"
-    },
-    {
-      "id": 32,
-      "name": "休眠"
-    },
-    {
-      "id": 33,
-      "name": "根系生长"
-    },
-    {
-      "id": 34,
-      "name": "营养生长"
-    },
-    {
-      "id": 35,
-      "name": "花芽分化"
-    },
-    {
-      "id": 36,
-      "name": "叶片发育"
-    },
-    {
-      "id": 37,
-      "name": "新梢发育"
-    },
-    {
-      "id": 38,
-      "name": "花序伸展"
-    },
-    {
-      "id": 39,
-      "name": "果实发育"
-    },
-    {
-      "id": 40,
-      "name": "果实成熟"
-    },
-    {
-      "id": 41,
-      "name": "抽梢"
-    },
-    {
-      "id": 42,
-      "name": "自剪"
-    },
-    {
-      "id": 43,
-      "name": "新根生长"
-    },
-    {
-      "id": 44,
-      "name": "落果"
-    },
-    {
-      "id": 45,
-      "name": "展叶"
-    },
-    {
-      "id": 46,
-      "name": "落蕾"
-    },
-    {
-      "id": 47,
-      "name": "果实着色"
-    },
-    {
-      "id": 48,
-      "name": "小苗期"
-    },
-    {
-      "id": 49,
-      "name": "中苗期"
-    },
-    {
-      "id": 50,
-      "name": "大苗期"
-    },
-    {
-      "id": 51,
-      "name": "催花现红"
-    },
-    {
-      "id": 52,
-      "name": "小果膨大"
-    },
-    {
-      "id": 53,
-      "name": "根系活动"
-    },
-    {
-      "id": 54,
-      "name": "萌芽展叶"
-    },
-    {
-      "id": 55,
-      "name": "老叶集中脱落"
-    },
-    {
-      "id": 56,
-      "name": "露蕾"
-    },
-    {
-      "id": 57,
-      "name": "铃铛"
-    },
-    {
-      "id": 58,
-      "name": "花芽形成"
-    },
-    {
-      "id": 59,
-      "name": "幼苗"
-    },
-    {
-      "id": 60,
-      "name": "块茎形成"
-    },
-    {
-      "id": 61,
-      "name": "块茎膨大"
-    },
-    {
-      "id": 62,
-      "name": "淀粉积累"
-    },
-    {
-      "id": 63,
-      "name": "块茎休眠"
-    },
-    {
-      "id": 64,
-      "name": "肉质根生长"
-    },
-    {
-      "id": 65,
-      "name": "茎生长"
-    },
-    {
-      "id": 66,
-      "name": "抽薹"
-    },
-    {
-      "id": 67,
-      "name": "莲座"
-    },
-    {
-      "id": 68,
-      "name": "麟茎膨大"
-    },
-    {
-      "id": 69,
-      "name": "出笋尖"
-    },
-    {
-      "id": 70,
-      "name": "孕茭"
-    },
-    {
-      "id": 71,
-      "name": "葱白"
-    },
-    {
-      "id": 72,
-      "name": "返青"
-    },
-    {
-      "id": 73,
-      "name": "结籽"
-    },
-    {
-      "id": 74,
-      "name": "麟芽花芽分化"
-    },
-    {
-      "id": 75,
-      "name": "鳞茎膨大"
-    },
-    {
-      "id": 76,
-      "name": "茎叶、根状茎生长"
-    },
-    {
-      "id": 77,
-      "name": "种子硬壳"
-    },
-    {
-      "id": 78,
-      "name": "根茎萌动"
-    },
-    {
-      "id": 79,
-      "name": "展叶现蕾"
-    },
-    {
-      "id": 80,
-      "name": "结耦"
-    }
-  ]
-}
-

src/api/modules/authentic.js

@@ -0,0 +1,20 @@
+const config = require("../config");
+
+module.exports = {
+  getList: {
+    url: config.base_url + "plugin_ownership/list",
+    type: "get",
+  },
+  getDetails: {
+    url: config.base_url + "plugin_ownership/get",
+    type: "get",
+  },
+  saveData: {
+    url: config.base_url + "plugin_ownership/save",
+    type: "post",
+  },
+  deleteData: {
+    url: config.base_url + "plugin_ownership/delete",
+    type: "get",
+  },
+};

src/api/modules/tree_img.js

@@ -1,26 +0,0 @@
-const config = require("../config")
-
-
-
-module.exports = {
-    images:{
-        url: config.base_url + "lz_tree_image/images/{organId}/{areaId}",
-        type: "get",
-    },
-    imagesByTreeId:{
-        url: config.base_url + "lz_tree_image/imagesByTreeId/{treeId}/{limit}",
-        type: "get",
-    },
-    growDataAndImg:{
-        url: config.base_url + "tree_grow_data/growDataAndImg/{organId}/{areaId}",
-        type: "get",
-    },
-    growDataByTreeId:{
-        url: config.base_url + "tree_grow_data/growDataByTreeId/{treeId}/{limit}",
-        type: "get",
-    },
-    lastImage:{
-        url: config.base_url + "lz_tree_image/lastImage/{limit}",
-        type: "get",
-    }
-}

src/store/getters.js

@@ -7,7 +7,6 @@
  * @FilePath: \vue3-element-admin\src\store\getters.js
  */
 import {CURRENT_AREA_ID, CURRENT_MAP, GARDEN_DATA} from "./modules/app/type";
-import data from '../api/data.json'
 
 
 

src/utils/map.js

@@ -0,0 +1,192 @@
+import VectorSource from 'ol/source/Vector.js';
+import WKT from 'ol/format/WKT.js';
+import Feature from 'ol/Feature.js';
+import store from '@/store'
+import VectorLayer from 'ol/layer/Vector.js';
+import Draw from "ol/interaction/Draw";
+import Text from "ol/style/Text";
+import Icon from "ol/style/Icon";
+import {Circle, Fill, Stroke, Style} from 'ol/style.js';
+
+/*
+ * @Author: your name
+ * @Date: 2021-01-12 09:38:09
+ * @LastEditTime: 2022-01-20 10:37:39
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \vue3-element-admin\src\utils\map.js
+ */
+/**
+ * 过滤不应该出现在属性列表的字段
+ * @param data
+ * @param key
+ * @returns {boolean}
+ */
+function filterWktProp(data,key){
+    if(key == "regionWkt" || key == "wkt" || key == "pointWkt" || key == "geom" || !data[key]){
+        return false
+    }
+    return true
+}
+
+export const newAreaFeature = (data)=>{
+    let geom = new WKT().readGeometry(data["wkt"])
+    let feature = new Feature({
+        geometry: geom
+    });
+    feature.set("nodeType","area");
+    feature.setId(data.id)
+    for(let key in data){
+        if(filterWktProp(data,key)){
+            feature.set(key,data[key])
+        }
+    }
+    return feature;
+}
+
+export const newAreaPoint = (data)=>{
+    let point = new WKT().readGeometry(data["pointWkt"])
+    let feature = new Feature({
+        geometry: point
+    });
+    feature.set("nodeType","area");
+    feature.set("isPoint",1)
+    for(let key in data){
+        if(filterWktProp(data,key)){
+            feature.set(key,data[key])
+        }
+    }
+    return feature;
+}
+
+export const newPolymerFeature = (data)=>{
+    let geom = new WKT().readGeometry(data["geom"])
+    let feature = new Feature({
+        geometry: geom
+    });
+    feature.set("nodeType","polymer");
+    feature.setId(data.id)
+    for(let key in data){
+        if(filterWktProp(data,key)){
+            feature.set(key,data[key])
+        }
+    }
+    return feature;
+}
+
+export const newRegionFeature = (data)=>{
+    let geom = new WKT().readGeometry(data["regionWkt"])
+    let feature = new Feature({
+        geometry: geom
+    });
+    feature.set("nodeType","region");
+    feature.setId(data.id)
+    for(let key in data){
+        if(filterWktProp(data,key)){
+            feature.set(key,data[key])
+        }
+    }
+    return feature;
+}
+
+
+export const newPoint = (data,dataName)=>{
+    let point = new WKT().readGeometry(data[dataName])
+    let feature = new Feature({
+        geometry: point
+    });
+    feature.setId(data.id)
+    feature.set("nodeType","tree")
+    for(let key in data){
+        if(filterWktProp(data,key)){
+            feature.set(key,data[key])
+        }
+    }
+    return feature;
+}
+
+/**
+ * 按treeId分组
+ * @param data
+ * @returns {[]}
+ */
+export const groupByTreeId = (data) => {
+    let res = []
+    let cur = {treeId:-1,data:[]}
+    for(let item of data){
+        if(cur.treeId != item.treeId){
+            cur = {treeId: item.treeId, data:[]}
+            res.push(cur)
+        }
+        cur.data.push(item)
+    }
+    for(let item of res){
+        item.data.sort((a,b) => {
+            return Date.parse(b.uploadDate) - Date.parse(a.uploadDate)
+        })
+    }
+    return res
+}
+
+/**
+ * 按createDate分组
+ * @param data
+ * @returns {[]}
+ */
+export const groupByCreateDate = (data) => {
+    let res = {}
+    let arr = []
+    for(let item of data){
+        if(res[item.uploadDate]){
+            res[item.uploadDate].push(item)
+        }else{
+            res[item.uploadDate] = [item]
+            arr.push({uploadDate:item.uploadDate, data: res[item.uploadDate]})
+        }
+    }
+    arr.sort((a,b) => {
+        return Date.parse(b.uploadDate) - Date.parse(a.uploadDate)
+    })
+    return arr
+}
+
+
+export const setPeriodAttr = (periodMap, data) => {
+    for(let item of data){
+        item["attrs"] = []
+        let periodObj = periodMap[item.periodId]
+        item["periodName"] = periodObj.name
+        for(let i=0;i<periodObj.attrFields.length;i++){
+            item["attrs"].push({name:periodObj.attrNames[i],field:periodObj.attrFields[i]})
+        }
+    }
+}
+
+
+export const bboxToFeature = ( x1,  y1,  x2,  y2) => {
+    let wkt = "POLYGON (("+x1+" "+y1+", "+x1+" "+y2+", "+x2+" "+y2+", "+x2+" "+y1+", "+x1+" "+y1+"))";
+    let feature = new Feature({
+        geometry: new WKT().readGeometry(wkt)
+    });
+    return feature
+}
+/**
+ * 红框样式
+ * @returns {Style}
+ */
+export const redBoxStyle = ()=>{
+    const fill = new Fill({
+        color: 'rgba(255,255,255,0.1)',
+    });
+    const stroke = new Stroke({
+        color: '#f5024f',
+        width: 0.5,
+    });
+    let  style = new Style({
+        fill: fill,
+        stroke: stroke,
+    })
+    return style
+}
+
+

src/utils/ol-map/Map.js

@@ -2,7 +2,7 @@ import OLMap from 'ol/Map'
 import View from 'ol/View'
 import * as proj from 'ol/proj'
 import * as interaction from 'ol/interaction'
-import {Draw} from 'ol/interaction'
+import {Draw,Modify} from 'ol/interaction'
 import 'ol/ol.css'
 import './css/KMap.css'
 import * as Enum from './Enum'
@@ -14,6 +14,12 @@ import Overlay  from 'ol/Overlay'
 import WMTSLayer from './WMTSLayer'
 import XYZLayer from './XYZLayer'
 import config from "@/api/config.js";
+import {Feature} from "ol";
+import {GeoJSON, WKT} from 'ol/format'
+import { Style, Text } from 'ol/style';
+import { Circle, Fill, Stroke } from 'ol/style.js';
+import { LineString, Point } from 'ol/geom';
+import {getArea} from "ol/sphere"
 /**
  * @description KMap.Map 地图类
 */
@@ -150,10 +156,12 @@ class Map {
 	}
 
 	initDraw(callback){
+		const vm = this
 		this.draw = new Draw({
 			type: 'MultiPolygon',
 			source: this.polygonLayer.source,
-			free: true
+			free: true,
+			style: vm.drawStyleFunc
 		})
 		this.draw.setActive(false)
 		this.map.addInteraction(this.draw);
@@ -162,6 +170,151 @@ class Map {
 	startDraw(){
 		this.draw.setActive(true)
 	}
+	endDraw(){
+		this.draw.setActive(false)
+	}
+
+	modifyDraw(callback) {
+		this.modify = new Modify({
+			source: this.polygonLayer.source,
+			pixelTolerance: 10, //设置吸附像素值
+		})
+        this.map.addInteraction(this.modify);
+		this.modify.on("modifyend",callback)
+	}
+
+	drawStyleFunc(feature) {
+		const styles = [];
+		const type = feature.getGeometry().getType();
+		const coord = feature.getGeometry().getCoordinates();
+		for (let i = 0; i < coord.length - 1; i++) {
+			if (i%2) {
+				styles.push(
+					new Style({
+						geometry: new Point(coord[i]),
+						image: new Circle({
+							radius: 6,
+							fill: new Fill({
+								color: '#06F7A1'
+							}),
+							stroke: new Stroke({
+								color: '#fff',
+								width: 1
+							})
+						})
+					})
+				);
+			} else {
+				styles.push(
+					new Style({
+						geometry: new Point(coord[i]),
+						image: new Circle({
+							radius: 6,
+							fill: new Fill({
+								color: '#fff'
+							}),
+						})
+					})
+				);
+			}
+		}
+		if (type === 'LineString') {
+			for (let i = 0; i < coord.length - 1; i++) {
+				styles.push(
+					new Style({
+						geometry: new LineString([coord[i], coord[i + 1]]),
+						stroke: new Stroke({
+							color: '#06F7A1',
+							width: 2
+						})
+					})
+				);
+			}
+		}
+		return styles;
+	}
+
+	polygonStyle(feature) {
+		const styles = [];
+		const coord = feature.getGeometry().getCoordinates()[0];
+		for (let i = 0; i < coord[0].length - 1; i++) {
+			if (i%2) {
+				styles.push(
+				  new Style({
+					geometry: new Point(coord[0][i]),
+					image: new Circle({
+					  radius: 4,
+					  fill: new Fill({
+						color: '#54cb82'
+					  }),
+					  stroke: new Stroke({
+						color: '#54cb82',
+						width: 3
+					  })
+					})
+				  })
+				);
+			} else {
+				styles.push(
+				  new Style({
+					geometry: new Point(coord[0][i]),
+					image: new Circle({
+					  radius: 6,
+					  fill: new Fill({
+						color: '#fff'
+					  })
+					})
+				  })
+				);
+			}
+		}
+		let fillStyle = new Style({
+			fill: new Fill({
+			  color: [1, 41, 52, 0.6]
+			}),
+			stroke: new Stroke({
+			  color: '#54cb82',
+			  width: 2
+			})
+		})
+		let geom = feature.getGeometry().clone()
+		geom.transform(proj.get("EPSG:4326"), proj.get("EPSG:38572"))
+        let area = getArea(geom)
+        area = (area + area / 2) / 1000;
+		let areaValStyle = new Style({
+			text: new Text({
+				font: "16px sans-serif",
+				text: area.toFixed(2) + "亩",
+				// offsetX: 28,
+				// offsetY: -100,
+				fill: new Fill({ color: "#fff" }), // 字体颜色
+			}),
+		})
+		styles.push(fillStyle, areaValStyle);
+		return styles;
+	}
+
+	getLayerFeatures() {
+		const vm = this
+		let features = vm.polygonLayer.source.getFeatures()
+		return features
+	}
+
+	// 传入geojson，回显到polygon
+	setLayerPolygon(geometry) {
+		const vm = this
+		vm.polygonLayer.source.addFeatures(new GeoJSON().readFeatures(geometry))
+	}
+
+	setLayerWkt(wkt,isView) {
+		const vm = this
+		let f = new Feature({geometry:new WKT().readGeometry(wkt)})
+		const extent = f.getGeometry().getExtent()
+		vm.polygonLayer.source.addFeature(f)
+		if(isView){
+			vm.map.getView().fit(extent, { padding: [20, 20, 20, 20] });
+		}
+	}
 
 	addLayer(layer){
 		const vm = this

src/views/authentic/authenticMap.js

@@ -1,12 +1,29 @@
 import config from "@/api/config.js";
 import * as KMap from "@/utils/ol-map/KMap";
 import * as util from "@/common/ol_common.js";
-import Point from "ol/geom/Point.js";
+import Style from "ol/style/Style";
+import Icon from "ol/style/Icon";
 import Feature from "ol/Feature";
 import VectorLayer from "ol/layer/Vector.js";
 import WKT from "ol/format/WKT.js";
-import ScaleLine from "ol/control/ScaleLine";
-import { useRouter } from "vue-router";
+import { reactive } from "vue";
+import { newPoint } from "@/utils/map.js";
+import { remove } from "@/utils/ol-map/Polygon.js";
+import { getArea } from "ol/sphere.js";
+import * as proj from "ol/proj";
+import proj4 from "proj4";
+import { register } from "ol/proj/proj4";
+proj4.defs(
+  "EPSG:38572",
+  "+proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +wktext +no_defs +type=crs"
+);
+register(proj4);
+export let mapData = reactive({
+  isEdit: false,
+  isEditArea: false,
+  curPointData: {},
+  point: null,
+});
 
 /**
  * @description 地图层对象
@@ -16,12 +33,142 @@ class AuthenticMap {
     let that = this;
     let vectorStyle = new KMap.VectorStyle();
     this.vectorStyle = vectorStyle;
+    // 位置图标
+    this.clickPointLayer = new KMap.VectorLayer("clickPointLayer", 9999, {
+      style: (f) => {
+        return new Style({
+          image: new Icon({
+            src: require(`@/assets/images/common/${f.get("icon")}-icon.png`),
+            scale: 0.45,
+          }),
+        });
+      },
+    });
   }
 
   initMap(location, target) {
     let level = 16;
     let coordinate = util.wktCastGeom(location).getFirstCoordinate();
-    this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 6, 22);
+    this.kmap = new KMap.Map(
+      target,
+      level,
+      coordinate[0],
+      coordinate[1],
+      null,
+      6,
+      22
+    );
+    this.kmap.initDraw((e) => {
+      mapData.isEdit = true;
+      console.log('e',e);
+      mapData.point = e.feature
+    });
+    this.kmap.startDraw();
+    this.kmap.addLayer(this.clickPointLayer.layer);
+    this.addMapSingerClick();
+  }
+
+  //   添加点位
+  addPoint(points) {
+    const arrPoints = [];
+    if (points && points.length > 0) {
+      points.forEach((item) => {
+        arrPoints.push(newPoint({ ...item, icon: "point" }, "point"));
+      });
+      this.clickPointLayer.source.addFeatures(arrPoints);
+    }
+  }
+
+  endEdit() {
+    this.kmap.endDraw();
+    this.kmap.modifyDraw();
+    mapData.isEdit = false;
+  }
+  a() {
+    // this.kmap.endDraw();
+    this.kmap.startDraw();
+  }
+
+  // 地图点击事件
+  addMapSingerClick() {
+    let that = this;
+    that.kmap.on("singleclick", (evt) => {
+      that.kmap.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
+        // 点击的图层是否是VectorLayer
+        if (
+          layer instanceof VectorLayer &&
+          layer.get("name") === "clickPointLayer"
+        ) {
+          const icon = feature.get("icon") === "point" ? "point-act" : "point";
+          feature.set("icon", icon);
+          mapData.curPointData = {};
+          mapData.point = feature;
+          mapData.curPointData = feature.values_;
+          console.log('this.kmap.getLayerFeatures()',that.kmap.getLayerFeatures());
+          that.kmap.endDraw();
+          that.kmap.modifyDraw((e) => {
+            mapData.isEdit = false;
+            mapData.isEditArea = false;
+            mapData.isEditArea = true;
+            
+          });
+        } else if (
+          layer instanceof VectorLayer &&
+          layer.get("name") === "defaultPolygonLayer"
+        ) {
+          that.kmap.endDraw();
+          that.kmap.startDraw();
+        } else {
+          that.kmap.startDraw();
+        }
+      });
+    });
+  }
+
+  setPoint(name) {
+    mapData.point.set("icon", name);
+  }
+
+  //添加地块
+  setAreaGeometry(geometryArr) {
+    let that = this;
+    geometryArr.map((item) => {
+      that.kmap.setLayerWkt(item.featureWkt);
+    });
+  }
+
+  b(){
+    // console.log('this.kmap',this.kmap.polygonLayer)
+    // console.log('point',mapData.point);
+    // let that = this
+    // this.clickPointLayer.source.forEachFeature((f) => {
+    //     console.log('f',f);
+    //     if (f.get("id") === mapData.point.get("id")) {
+    //         that.kmap.polygonLayer.source.removeFeature(f);
+    //         // that.kmap.remove(f)
+    //     //   this.kmap.getView().setCenter(extractCoordinates(new WKT().writeFeature(f)));
+    //     //   this.kmap.getView().setZoom(16);
+    //     }
+    //   })
+    // this.kmap.removeLayer(this.kmap.polygonLayer.layer)
+    // this.kmap.addLayer(this.kmap.polygonLayer.layer)
+  }
+
+  //获取地块信息
+  getAreaGeometry() {
+    const features = this.kmap.getLayerFeatures();
+    let geometryArr = [];
+    let area = 0;
+    // 获取图层上的Polygon，转成geoJson用于回显
+    features.forEach((item) => {
+      geometryArr.push({ featureWkt: new WKT().writeFeature(item) });
+      let geom = item.getGeometry().clone();
+      geom.transform(proj.get("EPSG:4326"), proj.get("EPSG:38572"));
+      let areaItem = getArea(geom);
+      areaItem = (areaItem + areaItem / 2) / 1000;
+      area += areaItem;
+    });
+    return { geometryArr, area: area.toFixed(2) };
   }
 }
 

src/views/authentic/index.vue

@@ -42,12 +42,12 @@
             <el-icon size="15"><CloseBold /></el-icon>
             <span>删除点</span>
           </div>
-          <div class="btn delete">
+          <div class="btn delete" @click="handleDelete">
             <el-icon size="15" color="#fff"><CloseBold /></el-icon>
             <span>删除地块</span>
           </div>
         </div>
-        <div class="edit-popup">
+        <div class="edit-popup" v-show="isEdit">
           <div class="edit-title">
             <img src="@/assets/images/common/chart-icon.png" alt="" />
             <span>地块属性</span>
@@ -61,76 +61,62 @@
             >
               <el-form-item label="农场地址">
                 <el-input
-                  v-model="formInline.user"
+                  v-model="formInline.address"
                   placeholder="请输入农场地址"
                   clearable
                 />
               </el-form-item>
               <el-form-item label="农场名称">
                 <el-input
-                  v-model="formInline.user"
+                  v-model="formInline.farmName"
                   placeholder="请输入农场名称"
                   clearable
                 />
               </el-form-item>
               <el-form-item label="创建时间">
-                <el-input v-model="formInline.user" placeholder="" clearable />
+                <el-input
+                  v-model="formInline.createDate"
+                  placeholder=""
+                  clearable
+                />
               </el-form-item>
               <el-form-item label="农场面积">
-                <el-input v-model="formInline.user" placeholder="" clearable />
+                <el-input v-model="formInline.area" placeholder="" clearable />
               </el-form-item>
               <el-form-item label="作物物种">
                 <el-input
-                  v-model="formInline.user"
+                  v-model="formInline.speciesTypeName"
                   placeholder="请输入作物物种"
                   clearable
                 />
               </el-form-item>
               <el-form-item label="客户姓名">
                 <el-input
-                  v-model="formInline.user"
+                  v-model="formInline.masterName"
                   placeholder="请输入姓名"
                   clearable
                 />
               </el-form-item>
               <el-form-item label="联系电话">
                 <el-input
-                  v-model="formInline.user"
+                  v-model="formInline.masterTel"
                   placeholder="请输入联系电话"
                   clearable
                 />
               </el-form-item>
             </el-form>
-            <div class="list-box">
+            <div class="list-box" v-show="pointList.length > 0">
               <span>边界点经纬度</span>
               <div class="list-cont">
-                <div class="list-item">
-                  <span>A1</span>
-                  <div class="item-box">北纬23.039，东经113.388</div>
-                </div>
-                <div class="list-item">
-                  <span>A1</span>
-                  <div class="item-box">北纬23.039，东经113.388</div>
-                </div>
-                <div class="list-item">
-                  <span>A1</span>
-                  <div class="item-box">北纬23.039，东经113.388</div>
-                </div>
-                <div class="list-item">
-                  <span>A1</span>
-                  <div class="item-box">北纬23.039，东经113.388</div>
-                </div>
-                <div class="list-item">
-                  <span>A1</span>
-                  <div class="item-box">北纬23.039，东经113.388</div>
-                </div>
-                <div class="list-item">
-                  <span>A1</span>
-                  <div class="item-box">北纬23.039，东经113.388</div>
-                </div>
-                <div class="list-item">
-                  <span>A1</span>
-                  <div class="item-box">北纬23.039，东经113.388</div>
+                <div
+                  class="list-item"
+                  v-for="(item, index) in pointList"
+                  :key="index"
+                >
+                  <span>A{{ index + 1 }}</span>
+                  <div class="item-box">
+                    北纬{{ item.lat }}，东经{{ item.lnt }}
+                  </div>
                 </div>
               </div>
             </div>
@@ -146,34 +132,174 @@
 </template>
 
 <script setup>
-import { onMounted, ref, reactive } from "vue";
+import { onMounted, ref, reactive, watchEffect } from "vue";
 import fnHeader from "@/components/fnHeader.vue";
 import AuthenticMap from "./authenticMap";
+import { mapData } from "./authenticMap";
 import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
 const router = useRouter();
 
 let authenticMap = new AuthenticMap();
 const mapRef = ref();
+const location = ref("POINT (113.78049350268851 23.419886891845312)");
+
 onMounted(() => {
-  let location = "POINT (113.78049350268851 23.419886891845312)";
-  authenticMap.initMap(location, mapRef.value);
+  getList(true);
 });
 
-const input = ref("");
+// 获取地块列表
+const plotList = ref([]);
+const getList = (isInitMap = false) => {
+  VE_API.authentic.getList().then(({ code, data }) => {
+    if (code !== 0) return authenticMap.initMap(location.value, mapRef.value);
+    plotList.value = data || [];
+    if (isInitMap) {
+      authenticMap.initMap(data[0].point, mapRef.value);
+    //   const geom = [];
+    //   data.forEach((item) => {
+    //     geom.push({ featureWkt: item.geom });
+    //   });
+    //   authenticMap.setAreaGeometry(geom);
+    }
+    const geom = [];
+      data.forEach((item) => {
+        geom.push({ featureWkt: item.geom });
+      });
+      authenticMap.setAreaGeometry(geom);
+    //   authenticMap.c()
+    authenticMap.addPoint(data);
+  });
+};
 
+const input = ref("");
+const initForm = {
+  address: "",
+  farmName: "",
+  createDate: "",
+  area: "",
+  speciesTypeName: "",
+  masterName: "",
+  masterTel: "",
+  geom: "",
+};
 const formInline = reactive({
-  user: "",
-  region: "",
-  date: "",
+  ...initForm,
 });
 
+const isEdit = ref(false);
+
+// 取消
+const onCancel = () => {
+  isEdit.value = false;
+  authenticMap.a();
+//   authenticMap.b();
+  if (!mapData.curPointData.id) return;
+  authenticMap.setPoint("point");
+};
+// 保存
 const onSubmit = () => {
-  console.log("submit!");
+  VE_API.authentic.saveData(formInline).then((res) => {
+    if (formInline.id) {
+      onCancel();
+    } else {
+      isEdit.value = false;
+    }
+    getList();
+  });
 };
 
 const goBack = () => {
   router.go(-1);
 };
+
+function updateFormInline(newData) {
+  Object.assign(formInline, newData);
+}
+
+function formatDate(isoString) {
+  const date = new Date(isoString);
+  // 获取年、月、日、小时、分钟和秒
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1，并且用0填充
+  const day = String(date.getDate()).padStart(2, "0");
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const seconds = String(date.getSeconds()).padStart(2, "0");
+
+  // 格式化日期为 YYYY-MM-DD hh:mm:ss
+  const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  return formattedDate;
+}
+
+const handleDelete = () => {
+  if (!mapData.curPointData.id) return ElMessage("请选择地块");
+  ElMessageBox.confirm("您确定删除该地块吗?", "提示", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      VE_API.authentic
+        .deleteData({ id: mapData.curPointData.id })
+        .then((res) => {
+          authenticMap.b();
+          
+            onCancel();
+          getList();
+        });
+    })
+    .catch(() => {
+    });
+};
+
+const pointList = ref([]);
+watchEffect(() => {
+  updateFormInline({...initForm});
+  pointList.value = [];
+  if (mapData.isEdit) {
+    isEdit.value = true;
+    const { geometryArr, area } = authenticMap.getAreaGeometry();
+    const lastItem = geometryArr[geometryArr.length - 1];
+    formInline.geom = lastItem.featureWkt;
+    formInline.area = area + "亩";
+    formInline.createDate = formatDate(new Date());
+    authenticMap.endEdit();
+  }
+
+  if (mapData.isEditArea) {
+    const { geometryArr, area } = authenticMap.getAreaGeometry();
+    formInline.geom = geometryArr[0].featureWkt;
+    formInline.area = area + "亩";
+  }
+
+  if (mapData.curPointData.id && !mapData.isEdit) {
+    if (mapData.curPointData.icon === "point-act") {
+      VE_API.authentic
+        .getDetails({ id: mapData.curPointData.id })
+        .then(({ data }) => {
+          isEdit.value = true;
+
+          data.createDate = formatDate(data.createDate);
+          updateFormInline({ ...data });
+          const { area } = authenticMap.getAreaGeometry();
+          formInline.area = area + "亩";
+
+          //   经纬度列表
+          const arr = JSON.parse(data.points);
+          pointList.value = arr.map((item) => {
+            return {
+              lat: item[1].toString().slice(0, 6),
+              lnt: item[0].toString().slice(0, 7),
+            };
+          });
+          authenticMap.endEdit();
+        });
+    } else {
+      // isEdit.value = false;
+    }
+  }
+});
 </script>
 
 <style lang="scss" scoped>