Domů Procházet Nápověda
Přihlásit se
feiniao
/
feiniao-farm-h5
4
0
Rozštěpit 0
Soubory Úkoly 0 Pull Requesty 0 Wiki
Procházet zdrojové kódy

feat：添加创建农场页面

wangsisi před 2 týdny
rodič
2370c86629
revize
0183d9f86e
14 změnil soubory, kde provedl 285 přidání a 22 odebrání
Rozdělené zobrazení Ukázat statistiku rozdílových dat
  1. 11 9
      package-lock.json
  2. 1 0
      package.json
  3. 1 1
      public/index.html
  4. binární
      src/assets/img/home/garden-icon-1.png
  5. binární
      src/assets/img/home/garden-icon-2.png
  6. binární
      src/assets/img/home/garden-icon-3.png
  7. binární
      src/assets/img/home/garden-title.png
  8. binární
      src/assets/img/home/go-back.png
  9. binární
      src/assets/img/home/invite-bg.png
  10. binární
      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
Zobrazit soubor 

@@ -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
Zobrazit soubor 

@@ -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
Zobrazit soubor 

@@ -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ární
src/assets/img/home/garden-icon-1.png
Zobrazit soubor


binární
src/assets/img/home/garden-icon-2.png
Zobrazit soubor


binární
src/assets/img/home/garden-icon-3.png
Zobrazit soubor


binární
src/assets/img/home/garden-title.png
Zobrazit soubor


binární
src/assets/img/home/go-back.png
Zobrazit soubor


binární
src/assets/img/home/invite-bg.png
Zobrazit soubor


binární
src/assets/img/home/t.png
Zobrazit soubor


+ 6 - 0
src/router/globalRoutes.js
Zobrazit soubor 

@@ -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
Zobrazit soubor 

@@ -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
Zobrazit soubor 

@@ -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
Zobrazit soubor 

@@ -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"