hjj

src/views/enterprise/MapContainer.vue

@@ -22,8 +22,46 @@
         <el-button>垄向线</el-button>
         <el-button>测量</el-button>
         <el-button>标记</el-button>
+        <el-button @click="drawPolygon">绘制多边形</el-button>
+        <el-button @click="editPolygon">编辑多边形</el-button>
+        <el-button @click="endEditPolygon">结束编辑</el-button>
+        <el-button @click="editPolyline">绘制垄向线</el-button>
       </div>
+      <div class="infoBox">
+        <div class="left">面积为:{{ Math.trunc(area) }} 平方米</div>
+        <div class="right">周长为:{{ Math.trunc(perimeter) }}米</div>
+        <el-button type="primary" @click="openDialog" size="mini">保存</el-button>
       </div>
+    </div>
+    <!-- 弹窗部分 -->
+    <el-dialog title="农场初始化" width="30%" style="font-weight: bold;height: 80%; z-index: 10000; border-radius: 120px;"
+      :visible.sync="dialogVisible">
+      <el-form>
+        <el-form-item label="农村名称" style="margin-top: 1.5%;margin-left: 1%">
+          <el-input v-model="farm.farm_name" placeholder="请输入农场名称"></el-input>
+        </el-form-item>
+        <el-form-item label="垄    距" style="margin-top: 1%;margin-left: 1%">
+          <el-input v-model="farm.ridge_distance" placeholder="请输入垄距"></el-input>
+        </el-form-item>
+        <h4>农村数据</h4>
+        <el-form-item label="位    置:" style="margin-top: 1.5%;margin-left: 1%">
+          <span>{{ farm.address }}</span>
+        </el-form-item>
+        <el-form-item label="面    积:" style="margin-top: 1%;margin-left: 1%">
+          <span>{{ farm.size_m }} 亩</span>
+        </el-form-item>
+        <el-form-item label="周    长:" style="margin-top: 1%;margin-left: 1%">
+          <span>{{ farm.size_round }} 米</span>
+        </el-form-item>
+      </el-form>
+
+      <template v-slot:footer>
+        <el-button type="primary"
+          style="height: 2%;width: 15%;margin-top: 1.5%; background-color: #01B79E;">创建</el-button>
+        <el-button @click="dialogVisible = false" style="height: 2%;width: 15%;margin-top: 1.5%">放弃</el-button>
+      </template>
+
+    </el-dialog>
 
   </div>
 
@@ -31,7 +69,7 @@
 
 <script>
 import AMapLoader from "@amap/amap-jsapi-loader";
