Merge branch 'feature-gaode' into develop

README.md

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-01-19 10:08:58
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-05-11 14:26:32
+ * @LastEditTime: 2022-05-23 10:44:53
  * @FilePath: \AntpayFrontEnd\README.md
  * @description: 项目说明文档
 -->
@@ -105,4 +105,13 @@ feature
 ### v1.0.5
 `2022.05.11`
 feature
-- 增加 多页面配置
+- 增加 多页面配置
+
+
+### v1.0.6
+`2022.05.23`
+ci
+- 删除 多页面配置
+
+feature
+- 增加 一个判断点是否在多个围栏单页面

src/config/models.js

@@ -1,11 +1,11 @@
 /*
  * @Date: 2021-11-20 10:26:39
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-05-11 14:28:21
+ * @LastEditTime: 2022-05-23 10:45:19
  * @FilePath: \AntpayFrontEnd\src\config\models.js
  * @description:
  */
-export const VERSION_MODEL = '1.0.5'; //版本号
+export const VERSION_MODEL = '1.0.6'; //版本号
 export const IMAGE_URL = {
     production: 'http://zfb.ssjlai.com/web/',
     test: 'http://zfb.ssjlai.com/web/',

src/views/gaode-demo/PointInRing.vue

@@ -1,11 +1,13 @@
 <template>
     <div id="map" ref="mapContainer">
-        <div class="tips" v-if="isShowTips" >
-            <p>{{this.tips}}</p>
+        <div class="tips" v-if="isShowTips">
+            <!-- <p>{{this.tips}}</!--> -->
             <p>当前点坐标:</p>
             <van-field v-model="map.center"></van-field>
-            <p>绘制的围栏坐标数组：</p>
-            <van-field v-model="polyList" type="textarea"></van-field>
+            <p>当前点在围栏内的围栏id有:</p>
+            <div class="id-container">
+                <span v-for="(item, index) in polyIdList" :key="index">{{item}}，</span>
+            </div>
         </div>
     </div>
 </template>
@@ -24,21 +26,27 @@ export default {
            marker: null,
            polygon: null,
            radius: '',
+           polygonCircle: [], //
        }, //创建地图参数
        polyLnglAtList: '', //绘制多边形围栏数据数组
 
        isPointInRing: null, //是否在围栏内
        isShowTips: false, //是否显示tips, 默认false，等到围栏加载完才显示
-       /* polyList: '', */
+       fenceList: [],
+       polygonList: [],
+       gence: '',
+       reqList: [
+
+       ],
+       polyIdList: '', //点在围栏内的围栏id
+
+
    }
   },
   computed: {
       tips() {
           return this.isPointInRing ? '该点在围栏内' : '该点在围栏外';
       },
-      polyList() {
-          return this.polyLnglAtList.toString();
-      }
   },
   created() {
     this.getMap();
@@ -84,44 +92,77 @@ export default {
         if( isNotNull(this.$route.query) ) {
             let params = this.$route.query;
             this.map.center = params.center.split(',');
-            /* this.polyLnglAtList = params.polygon.split(";"); */
             this.polyLnglAtList = params.polygon.split(';').map(item => {
                 return item.split(',');
             });
-           /*  this.polyLnglAtList.push(list); */
-            this.map.radius = Number(params.radius);
-            console.log("radius", params.radius);
-            console.log("params.polygon", this.polyLnglAtList);
-            console.log("url的参数", params);
+
         }
     },
     // 创建围栏
     createPolygon() {
-        // 圆形围栏 只有一组坐标
-        if(this.polyLnglAtList.length === 1) {
-            this.map.polygon = new AMap.Circle({
-                center: this.map.center,
-                radius: this.map.radius, //半径
-                borderWeight: 3,
-                strokeColor: "red",
-                strokeWeight: 6,
-                strokeOpacity: 0.5,
-                fillOpacity: 0.4,
-                strokeStyle: 'dashed',
-                strokeDasharray: [10, 10],
-                // 线样式还支持 'dashed'
-                fillColor: 'green',
-                zIndex: 50,
-            });
-            this.map.instance.add(this.map.polygon)
-        } else {
             // 多边形围栏
-            this.map.polygon = new AMap.Polygon({
-                map: this.map.instance,
-                fillOpacity: 0.1,
-                path: this.polyLnglAtList
+            this.gence = this.polyLnglAtList.filter(item => {
+                return item.length > 4
+            }).map(item => {
+                return {
+                    id: item[item.length - 2],
+                    radius: item[item.length - 1],
+                    center: item.splice(0, item.length - 2)
+                }
             });
-        }
+            this.fenceList.push(this.gence);
+            this.gence.forEach(item => {
+                let fenceItem = this.gence.map(item => {
+                    return item;
+                }).map(item => {
+                    return item.center.map(item => {
+                        return item.replace('-', ',').split(',')
+                    })
+                })
+                console.log("fenceItem", fenceItem);
+                 // 绘制多边形围栏
+                this.map.polygon = new AMap.Polygon({
+                    map: this.map.instance,
+                    fillOpacity: 0.1,
+                    path: fenceItem
+                });
+            });
+            let circleItem = this.polyLnglAtList.filter(item => {
+                return item.length === 4;
+            });
+            let circleCenter = circleItem.map(item => {
+                return item
+            });
+            let circleCenterNew = circleCenter.map(item => {
+                return {
+                    id: item[2],
+                    radius: item[3],
+                    center: item.splice(0, item.length - 2),
+                }
+            });
+            this.fenceList.push(circleCenterNew);
+            // 绘制圆形围栏
+            this.polygonList = circleCenterNew.map((item, index) => {
+                this.map.polygonCircle = new AMap.Circle({
+                        center: item.center,
+                        radius: item.radius,
+                        borderWeight: 3,
+                        strokeColor: "red",
+                        strokeWeight: 6,
+                        strokeOpacity: 0.5,
+                        fillOpacity: 0.4,
+                        strokeStyle: 'dashed',
+                        strokeDasharray: [10, 10],
+                        fillColor: 'green',
+                        zIndex: 50,
+                });
+                this.polygonList.push(this.map.polygonCircle);
+                this.map.instance.add(this.map.polygonCircle);
+                return {
+                    id: item.id,
+                    content: this.map.polygonCircle
+                }
+            })
     },
     // 创建marker
     createMarker() {
@@ -135,7 +176,7 @@ export default {
         let center = this.map.center;
         this.map.marker = new AMap.Marker({
             position: center,
-            draggable:true,
+            draggable: true,
 
         });
         // 注册拖拽事件
@@ -146,47 +187,111 @@ export default {
     },
     // 拖拽marker
     computeMarker() {
-       /*  let point = this.map.marker.getPosition();
-        this.isPointInRing = AMap.GeometryUtil.isPointInRing(point, this.map.center); */
         let point = this.map.marker.getPosition();
-        console.log("point", point, typeof point);
         this.map.center = point.toString();
-        /* console.log("是否在多边形围栏内部::", this.isPointInRing ); */
-        // 判断一个坐标点是否在一个圆形内
-        this.isPointInRing = this.map.polygon.contains(point);
-        console.log("是否在圆形围栏内部", this.map.polygon.contains(point));
-        let divBox = document.createElement('span');
-        divBox.innerHTML = this.isPointInRing;
-        divBox.className = 'fence';
-        document.body.appendChild(divBox);
-        console.log("map-container", this.$refs.mapContainer);
-        }
+        let polygonCircleListMap = this.polygonList.map(item => {
+            return {
+                id: item.id,
+                content: item.content
+            };
+        });
+        // 大
+        let path1 = [
+           [ 113.105056, 23.04447],
+           [113.129805, 23.052107],
+           [113.14218, 23.01336],
+           [113.106867, 23.012665]
+        ];
+        // 小
+        let path2 = [
+            [113.102037,23.041415],
+            [113.137954,23.045997],
+            [113.142029,23.016554],
+            [113.121586,23.021351]
+        ];
+        this.gence.forEach(item => {
+                let fenceItem = this.gence.map(item => {
+                    return item;
+                }).map(item => {
+                    return {
+                        id: item.id,
+                        center: item.center.map(item => {
+                            return item.replace('-', ',').split(',')
+                        })
+                    }
+                })
+               this.checkIsPointInRing(fenceItem, polygonCircleListMap)
+        });
+
+    },
+    // 检查点是否在圆形围栏或者多边形围栏内
+    checkIsPointInRing(fenceList, circlePolygon) {
+        let point = this.map.marker.getPosition();
+        this.map.center = point.toString();
+        let fence;
+        let circle;
+        fence = fenceList.map(item => {
+            return {
+                id: item.id,
+                isPointInRing: AMap.GeometryUtil.isPointInRing(point, item.center)
+            };
+        })
+        console.log("fence", fence);
+        circle = circlePolygon.map(item => {
+                return {
+                    id: item.id,
+                    isPointInRing: item.content.contains(point)
+                };
+            })
+        this.reqList = [...fence, ...circle]
+        this.polyIdList = this.reqList.filter(item => {
+            return item.isPointInRing === true;
+        }).map(item => {
+            return item.id
+        });
+        console.log("reqList", this.reqList)
+
+    }
   }
 }
 </script>
 
 <style scoped lang="scss">
 #map {
-    height: 100%;
+    height: 100vh;
     width: 100%;
     z-index: 99;
     .tips {
-        height: 200px;
+        max-height: 20vh;
         width: 90%;
         padding: 5px;
         overflow: scroll;
-       /*  line-height: 80px; */
+        /*  line-height: 80px; */
         color: red;
         background: wheat;
         position: absolute;
-        top: 20px;
+        top: 1vh;
         left: 5%;
         text-align: center;
         font-size: 16px;
         z-index: 9999;
         p {
+            font-size: 12px;
             padding: 10px;
         }
     }
+    .id-container {
+        height: 40px;
+        width: 100%;
+        background-color: white;
+        overflow: scroll;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        span {
+            margin: 5px;
+        }
+    }
 }
 </style>