Accueil Explorer Aide
Connexion
feiniao
/
feiniao-farm-h5
4
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

feat：添加创建农场页面

wangsisi il y a 2 mois
Parent
2370c86629
commit
0183d9f86e
14 fichiers modifiés avec 285 ajouts et 22 suppressions
Vue séparée Afficher les stats Diff
  1. 11 9
      package-lock.json
  2. 1 0
      package.json
  3. 1 1
      public/index.html
  4. BIN
      src/assets/img/home/garden-icon-1.png
  5. BIN
      src/assets/img/home/garden-icon-2.png
  6. BIN
      src/assets/img/home/garden-icon-3.png
  7. BIN
      src/assets/img/home/garden-title.png
  8. BIN
      src/assets/img/home/go-back.png
  9. BIN
      src/assets/img/home/invite-bg.png
  10. BIN
      src/assets/img/home/t.png
  11. 6 0
      src/router/globalRoutes.js
  12. 150 0
      src/views/old_mini/create_farm/editMap.vue
  13. 99 0
      src/views/old_mini/create_farm/map/editMap.js
  14. 17 12
      yarn.lock

+ 11 - 9
package-lock.json
Voir le fichier 

@@ -35,6 +35,7 @@
 
         "nprogress": "^0.2.0",
 
         "ol": "^6.15.1",
 
         "ol-ext": "^3.2.4",
 
+        "proj4": "^2.19.10",
 
         "qs": "^6.11.0",
 
         "qweather-icons": "^1.6.0",
 
         "vant": "^4.9.4",
 
@@ -17579,13 +17580,15 @@
 
       }
 
     },
 
     "node_modules/proj4": {
 
-      "version": "2.12.1",
 
-      "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.12.1.tgz",
 
-      "integrity": "sha512-vmhP3hmstjXjzFwg8QXJwpoj4n7GVrXk3ZW3DzNK/Ur4cuwXq7ZiMXaWYvLYLQbX8n4MXgbwTr4lthOUZltBpA==",
 
-      "license": "MIT",
 
+      "version": "2.19.10",
 
+      "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.19.10.tgz",
 
+      "integrity": "sha512-uL6/C6kA8+ncJAEDmUeV8PmNJcTlRLDZZa4/87CzRpb8My4p+Ame4LhC4G3H/77z2icVqcu3nNL9h5buSdnY+g==",
 
       "dependencies": {
 
         "mgrs": "1.0.0",
 
-        "wkt-parser": "^1.3.3"
 
+        "wkt-parser": "^1.5.1"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/sponsors/ahocevar"
 
       }
 
     },
 
     "node_modules/protocol-buffers-schema": {
 
@@ -21261,10 +21264,9 @@
 
       }
 
     },
 
     "node_modules/wkt-parser": {
 
-      "version": "1.3.3",
 
-      "resolved": "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.3.3.tgz",
 
-      "integrity": "sha512-ZnV3yH8/k58ZPACOXeiHaMuXIiaTk1t0hSUVisbO0t4RjA5wPpUytcxeyiN2h+LZRrmuHIh/1UlrR9e7DHDvTw==",
 
-      "license": "MIT"
 
+      "version": "1.5.2",
 
+      "resolved": "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.5.2.tgz",
 
+      "integrity": "sha512-1ZUiV1FTwSiSrgWzV9KXJuOF2BVW91KY/mau04BhnmgOdroRQea7Q0s5TVqwGLm0D2tZwObd/tBYXW49sSxp3Q=="
 
     },
 
     "node_modules/word-wrap": {
 
       "version": "1.2.3",

+ 1 - 0
package.json
Voir le fichier 

@@ -38,6 +38,7 @@
 
     "nprogress": "^0.2.0",
 
     "ol": "^6.15.1",
 
     "ol-ext": "^3.2.4",
 
+    "proj4": "^2.19.10",
 
     "qs": "^6.11.0",
 
     "qweather-icons": "^1.6.0",
 
     "vant": "^4.9.4",

+ 1 - 1
public/index.html
Voir le fichier 

@@ -3,7 +3,7 @@
 
   <head>
 
     <meta charset="utf-8">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0 ,maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
     <title>飞鸟管家</title>
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/qweather-icons@1.3.0/font/qweather-icons.css">

BIN
src/assets/img/home/garden-icon-1.png
Voir le fichier


BIN
src/assets/img/home/garden-icon-2.png
Voir le fichier


BIN
src/assets/img/home/garden-icon-3.png
Voir le fichier


BIN
src/assets/img/home/garden-title.png
Voir le fichier


BIN
src/assets/img/home/go-back.png
Voir le fichier


BIN
src/assets/img/home/invite-bg.png
Voir le fichier


BIN
src/assets/img/home/t.png
Voir le fichier


+ 6 - 0
src/router/globalRoutes.js
Voir le fichier 

@@ -72,4 +72,10 @@ export default [
 
         name: "CreateFarm",
 
         component: () => import("@/views/old_mini/create_farm/index.vue"),
 
     },
 
+    // 编辑地图
 
+    {
 
+        path: "/edit_map",
 
+        name: "EditMap",
 
+        component: () => import("@/views/old_mini/create_farm/editMap.vue"),
 
+    },
 
 ];