-
+import { Message } from "element-ui";
 // @ts-ignore
 window._AMapSecurityConfig = {
   // 安全密钥
@@ -42,6 +80,56 @@ export default {
   name: "gaode",
   data() {
     return {
+      //农村数据
+      farm: {
+        farm_name: '',
+        enterpirse_id: '',
+        size_m: '',
+        size_p: '',
+        size_round: '',
+        ridge_distance: '',
+        area_num: '',
+        project_num: '',
+        create_time: '',
+        address: '',
+        s_picture: '',
+        scale: ''
+      },
+      //画完之后的弹窗
+      dialogVisible: false,
+      //多边形样式
+      polygonStyle: {
+        strokeOpacity: 1,//线透明度
+        strokeWeight: 3,//线粗细
+        fillColor: '#20563A',//填充颜色
+        strokeColor: '#FDFCFB',//线颜色
+        fillOpacity: 0.6,//填充透明度
+        // 线样式还支持 'dashed, solid'
+        strokeStyle: "dashed",
+        // strokeStyle是dashed时有效
+        strokeDasharray: [30, 10],
+      },
+      //draw事件是不是已经绑定
+      drawEventBound: false,
+      //多边形周长
+      perimeter: null,
+      //多边形面积
+      area: null,
+      //多边形编辑
+      polyEditor: null,
+      //多边形
+      polygon: {
+        path: [
+          [116.403322, 39.920255],
+          [116.410703, 39.897555],
+          [116.402292, 39.892353],
+          [116.389846, 39.891365],
+        ],
+      },
+      //垄向线
+      polylines: [],
+      //绘制工具
+      mouseTool: null,
       // 地图实例
       map: null,
       // 标记点
@@ -63,6 +151,8 @@ export default {
       loading: false,
       // 搜索提示信息
       options: [],
+      //边界长度信息
+      text:'',
     };
   },
   methods: {
@@ -72,7 +162,7 @@ export default {
         key: "a2907b6a9ce8987ab8ed8de9626d90e5",
         version: "2.0",
         // 需要用到的插件
-        plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType', 'AMap.OverView', 'AMap.Geolocation', "AMap.AutoComplete", "AMap.Geocoder"],
+        plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType', 'AMap.OverView', 'AMap.Geolocation', "AMap.AutoComplete", "AMap.Geocoder", "AMap.MouseTool", "AMap.PolyEditor", "AMap.Polygon", "AMap.GeometryUtil"],
       })
         .then((AMap) => {
           this.map = new AMap.Map("container", {
@@ -81,6 +171,8 @@ export default {
             zoom: 15, //初始化地图级别
             center: [125.3245, 43.886841], //初始化地图中心点位置
           });
+          this.initPolygon();
+
           // 添加卫星图层
           let weixing = new AMap.TileLayer.Satellite({
             zIndex: 10
@@ -101,7 +193,7 @@ export default {
 
           // 添加地图类型切换控件
           let mapType = new AMap.MapType({
-            defaultType: 0, // 默认显示卫星图
+            defaultType: 1, // 默认显示标准图
             showRoad: true  // 显示道路信息
           });
           this.map.addControl(mapType);
@@ -112,16 +204,7 @@ export default {
           });
           // 搜索提示插件
           this.AutoComplete = new AMap.AutoComplete({ city: "全国" });
-          //点击获取经纬度;
-          this.map.on("click", (e) => {
-            // 获取经纬度
-            this.form.lng = e.lnglat.lng;
-            this.form.lat = e.lnglat.lat;
-            // 清除点
-            this.removeMarker();
-            // 标记点
-            this.setMapMarker();
-          });
+
         })
         .catch((err) => {
           // 错误
@@ -182,7 +265,6 @@ export default {
     },
     // 选中提示
     currentSelect(val) {
-
       // 清空时不执行后面代码
       if (!val || val.location === '') {
         return;
@@ -198,222 +280,191 @@ export default {
       this.removeMarker();
       // 标记点
       this.setMapMarker();
+    },
+    //计算面积
+    calculateArea(obj) {
+      return AMap.GeometryUtil.ringArea(obj.getPath());
+    },
+    //计算周长
+    calculatePerimeter(obj) {
+      //计算周长
+      let perimeter = 0;
+      for (let i = 0; i < obj.getPath().length - 1; i++) {
+        perimeter += AMap.GeometryUtil.distance(obj.getPath()[i], obj.getPath()[i + 1])
+      }
+      perimeter += AMap.GeometryUtil.distance(obj.getPath()[0], obj.getPath()[obj.getPath().length - 1])
+      return perimeter;
+    },
+    //计算每条边的长度
+    calculateEveryEdgeLength() {
+      const path = this.polygon.getPath();
+      this.map.remove(this.text);
+      // 计算并显示每条边的长度
+      for (let i = 0; i < path.length; i++) {
+        const start = path[i];
+        const end = path[(i + 1) % path.length];
+        const distance = AMap.GeometryUtil.distance(start, end);
+
+        // 计算中点
+        const midPoint = new AMap.LngLat(
+          (start.lng + end.lng) / 2,
+          (start.lat + end.lat) / 2
+        );
+        
+        // 添加文本标注
+        this.text = new AMap.Text({
+          text: distance.toFixed(2) + '米',
+          position: midPoint,
+          offset: new AMap.Pixel(0, -10),
+          style: {
+            color: '#FFFFFF',
+            fontSize: '18px',
+            backgroundColor: 'transparent',
+            border: 'none'
+          }
+        });
+        this.map.add(this.text);
+      }
+    },
+    //“绘制完成”事件绑定
+    bindDrawEvent() {
+      this.mouseTool.on('draw', (event) => {
+        // event.obj 为绘制出来的覆盖物对象
+        console.log("event.obj.className", event.obj.className);
+        if (event.obj.className === 'Overlay.Polyline') {
+          console.log("event.obj.getPath().length", event.obj.getPath().length);
+
+          if (event.obj.getPath().length !== 2) {
+            Message.success('不是一个向线');
+            this.map.remove(event.obj);
+            return;
+          }
+          this.polylines.push(event.obj)
+
+        } else if (event.obj.className === 'Overlay.Polygon') {
+          if (this.calculateArea(event.obj) === 0) {
+            Message.success('不是一个多边形');
+            this.map.remove(event.obj);
+            return;
+          }
+          this.map.remove(this.polygon);
+          this.polygon = event.obj;
+          this.calculateEveryEdgeLength();
+          this.area = this.calculateArea(event.obj);
+          this.perimeter = this.calculatePerimeter(event.obj);
+          this.updateAllDataToFarm();
+        }
+        // this.mouseTool.close(true);
+        // console.log("this.area", this.area);
+        // console.log("this.perimeter", this.perimeter);
+        this.endDraw();
+      })
+    },
+    //画多边形
+    drawPolygon() {
+      if (this.mouseTool == null) {
+        this.mouseTool = new AMap.MouseTool(this.map)
+      }
+      this.mouseTool.polygon({
+        ...this.polygonStyle
+      })
+      //绑定一个事件
+      if (this.drawEventBound) {
+        return;
+      }
+      this.bindDrawEvent();
+      this.drawEventBound = true
+    },
+    //结束绘制多边形
+    endDraw() {
+      this.mouseTool.close(false);
+    },
+    //开始编辑
+    editPolygon() {
+      if (this.polyEditor) {
+        return;
+      }
+      this.polyEditor = new AMap.PolyEditor(this.map, this.polygon);
+      this.polyEditor.open();
+    },
+    //结束编辑
+    endEditPolygon() {
+      if (!this.polyEditor) {
+        return;
+      }
+      this.polyEditor.close();
+      this.polyEditor = null;
+    },
+    //绘制垄向线
+    editPolyline() {
+      if (this.mouseTool == null) {
+        this.mouseTool = new AMap.MouseTool(this.map);
+      }
+      this.mouseTool.polyline({
+        strokeColor: "#3366FF",
+        strokeOpacity: 1,
+        strokeWeight: 6,
+        // 线样式还支持 'dashed'
+        strokeStyle: "solid",
+        // strokeStyle是dashed时有效
+        // strokeDasharray: [10, 5],
+      })
+      //当绘制完成绑定一个事件
+      if (this.drawEventBound) {
+        return;
+      }
+      this.bindDrawEvent();
+      this.drawEventBound = true
+    },
+    //初始化多边形
+    initPolygon() {
+      if (this.polygon === null) {
+        return;
+      }
+      this.polygon = new AMap.Polygon({
+        path: this.polygon.path,
+        ...this.polygonStyle,
+        zIndex: 50,
+      }),
+        this.map.add(this.polygon)
+      // 缩放地图到合适的视野级别
+      this.map.setFitView([this.polygon])
+      console.log("初始化多边形");
 
     },
+    //打开弹窗
+    openDialog() {
+      this.dialogVisible = true
+    },
+    //更新农场信息
+    updateAllDataToFarm() {
+      this.addressResolutionByCoordinates(this.polygon.getPath()[0]).then(address => {
+        this.farm.address = address
+      });
+      this.farm.size_m = 0.0015 * this.area;
+      this.farm.size_round = this.perimeter;
+    },
+    //根据坐标解析地址
+    addressResolutionByCoordinates(obj) {
+      let lnglat = [obj.lng, obj.lat];
+      return new Promise((resolve, reject) => {
+        this.geoCoder.getAddress(lnglat, (status, result) => {
+          if (status === "complete" && result.regeocode) {
+            resolve(result.regeocode.formattedAddress);
+          } else {
+            reject("Failed to get address");
+          }
+        });
+      });
+    }
   },
   mounted() {
     this.initMap();
+
   },
 };
 </script>
 
-
-<!-- <script> -->
-<!--import AMapLoader from '@amap/amap-jsapi-loader';-->
-<!--import { ref } from 'vue'-->
-<!--window._AMapSecurityConfig = {-->
-<!--// 安全密钥-->
-<!--securityJsCode: "679d00a7b459e5bd24ec792c8b7083fd",-->
-<!--};-->
-<!--export default {-->
-<!--name: "gaode",-->
-<!--data() {-->
-<!--return {-->
-<!--// 地图实例-->
-<!--map: null,-->
-<!--// 标记点-->
-<!--marker: "",-->
-<!--// 地址逆解析-->
-<!--geoCoder: null,-->
-<!--// 搜索提示-->
-<!--AutoComplete: null,-->
-<!--// 搜索关键字-->
-<!--keywords: "",-->
-<!--// 位置信息-->
-<!--form: {-->
-<!--lng: "0",-->
-<!--lat: "0",-->
-<!--address: "",-->
-<!--adcode: "", //地区编码-->
-<!--},-->
-<!--// 搜索节流阀-->
-<!--loading: false,-->
-<!--// 搜索提示信息-->
-<!--options: [],-->
-<!--}-->
-<!--},-->
-<!--// setup() {-->
-<!--// const map = shallowRef(null);-->
-<!--// let AutoComplete = ref(null);-->
-<!--// let keywords = ref("");-->
-<!--// let loading = ref(false);-->
-<!--// let options = ref([]);-->
-<!--// return {-->
-<!--// map,-->
-<!--// // 搜索提示-->
-<!--// AutoComplete,-->
-<!--// // 搜索关键字-->
-<!--// keywords,-->
-<!--// // 搜索节流阀-->
-<!--// loading,-->
-<!--// // 搜索提示信息-->
-<!--// options,-->
-<!--// }-->
-<!--// },-->
-<!--methods: {-->
-<!--initMap() {-->
-<!--AMapLoader.load({-->
-<!--key: "a2907b6a9ce8987ab8ed8de9626d90e5", // 使用您自己的API Key-->
-<!--version: "2.0",-->
-<!--plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType', 'AMap.OverView', 'AMap.Geolocation', "AMap.AutoComplete",-->
-<!--"AMap.Geocoder"], // 添加所需插件-->
-<!--}).then((AMap) => {-->
-<!--this.map = new AMap.Map("container", {-->
-<!--viewMode: "3D",-->
-<!--zooms: [4, 18],-->
-<!--zoom: 15,-->
-<!--center: [125.3245, 43.886841],-->
-<!--});-->
-
-<!--// 添加卫星图层-->
-<!--var weixing = new AMap.TileLayer.Satellite({-->
-<!--zIndex: 10-->
-<!--});-->
-<!--this.map.add(weixing);-->
-
-<!--// 添加工具条-->
-<!--var toolBar = new AMap.ToolBar({-->
-<!--visible: true // 设置控件是否可见-->
-<!--});-->
-<!--this.map.addControl(toolBar);-->
-
-<!--// 添加比例尺-->
-<!--var scale = new AMap.Scale({-->
-<!--visible: true // 设置控件是否可见-->
-<!--});-->
-<!--this.map.addControl(scale);-->
-
-<!--// 添加地图类型切换控件-->
-<!--var mapType = new AMap.MapType({-->
-<!--defaultType: 0, // 默认显示卫星图-->
-<!--showRoad: true // 显示道路信息-->
-<!--});-->
-<!--this.map.addControl(mapType);-->
-
-<!--//添加定位控件并定位到用户位置-->
-<!--// var geolocation = new AMap.Geolocation({-->
-<!--// enableHighAccuracy: true, // 是否使用高精度定位-->
-<!--// timeout: 10000, // 超过10秒后停止定位-->
-<!--// maximumAge: 0, // 位置缓存时间-->
-<!--// convert: true, // 自动偏移坐标-->
-<!--// showMarker: true, // 定位成功后在定位到的位置显示点标记-->
-<!--// showCircle: true, // 定位成功后用圆圈表示定位精度范围-->
-<!--// panToLocation: true, // 定位成功后将定位到的位置作为地图中心点-->
-<!--// zoomToAccuracy: true // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见-->
-<!--// });-->
-<!--// this.map.addControl(geolocation);-->
-<!--// geolocation.getCurrentPosition((status, result) => {-->
-<!--// if (status === 'complete') {-->
-<!--// console.log('定位成功', result);-->
-<!--// } else {-->
-<!--// console.error('定位失败', result);-->
-<!--// }-->
-<!--// });-->
-
-<!--// 搜索提示插件-->
-<!--this.AutoComplete = new AMap.AutoComplete({ city: "全国" });-->
-<!--//地址逆解析插件-->
-<!--this.geoCoder = new AMap.Geocoder({-->
-<!--city: "010", //城市设为北京，默认：“全国”-->
-<!--radius: 1000, //范围，默认：500-->
-<!--});-->
-<!--//点击获取经纬度;-->
-<!--this.map.on("click", (e) => {-->
-<!--// 获取经纬度-->
-<!--this.form.lng = e.lnglat.lng;-->
-<!--this.form.lat = e.lnglat.lat;-->
-<!--console.log("this.form", this.form);-->
-<!--console.log("e", e);-->
-
-<!--// 清除点-->
-<!--this.removeMarker();-->
-<!--// 标记点-->
-<!--this.setMapMarker();-->
-<!--});-->
-
-
-<!--}).catch(e => {-->
-<!--console.error('地图加载失败:', e);-->
-<!--})-->
-<!--},-->
-<!--// 搜索-->
-<!--remoteMethod(query) {-->
-<!--if (query !== "") {-->
-<!--this.loading = true;-->
-<!--setTimeout(() => {-->
-<!--this.loading = false;-->
-<!--this.AutoComplete.search(query, (status, result) => {-->
-<!--this.options = result.tips;-->
-<!--});-->
-<!--}, 200);-->
-<!--} else {-->
-<!--this.options = [];-->
-<!--}-->
-<!--},-->
-<!--// 选中提示-->
-<!--currentSelect(val) {-->
-
-<!--// 清空时不执行后面代码-->
-<!--if (!val || val.location === '') {-->
-<!--return;-->
-<!--}-->
-<!--// 清除点-->
-<!--this.removeMarker();-->
-<!--// 标记点-->
-<!--this.setMapMarker();-->
-<!--},-->
-<!--// 标记点-->
-<!--setMapMarker() {-->
-<!--try {-->
-<!--// 自动适应显示想显示的范围区域-->
-<!--this.map.setFitView();-->
-<!--this.marker = new AMap.Marker({-->
-<!--map: this.map,-->
-<!--position: [this.form.lng, this.form.lat],-->
-<!--});-->
-<!--// 逆解析地址-->
-<!--this.toGeoCoder();-->
-<!--this.map.setFitView();-->
-<!--this.map.add(this.marker);-->
-<!--} catch (error) {-->
-<!--console.log('进入错误');-->
-
-<!--this.$message.error(error)-->
-<!--}-->
-
-<!--},-->
-<!--// 清除点-->
-<!--removeMarker() {-->
-<!--if (this.marker) {-->
-<!--this.map.remove(this.marker);-->
-<!--}-->
-<!--},-->
-<!--// 逆解析地址-->
-<!--toGeoCoder() {-->
-<!--let lnglat = [this.form.lng, this.form.lat];-->
-<!--this.geoCoder.getAddress(lnglat, (status, result) => {-->
-<!--if (status === "complete" && result.regeocode) {-->
-<!--this.form.address = result.regeocode.formattedAddress;-->
-<!--}-->
-<!--});-->
-<!--},-->
-<!--},-->
-<!--mounted() {-->
-<!--this.initMap();-->
-<!--}-->
-<!--}-->
-<!--</script>-->
-
 <style scoped>
 #container {
   width: 202vh;
@@ -425,7 +476,7 @@ export default {
 .searchBox {
   position: absolute;
   top: 60px;
-  right: 120px;
+  right: 220px;
   z-index: 1000;
   /* 确保搜索框在地图上方 */
   background: white;
@@ -433,10 +484,11 @@ export default {
   border-radius: 5px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
-.functionBox{
+
+.functionBox {
   position: absolute;
   top: 120px;
-  right: 120px;
+  right: 220px;
   z-index: 1000;
   /* 确保搜索框在地图上方 */
   background: white;
@@ -444,4 +496,27 @@ export default {
   border-radius: 5px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
+
+.infoBox {
+  position: absolute;
+  top: 70px;
+  left: 50px;
+  z-index: 1000;
+  /* 确保搜索框在地图上方 */
+  background: white;
+  padding: 10px;
+  border-radius: 5px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  width: 400px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.left {
+    text-align: left;
+}
+
+.right {
+    text-align: right;
+}
 </style>