【无标题】小程序map之判断一个点在多边形区域内

最新推荐文章于 2023-12-14 18:10:37 发布

a、筱峰

最新推荐文章于 2023-12-14 18:10:37 发布

阅读量698

点赞数 4

分类专栏： js 文章标签：小程序 css3 css

本文链接：https://blog.csdn.net/weixin_44139734/article/details/125165166

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、创建地图

<map id="mapId" polygons="{{polygons}}" class="map" latitude="{{latitude}}" longitude="{{longitude}}" show-location markers="{{markers}}" style="width:97%;height:200px;margin:10rpx  auto 200rpx;"  bindcallouttap="onCalloutTap"></map>

2、在地图中圈出指定区域

 polygons: [{
            fillColor: "#F2D7BC99",//这里面设置透明度 后面加数字代表透明度
            strokeColor: "#FFF",
            dashArray: [10, 10],
            // fillColor:'#bfbfbf',
            strokeColor: '#FF0000',
            strokeWidth: 7,
            points: [{ latitude: , longitude:  },
            { latitude: , longitude:  },
            { latitude: , longitude:  },
            { latitude: , longitude:  },
            ],
        }],

3、判断点是否在区域内方法

 //我这里用的 x 来判断 x1<x<x2  用y来判断相交的点位数  实际上效果一样
    //point为选取的点坐标， polygon为多边形的点坐标数组
    isPointInPolygon(aLat, aLon, pointList){
   
        
            /* 
            :param aLon: double 经度 
            :param aLat: double 纬度 
            :param pointList: list [{latitude: 22.22, longitude: 113.113}...] 多边形点的顺序需根据顺时针或逆时针，不能乱 
            */
            var iSum = 0  
            var iCount = pointList.length
              
            if(iCount < 3) {
                return false 
            }
            //  待判断的点(x, y) 为已知值
            var y = aLat
            var x = aLon
            for(var i = 0; i < iCount; i++) {
                var y1 = pointList[i].latitude  
                var x1 = pointList[i].longitude
                if(i == iCount - 1) {
                    var y2 = pointList[0].latitude
                    var x2 = pointList[0].longitude
                } else {
                    var y2 = pointList[i + 1].latitude  
                    var x2 = pointList[i + 1].longitude
                }
                // 当前边的 2 个端点分别为 已知值(x1, y1), (x2, y2)
                if (((y >= y1) && (y < y2)) || ((y >= y2) && (y < y1))) {
                    //  y 界于 y1 和 y2 之间
                    //  假设过待判断点(x, y)的水平直线和当前边的交点为(x_intersect, y_intersect)，有y_intersect = y
                    // 则有（2个相似三角形，公用顶角，宽/宽 = 高/高）：|x1 - x2| / |x1 - x_intersect| = |y1 - y2| / |y1 - y|
                    if (Math.abs(y1 - y2) > 0) {
                        var x_intersect = x1 - ((x1 - x2) * (y1 - y)) / (y1 - y2);  
                        if(x_intersect < x) {
                            iSum += 1 
                        }
                    }
                } 
            }
            if(iSum % 2 != 0) { //true就是在
                return true  
            }else { //false就是不在
                return false 
            }  
          },