+ 150 - 0
src/views/old_mini/create_farm/editMap.vue
Voir le fichier 

@@ -0,0 +1,150 @@
 
+<template>
 
+    <div class="edit-map">
 
+        <custom-header name="创建农场"></custom-header>
 
+        <div class="edit-map-content">
 
+            <div class="edit-map-tip">操作提示：拖动圆点，即可调整地块边界</div>
 
+            <div class="map-container" ref="mapContainer"></div>
 
+            <div class="edit-map-footer">
 
+                <div class="footer-back" @click="goBack">
 
+                    <img class="back-icon" src="@/assets/img/home/go-back.png" alt="" />
 
+                </div>
 
+                <div class="footer-address-box">
 
+                    <div class="footer-address">
 
+                        <div class="address-title">富丽华丽园-18栋-1单元</div>
 
+                        <div class="address-detail">广东省广州市从化区富江道</div>
 
+                    </div>
 
+                    <div class="address-btn" @click="goBack">修改地址</div>
 
+                </div>
 
+                <div class="edit-map-footer-btn">
 
+                    <div class="btn-cancel" @click="goBack">取消</div>
 
+                    <div class="btn-confirm" @click="confirm">确认</div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+</template>
 
+
 
+<script setup>
 
+import customHeader from "@/components/customHeader.vue";
 
+import { ref, onMounted } from "vue";
 
+import EditMap from "./map/editMap.js";
 
+import { useRouter } from "vue-router";
 
+
 
+const router = useRouter();
 
+const mapContainer = ref(null);
 
+const editMap = new EditMap();
 
+const mapData = {
 
+    farmCode: "LBY",
 
+    farmId: "766",
 
+    id: 2,
 
+    isGenerateReport: 1,
 
+    name: "分区2",
 
+    pointCount: 131,
 
+    pointWkt: "POINT (113.6142086995688 23.585836479509055)",
 
+    regionCode: "LBY-MR-2",
 
+    wkt: "MULTIPOLYGON (((113.61348988377155 23.58617369800422, 113.61395837633405 23.58622555407246, 113.61414076654707 23.58622555407246, 113.61436964832843 23.5862774101407, 113.61478628474084 23.586468741036786, 113.61491681896747 23.58652417337007, 113.61512424307672 23.586449071517652, 113.61491503077356 23.585742756367924, 113.61479880177082 23.585596129050916, 113.61473800497858 23.585451289764112, 113.61438931780664 23.585286780835393, 113.61410858003889 23.585299297865365, 113.61385645239149 23.585249229909184, 113.61378135053907 23.585288569029306, 113.61357571446003 23.585283204611276, 113.61347200232355 23.585342213209604, 113.61338080721704 23.585506721974614, 113.61335934954492 23.585665866485304, 113.61342193444922 23.58616296916816, 113.61348988377155 23.58617369800422)))",
 
+};
 
+onMounted(() => {
 
+    editMap.initMap("POINT (113.6142086995688 23.585836479509055)", mapContainer.value);
 
+    // editMap.setAreaGeometry([{ featureWkt: mapData.wkt }]);
 
+});
 
+const goBack = () => {
 
+    router.back();
 
+};
 
