diff --git a/README.md b/README.md index e489f52..dff20c9 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ @@ -105,4 +105,13 @@ feature ### v1.0.5 `2022.05.11` feature -- 增加 多页面配置 \ No newline at end of file +- 增加 多页面配置 + + +### v1.0.6 +`2022.05.23` +ci +- 删除 多页面配置 + +feature +- 增加 一个判断点是否在多个围栏单页面 \ No newline at end of file diff --git a/src/config/models.js b/src/config/models.js index 9320332..3043217 100644 --- a/src/config/models.js +++ b/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/', diff --git a/src/views/gaode-demo/PointInRing.vue b/src/views/gaode-demo/PointInRing.vue index 2779c10..4e93049 100644 --- a/src/views/gaode-demo/PointInRing.vue +++ b/src/views/gaode-demo/PointInRing.vue @@ -1,11 +1,13 @@ @@ -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) + + } } }