diff --git a/src/views/gaode-demo/PointInRing.vue b/src/views/gaode-demo/PointInRing.vue index 4e93049..4d93c9d 100644 --- a/src/views/gaode-demo/PointInRing.vue +++ b/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); } } }