+const confirm = () => {
 
+    console.log("confirm");
 
+};
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+.edit-map {
 
+    width: 100%;
 
+    height: 100vh;
 
+    overflow: hidden;
 
+    .edit-map-content {
 
+        width: 100%;
 
+        height: 100%;
 
+        position: relative;
 
+        .edit-map-tip {
 
+            position: absolute;
 
+            top: 23px;
 
+            left: calc(50% - 256px / 2);
 
+            z-index: 1;
 
+            font-size: 12px;
 
+            color: #fff;
 
+            padding: 9px 20px;
 
+            background: rgba(0, 0, 0, 0.5);
 
+            border-radius: 20px;
 
+        }
 
+        .map-container {
 
+            width: 100%;
 
+            height: 100%;
 
+        }
 
+        .edit-map-footer {
 
+            position: absolute;
 
+            bottom: 80px;
 
+            left: 12px;
 
+            width: calc(100% - 24px);
 
+            display: flex;
 
+            flex-direction: column;
 
+            align-items: flex-end;
 
+            .footer-back {
 
+                padding: 6px 7px 9px;
 
+                background: #fff;
 
+                border-radius: 8px;
 
+                .back-icon {
 
+                    width: 20px;
 
+                    height: 18px;
 
+                }
 
+            }
 
+            .footer-address-box {
 
+                width: 100%;
 
+                box-sizing: border-box;
 
+                margin: 19px 0 14px 0;
 
+                display: flex;
 
+                justify-content: space-between;
 
+                align-items: center;
 
+                background: #fff;
 
+                border-radius: 14px;
 
+                padding: 14px 12px;
 
+                .footer-address {
 
+                    font-size: 12px;
 
+                    color: rgba(0, 0, 0, 0.6);
 
+                    .address-title {
 
+                        font-weight: 500;
 
+                        font-size: 16px;
 
+                        color: #000;
 
+                    }
 
+                }
 
+                .address-btn {
 
+                    color: #2199f8;
 
+                    border: 1px solid #2199f8;
 
+                    border-radius: 25px;
 
+                    padding: 6px 10px;
 
+                }
 
+            }
 
+            .edit-map-footer-btn {
 
+                display: flex;
 
+                justify-content: center;
 
+                align-items: center;
 
+                width: 100%;
 
+                div {
 
+                    width: 92px;
 
+                    text-align: center;
 
+                    color: #666666;
 
+                    font-size: 16px;
 
+                    padding: 8px 0;
 
+                    border-radius: 25px;
 
+                    background: #fff;
 
+                }
 
+                .btn-confirm {
 
+                    background: #000;
 
+                    background-image: linear-gradient(180deg, #76c3ff 0%, #2199f8 100%);
 
+                    margin-left: 16px;
 
+                    color: #fff;
 
+                }
 
+            }
 
+        }
 
+    }
 
+}
 
+</style>

+ 99 - 0
src/views/old_mini/create_farm/map/editMap.js
Voir le fichier 

@@ -0,0 +1,99 @@
 
+import * as KMap from "@/utils/ol-map/KMap";
 
+import * as util from "@/common/ol_common.js";
 
+import config from "@/api/config.js";
 
+import Style from "ol/style/Style";
 
+import Icon from "ol/style/Icon";
 
+import { Point } from 'ol/geom';
 
+import Feature from "ol/Feature";
 
+import * as proj from "ol/proj";
 
+import { getArea } from 'ol/sphere.js';
 
+import WKT from "ol/format/WKT.js";
 
+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);
 
+
 
+/**
 
+ * @description 地图层对象
 
+ */
 
+class EditMap {
 
+  constructor() {
 
+    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/img/home/garden-point.png"),
 
+            scale: 0.5,
 
+            anchor: [0.5, 1],
 
+          }),
 
+        });
 
+      },
 
+    });
 
+  }
 
+
 
+  initMap(location, target) {
 
+    let level = 16;
 
+    let coordinate = util.wktCastGeom(location).getFirstCoordinate();
 
+    this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 8, 22);
 
+    let xyz2 = config.base_img_url3 + "map/lby/{z}/{x}/{y}.png";
 
+    this.kmap.addXYZLayer(xyz2, { minZoom: 8, maxZoom: 22 }, 2);
 
+    this.kmap.addLayer(this.clickPointLayer.layer);
 
+    this.setMapPoint(coordinate)
 
