uniapp小程序地图电子围栏根据当前点的经纬度判断是否在多边形电子围栏范围内

原理参考链接
js如何判断地图上一个点在多边形内
uniapp实现电子围栏

该方法存在缺陷建议使用Turf.js

<map class="my_map" id="myMap" show-location :latitude="latitude" :longitude="longitude" :markers="markers"
	:scale="mapScale" @regionchange="regionChange" @begin="begin" @end="end" @updated="mapUpDate"
	:subkey="null" :polygons="polygons">
</map>
data() {
	return {
		polygons: [
			{
				points: [{
						latitude: 29.600936,
						longitude: 106.513925,
					},
					{
						latitude: 29.601398,
						longitude: 106.515609
					},
					{
						latitude: 29.600997,
						longitude: 106.51724
					},
					{
						latitude: 29.602219,
						longitude: 106.517466
					},
					{
						latitude: 29.602121,
						longitude: 106.515524
					},
					{
						latitude: 29.60103,
						longitude: 106.513914
					},
				],
				strokeColor: "#FD302F",
				strokeWidth: 2,
				fillColor: "green"
			}
		], // 通过后端请求电子围栏经纬度集合
	}
}				
// 拖动地图后获取当前中心点的地图坐标
getCenterLoaction() {
	this.mapCtx.getCenterLocation({
		success: res => {
			// 更新地址信息
			// 如果存在多个电子围栏则去遍历该方法,判断是否在电子围栏范围内
			const isArea = this.isPointInPolygon(res.longitude, res.latitude, this.polygons[0].points)
			console.log('是否在电子围栏范围内', isArea)
			
		}
	});
},
// 判断点是否在多边形范围内
isPointInPolygon(lng, lat, polygon) {
	console.log(polygon)
	var cnt = 0;
	for (var i = 0; i < polygon.length; i++) {
		const g = lng;
		const t = lat;
		const p1g = polygon[i].longitude;
		const p1t = polygon[i].latitude;
		const p2g = polygon[i === polygon.length - 1 ? 0 : i + 1].longitude;
		const p2t = polygon[i === polygon.length - 1 ? 0 : i + 1].latitude;
		const ming = Math.min(p1g, p2g);
		const maxg = Math.max(p1g, p2g);
		const mint = Math.min(p1t, p2t);
		const maxt = Math.max(p1t, p2t);
		if ((mint <= t && t <= maxt && ming <= g) && (maxg <= g || (p2g + (p1g - p2g) * ((t - p2t) / (p1t -
				p2t)) < g))) {
			cnt++
		}
	}
	return cnt % 2 === 1;
},
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值