- 增加 圆形围栏判断 一个点是否在圆形围栏内

README.md

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-01-19 10:08:58
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-05-10 11:09:08
+ * @LastEditTime: 2022-05-10 15:45:40
  * @FilePath: \AntpayFrontEnd\README.md
  * @description: 项目说明文档
 -->
@@ -97,4 +97,5 @@ feature
 `2022.05.10`
 feature
 - 增加 一个高德demo 判断一个点是否在一个多边形围栏内
-- 增加 引入高德地图api
+- 增加 引入高德地图api
+- 增加 圆形围栏判断 一个点是否在圆形围栏内

src/views/gaode-demo/PointInRing.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="map">
-        <div class="tips">
+        <div class="tips" v-if="isShowTips">
             <p>{{this.tips}}</p>
         </div>
     </div>
@@ -8,6 +8,7 @@
 
 <script>
 import MapLoader from '@/config/map';
+import { isNotNull } from "@/utils/index";
 export default {
   name:'point-in-ring',
   data(){
@@ -15,18 +16,15 @@ export default {
        map: {
            instance: null,
            zoom: 13,
-           center: [113.121586,23.021351], //
+           center: '' /* || [113.121586,23.021351] */, //
            marker: null,
            polygon: null,
+           radius: '',
        }, //创建地图参数
-       polyLnglAtList: [
-           [113.102037, 23.041415],
-           [113.137954, 23.045997],
-           [113.142029, 23.016554],
-           [113.105961, 23.014332]
-       ], //绘制多边形围栏数据数组
+       polyLnglAtList: '', //绘制多边形围栏数据数组
 
        isPointInRing: null, //是否在围栏内
+       isShowTips: false, //是否显示tips, 默认false，等到围栏加载完才显示
    }
   },
   computed: {
@@ -36,13 +34,9 @@ export default {
   },
   created() {
     this.getMap();
+    this.getParams();
   },
   mounted() {
-      setTimeout(() => {
-        this.createPolygon();
-        this.createMarker();
-        this.computeMarker();
-      }, 2000)
   },
   methods: {
     //   getMap 创建地图
@@ -66,6 +60,9 @@ export default {
                 });
                 const toolBar = new AMap.ToolBar({ offset: new AMap.Pixel(10, 310), position: 'LT' });
                 this.map.instance.addControl(toolBar);
+                this.createPolygon();
+                this.createMarker();
+                this.computeMarker();
             },
             e => {
                 console.log("加载地图失败，下面是报错数据");
@@ -74,13 +71,49 @@ export default {
         )
 
     },
+    // 获取url的参数
+    getParams() {
+        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() {
-        this.map.polygon = new AMap.Polygon({
-            map: this.map.instance,
-            fillOpacity: 0.1,
-            path: this.polyLnglAtList
-        });
+        // 圆形围栏 只有一组坐标
+        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
+            });
+        }
     },
     // 创建marker
     createMarker() {
@@ -101,34 +134,39 @@ export default {
         this.map.marker.on('dragging', this.computeMarker);
         this.map.instance.add(this.map.marker);
         this.map.instance.setCenter(center);
+        this.isShowTips = true;
     },
     // 拖拽marker
     computeMarker() {
+       /*  let point = this.map.marker.getPosition();
+        this.isPointInRing = AMap.GeometryUtil.isPointInRing(point, this.map.center); */
         let point = this.map.marker.getPosition();
-        this.isPointInRing = AMap.GeometryUtil.isPointInRing(point, this.polyLnglAtList);
-        console.log("是否在围栏内部::", this.isPointInRing );
+        /* console.log("是否在多边形围栏内部::", this.isPointInRing ); */
+        // 判断一个坐标点是否在一个圆形内
+         this.isPointInRing = this.map.polygon.contains(point);
+        console.log("是否在圆形围栏内部", this.map.polygon.contains(point));
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
-    #map {
-        height:100%;
-        width: 100%;
-        z-index: 99;
-        .tips {
-            height: 80px;
-            width: 150px;
-            line-height: 80px;
-            color: red;
-            background: wheat;
-            position: absolute;
-            top: 20px;
-            left: 20%;
-            text-align: center;
-            font-size: 16px;
-            z-index: 9999;
-        }
+#map {
+    height: 100%;
+    width: 100%;
+    z-index: 99;
+    .tips {
+        height: 80px;
+        width: 40%;
+        line-height: 80px;
+        color: red;
+        background: wheat;
+        position: absolute;
+        top: 20px;
+        left: 10%;
+        text-align: center;
+        font-size: 16px;
+        z-index: 9999;
     }
+}
 </style>