+
 
+    this.kmap.initDraw((e) => {
 
+      // showContent.isShow = true
 
+    })
 
+    this.kmap.startDraw()
 
+    this.kmap.modifyDraw()
 
+  }
 
+
 
+  setAreaGeometry(geometryArr) {
 
+    let that = this
 
+    geometryArr.map(item => {
 
+      that.kmap.setLayerWkt(item.featureWkt)
 
+    })
 
+  }
 
+
 
+  clearLayer(){
 
+    // this.kmap.removeLayer(this.clickPointLayer.layer)
 
+    this.kmap.polygonLayer.source.clear();
 
+  }
 
+
 
+  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)}
 
+  }
 
+
 
+  setMapPosition(center) {
 
+    this.kmap.getView().animate({
 
+      center,
 
+      zoom: 16,
 
+      duration: 500,
 
+    });
 
+    this.setMapPoint(center)
 
+  }
 
+
 
+  setMapPoint(coordinate) {
 
+    this.clickPointLayer.source.clear()
 
+    let point = new Feature(new Point(coordinate))
 
+    this.clickPointLayer.addFeature(point)
 
+  }
 
+}
 
+
 
+export default EditMap;

+ 17 - 12
yarn.lock
Voir le fichier 

@@ -1365,10 +1365,10 @@
 
     read-package-json-fast "^3.0.0"
 
     which "^3.0.0"
 
 
-"@parcel/watcher-win32-x64@2.5.1":
 
+"@parcel/watcher-darwin-arm64@2.5.1":
 
   version "2.5.1"
 
-  resolved "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz"
 
-  integrity sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==
 
+  resolved "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz"
 
+  integrity sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==
 
 
 "@parcel/watcher@^2.4.1":
 
   version "2.5.1"
 
@@ -6156,6 +6156,11 @@ fs.realpath@^1.0.0:
 
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
 
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8= sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
 
+fsevents@~2.3.2:
 
+  version "2.3.3"
 
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"
 
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
+
 
 function-bind@^1.1.1, function-bind@^1.1.2:
 
   version "1.1.2"
 
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
 
@@ -9086,13 +9091,13 @@ progress@^2.0.0:
 
   resolved "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz"
 
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
 
-proj4@^2.8.1:
 
-  version "2.12.1"
 
-  resolved "https://registry.npmjs.org/proj4/-/proj4-2.12.1.tgz"
 
-  integrity sha512-vmhP3hmstjXjzFwg8QXJwpoj4n7GVrXk3ZW3DzNK/Ur4cuwXq7ZiMXaWYvLYLQbX8n4MXgbwTr4lthOUZltBpA==
 
+proj4@^2.19.10, proj4@^2.8.1:
 
+  version "2.19.10"
 
+  resolved "https://registry.npmjs.org/proj4/-/proj4-2.19.10.tgz"
 
+  integrity sha512-uL6/C6kA8+ncJAEDmUeV8PmNJcTlRLDZZa4/87CzRpb8My4p+Ame4LhC4G3H/77z2icVqcu3nNL9h5buSdnY+g==
 
   dependencies:
 
     mgrs "1.0.0"
 
-    wkt-parser "^1.3.3"
 
+    wkt-parser "^1.5.1"
 
 
 promise-all-reject-late@^1.0.0:
 
   version "1.0.1"
 
@@ -11118,10 +11123,10 @@ win-release@^1.0.0:
 
   dependencies:
 
     semver "^5.0.1"
 
 
-wkt-parser@^1.3.3:
 
-  version "1.3.3"
 
-  resolved "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.3.3.tgz"
 
-  integrity sha512-ZnV3yH8/k58ZPACOXeiHaMuXIiaTk1t0hSUVisbO0t4RjA5wPpUytcxeyiN2h+LZRrmuHIh/1UlrR9e7DHDvTw==
 
+wkt-parser@^1.5.1:
 
+  version "1.5.2"
 
+  resolved "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.5.2.tgz"
 
+  integrity sha512-1ZUiV1FTwSiSrgWzV9KXJuOF2BVW91KY/mau04BhnmgOdroRQea7Q0s5TVqwGLm0D2tZwObd/tBYXW49sSxp3Q==
 
 
 word-wrap@^1.2.3:
 
   version "1.2.3"