JS实现leafelt实现筛选多边形、缓冲区内的点位

问:筛选多边形、缓冲区内的点总共分几步?
答:三步。一、绘制点位。二、绘制多边形、缓冲区。三、用多边形、缓冲区选择点位。(笑)
本次实验分为筛选多边形内的点和筛选缓冲区内的点两部分

筛选多边形内的点

			/**写在前面,本方法来自大佬,最初出处没找出来,做了部分修改,**/
			//ALat为待筛选点位纬度,ALon为待筛选点位经度
			//APoints为多边形点位数组
			function IsPtInPoly(ALat, ALon, APoints) {
				if (APoints.length < 3) return false;
				var iSum = 0,
					iCount = APoints.length;
				var dLon1, dLon2, dLat1, dLat2, dLon;
				var bool = false;
				/**判断是否是顶点,如果是顶点则直接返回**/
				for (var i = 0; i < iCount; i++) {
					dLon1 = APoints[i][1];
					dLat1 = APoints[i][0];
					if (ALon == dLon1 && ALat == dLat1) {
						bool = true;
					}
				}
				if (bool) {
					return bool;
				}
				/**判断顶点结束**/

				for (var i = 0; i < iCount; i++) {
					if (i == iCount - 1) {
						dLon1 = APoints[i][1];
						dLat1 = APoints[i][0];
						dLon2 = APoints[0][1];
						dLat2 = APoints[0][0];
					} else {
						dLon1 = APoints[i][1];
						dLat1 = APoints[i][0];
						dLon2 = APoints[i + 1][1];
						dLat2 = APoints[i + 1][0];
					}
					//以下语句判断A点是否在边的两端点的水平平行线之间,在则可能有交点,开始判断交点是否在左射线上
					if (((ALat >= dLat1) && (ALat < dLat2)) || ((ALat >= dLat2) && (ALat < dLat1))) {
						if (Math.abs(dLat1 - dLat2) > 0) {
							//得到 A点向左射线与边的交点的x坐标:
							dLon = dLon1 - ((dLon1 - dLon2) * (dLat1 - ALat)) / (dLat1 - dLat2);
							if (dLon < ALon)
								iSum++;
						}
					}
				}
				if (iSum % 2 != 0)
					bool = true;
				return bool;
			}

筛选缓冲区内的点

  • 局限性:待筛选点位和用来筛选的缓冲区都必须是GeoJSON格式,在项目中需要多进行一步转换,暂时没有发现其他的好方法来代替,如有大佬请指教一二。
    首先依旧是万年不变的引入js、css环节,需要用到turf.js和leaflet.pip.js。
		<script src="./js/leaflet-pip.min.js"></script>
		<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"/>
		<script type="text/javascript" src="js/leaflet.js"></script>
		<script type="text/javascript" src="js/turf.min.js"></script>

方法直接使用leaflet.pip插件中的pointsInPolygon()方法

//pointLay为缓冲区geoJSON,results存储筛选结果
pointLay.eachLayer(function(l){
					results = leafletPip.pointsInPolygon(points,l);
				});

PS:其实说白了,缓冲区也可以当作一个多边形,取出该geoJSON每个结点的坐标,使用上面的方法也可以,不过数据量可能会比较大,可能降低浏览器运行效率,视情况而定。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值