增加 判断圆形是否与圆形的交集

src/views/gaode-demo/PointInRing.vue

@@ -39,6 +39,13 @@ export default {
 
        ],
        polyIdList: '', //点在围栏内的围栏id
+       circlePolygon: {
+           center: '',
+           radius: '',
+       },
+       fence: '',
+       circle: '',
+       currentCircle: ''
 
 
    }
@@ -79,6 +86,8 @@ export default {
                 this.createPolygon();
                 this.createMarker();
                 this.computeMarker();
+                this.createCircle();
+                this.computeCircle();
             },
             e => {
                 console.log("加载地图失败，下面是报错数据");
@@ -91,11 +100,15 @@ export default {
     getParams() {
         if( isNotNull(this.$route.query) ) {
             let params = this.$route.query;
-            this.map.center = params.center.split(',');
+            let centerList = params.center.split(',');
+            this.map.center = params.center.split(',').slice(0, 2);
+            this.circlePolygon.center = params.center.split(',').slice(0, 2);
+            this.circlePolygon.radius = Number(params.center.split(',').slice(2, 3)[0]);
+            console.log("center", this.map.center);
+            console.log("this.circlePolygon.radius", this.circlePolygon.radius);
             this.polyLnglAtList = params.polygon.split(';').map(item => {
                 return item.split(',');
             });
-
         }
     },
     // 创建围栏
@@ -160,7 +173,9 @@ export default {
                 this.map.instance.add(this.map.polygonCircle);
                 return {
                     id: item.id,
-                    content: this.map.polygonCircle
+                    content: this.map.polygonCircle,
+                    /* radius: item.radius,
+                    center: item.center */
                 }
             })
     },
@@ -185,16 +200,68 @@ export default {
         this.map.instance.setCenter(center);
         this.isShowTips = true;
     },
+    // 创建圆形
+    createCircle() {
+        console.log("this.map.center", this.map.center);
+        this.currentCircle =  new AMap.Circle({
+            center: this.circlePolygon.center,
+            radius: this.circlePolygon.radius,
+            borderWeight: 3,
+            strokeColor: "red",
+            strokeWeight: 6,
+            strokeOpacity: 0.5,
+            fillOpacity: 0.4,
+            strokeStyle: 'dashed',
+            strokeDasharray: [10, 10],
+            fillColor: 'red',
+            draggable: true,
+        });
+        this.map.instance.add(this.currentCircle);
+        this.currentCircle.on('dragging', this.computeCircle);
+
+    },
+    // 推拽圆
+    computeCircle() {
+        let point = this.currentCircle.getCenter();
+        this.circlePolygon.center = point;
+        /* console.log("circleCenter", circleCenter); */
+        let polygonCircleListMap = this.polygonList.map(item => {
+            return {
+                id: item.id,
+                content: item.content,
+                /* center: item.center,
+                radius: item.radius */
+            };
+        });
+         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)
+        });
+    },
     // 拖拽marker
     computeMarker() {
         let point = this.map.marker.getPosition();
-        this.map.center = point.toString();
+        this.map.center = point.toString().split(',');
+        /* console.log("circleCenter", circleCenter); */
         let polygonCircleListMap = this.polygonList.map(item => {
             return {
                 id: item.id,
-                content: item.content
+                content: item.content,
+                /* center: item.center,
+                radius: item.radius */
             };
         });
+        console.log("this.polygonList", this.polygonList);
+        console.log("polygonCircleListMap", polygonCircleListMap);
         // 大
         let path1 = [
            [ 113.105056, 23.04447],
@@ -228,29 +295,72 @@ export default {
     checkIsPointInRing(fenceList, circlePolygon) {
         let point = this.map.marker.getPosition();
         this.map.center = point.toString();
-        let fence;
-        let circle;
-        fence = fenceList.map(item => {
+        this.fence = fenceList.map(item => {
             return {
                 id: item.id,
-                isPointInRing: AMap.GeometryUtil.isPointInRing(point, item.center)
+                isPointInRing: AMap.GeometryUtil.isPointInRing(point, item.center),
+               /*  lngLat: item.center */
             };
         })
-        console.log("fence", fence);
-        circle = circlePolygon.map(item => {
+        console.log("this.fence", this.fence);
+        this.circle = circlePolygon.map(item => {
                 return {
                     id: item.id,
-                    isPointInRing: item.content.contains(point)
+                    isPointInRing: item.content.contains(point),
                 };
             })
-        this.reqList = [...fence, ...circle]
+        this.reqList = [...this.fence, ...this.circle]
         this.polyIdList = this.reqList.filter(item => {
             return item.isPointInRing === true;
         }).map(item => {
             return item.id
         });
+        let isPointInPolygon = this.reqList.some(item => {
+            return item.isPointInRing === true;
+        });
+        // 如果不存在，再通过算法判断
+        if(!isPointInPolygon) {
+            this.checkPointInPolygon();
+        }
         console.log("reqList", this.reqList)
+    },
+    // 判断该点是否有一个在围栏内，如果有就正常返回，如果没有则创建一个圆形，通过圆形点到线段，两点之间距离分别判断是否跟多边形，圆形相交
+    checkPointInPolygon() {
+        // 1. 首先判断是否有圆形围栏，有通过计算两点之间距离判断是否交集，没有则下一步对比多边形围栏
+        if(this.circle.length > 0 || this.fence.length > 0) {
+            /* let mapCenter = this.map.center.split(',');
+            let mapRadius = Number(this.map.radius); */
+            let circleCenter = this.circlePolygon.center;
+            let circleRadius =Number(this.circlePolygon.radius);
+            // 获取圆形围栏的半径（radius）,中心点（center）
+            this.polygonList.forEach(item => {
+                let center = item.content.getCenter();
+                let radius = item.content.getRadius();
+                /* let markerDistance = this.calculateDRealistance(mapCenter, center, mapRadius, radius); */
+                let circleDistance = this.calculateDRealistance(circleCenter, center, circleRadius, radius);
+              /*   console.log("markerDistance", markerDistance); */
+                console.log("circleDistance", circleDistance);
+            });
+            console.log("fenceList",  this.fenceList[0]);
+            if(this.fenceList[0].length > 0) {
+                let fenceLngLat = this.fenceList[0].map(item => {
+                    return item.center;
+                }).map(item => {
+                    return item.map(item => {
+                        return item.replace('-', ',').split(',');
+                    })
+                });
+                // 循环多边形围栏数组, 得到点到 线段 所需的数据
+                fenceLngLat.forEach(item => {
 
+                })
+                console.log("fenceLngLat", fenceLngLat);
+            }
+        }
+    },
+    // 计算两点之间的实际距离
+    calculateDRealistance(point1, point2, radius1, radius2) {
+        return Math.round(AMap.GeometryUtil.distance(point1, point2)) - Math.round(radius1 + radius2);
     }
   }
 }