微信小程序 地图选取多边形【选中建筑物】

最近项目有个需求:
在微信小程序内置地图上渲染出给定的多个多边形的建筑物轮廓,并且在用户点选对应建筑物的时候,给出被选中建筑物的各种详情。
难点解析:地图点击的API会返回一个坐标点的经纬度,通过这个经纬度,遍历地图上已渲染出的多边形,判断在哪个多边形内
最后封装了一个方法,map.js见后面的源码,其他页面调用方法如下:

import MapUtil from '../util/map.js';
page({
...
onMapTaped(e){
	let point = {e.detail.latitude,e.detail.longitude} // 地图点击点的经纬度
	let polygon  = [{110.43, 30.33},{110.46, 30.43},{110.50,30.40}] //多边形
	let oneResult = MapUtil.isPointInPolygon(point,polygon)
}
})

以下是map.js 源码,只保留核心代码


var GeoUtils = {}


/**
 * 判断点是否多边形内
 * @param {Point} point 点对象 例如: {lng:114,lat:40}
 * @param {Object} polygon 多边形点的对象数组 例如: [{lng:114,lat:40},{lng:114.2,lat:40.1}]
 * @returns {Boolean} 点在多边形内返回true,否则返回false
 */
GeoUtils.isPointInPolygon = function(point, polygon) {
	if(!point || point.length<2) {
		console.error('坐标点格式错误')
		return false;
	}
	if(!polygon || polygon.length<4) {
		console.error('多边形格式错误')
		return false;
	}

	var pts = JSON.parse(JSON.stringify(polygon));
	//下述代码来源:http://paulbourke.net/geometry/insidepoly/,进行了部分修改
	//基本思想是利用射线法,计算射线与多边形各边的交点,如果是偶数,则点在多边形外,否则
	//在多边形内。还会考虑一些特殊情况,如点在多边形顶点上,点在多边形边上等特殊情况。

	var boundOrVertex = true; //如果点位于多边形的顶点或边上,也算做点在多边形内,直接返回true
	var intersectCount = 0; //cross points count of x
	var precision = 2e-10; //浮点类型计算时候与0比较时候的容差
	var p1, p2; //neighbour bound vertices
	var p = point; //测试点
	var N = pts.length;

	p1 = pts[0]; //left vertex
	for (var i = 1; i <= N; ++i) { //check all rays
		if (p.lat == p1.lat && p.lng ==p1.lng) {
			return boundOrVertex; //p is an vertex
		}

		p2 = pts[i % N]; //right vertex
		if (p.lat < Math.min(p1.lat, p2.lat) || p.lat > Math.max(p1.lat, p2.lat)) { //ray is outside of our interests
			p1 = p2;
			continue; //next ray left point
		}

		if (p.lat > Math.min(p1.lat, p2.lat) && p.lat < Math.max(p1.lat, p2.lat)) { //ray is crossing over by the algorithm (common part of)
			if (p.lng <= Math.max(p1.lng, p2.lng)) { //x is before of ray
				if (p1.lat == p2.lat && p.lng >= Math.min(p1.lng, p2.lng)) { //overlies on a horizontal ray
					return boundOrVertex;
				}

				if (p1.lng == p2.lng) { //ray is vertical
					if (p1.lng == p.lng) { //overlies on a vertical ray
						return boundOrVertex;
					} else { //before ray
						++intersectCount;
					}
				} else { //cross point on the left side
					var xinters = (p.lat - p1.lat) * (p2.lng - p1.lng) / (p2.lat - p1.lat) + p1.lng; //cross point of lng
					if (Math.abs(p.lng - xinters) < precision) { //overlies on a ray
						return boundOrVertex;
					}

					if (p.lng < xinters) { //before ray
						++intersectCount;
					}
				}
			}
		} else { //special case when ray is crossing through the vertex
			if (p.lat == p2.lat && p.lng <= p2.lng) { //p crossing over p2
				var p3 = pts[(i + 1) % N]; //next vertex
				if (p.lat >= Math.min(p1.lat, p3.lat) && p.lat <= Math.max(p1.lat, p3.lat)) { //p.lat lies between p1.lat & p3.lat
					++intersectCount;
				} else {
					intersectCount += 2;
				}
			}
		}
		p1 = p2; //next ray left point
	}

	if (intersectCount % 2 == 0) { //偶数在多边形外
		return false;
	} else { //奇数在多边形内
		return true;
	}
}

/**
 * 将度转化为弧度
 * @param {degree} Number 度
 * @returns {Number} 弧度
 */
let degreeToRad = function(degree) {
	return Math.PI * degree / 180;
}

/**
 * 将弧度转化为度
 * @param {radian} Number 弧度
 * @returns {Number} 度
 */
let radToDegree = function(rad) {
	return (180 * rad) / Math.PI;
}

/**
 * 将v值限定在a,b之间,纬度使用
 */
function _getRange(v, a, b) {
	if (a != null) {
		v = Math.max(v, a);
	}
	if (b != null) {
		v = Math.min(v, b);
	}
	return v;
}

/**
 * 将v值限定在a,b之间,经度使用
 */
function _getLoop(v, a, b) {
	while (v > b) {
		v -= b - a
	}
	while (v < a) {
		v += b - a
	}
	return v;
}

/**
 * 计算两点之间的距离,两点坐标必须为经纬度
 * @param {point1} Point 点对象
 * @param {point2} Point 点对象
 * @returns {Number} 两点之间距离,单位为米
 */
let getDistance = function(point1, point2) {
	//判断类型

	point1.lng = _getLoop(point1.lng, -180, 180);
	point1.lat = _getRange(point1.lat, -74, 74);
	point2.lng = _getLoop(point2.lng, -180, 180);
	point2.lat = _getRange(point2.lat, -74, 74);

	var x1, x2, y1, y2;
	x1 = degreeToRad(point1.lng);
	y1 = degreeToRad(point1.lat);
	x2 = degreeToRad(point2.lng);
	y2 = degreeToRad(point2.lat);

	return EARTHRADIUS * Math.acos((Math.sin(y1) * Math.sin(y2) + Math.cos(y1) * Math.cos(y2) * Math.cos(x2 - x1)));
}

module.exports = {
	GeoUtils
}

  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值