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

时间：2025-04-02 16:59:18

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

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

以下是 源码，只保留核心代码


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
 */
 = function(point, polygon) {
	if(!point || <2) {
		('坐标点格式错误')
		return false;
	}
	if(!polygon || <4) {
		('多边形格式错误')
		return false;
	}

	var pts = ((polygon));
	//下述代码来源：/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 = ;

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

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

		if ( > (, ) &&  < (, )) { //ray is crossing over by the algorithm (common part of)
			if ( <= (, )) { //x is before of ray
				if ( ==  &&  >= (, )) { //overlies on a horizontal ray
					return boundOrVertex;
				}

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

					if ( < xinters) { //before ray
						++intersectCount;
					}
				}
			}
		} else { //special case when ray is crossing through the vertex
			if ( ==  &&  <= ) { //p crossing over p2
				var p3 = pts[(i + 1) % N]; //next vertex
				if ( >= (, ) &&  <= (, )) { // lies between  & 
					++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  * degree / 180;
}

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

/**
 * 将v值限定在a,b之间，纬度使用
 */
function _getRange(v, a, b) {
	if (a != null) {
		v = (v, a);
	}
	if (b != null) {
		v = (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) {
	//判断类型

	 = _getLoop(, -180, 180);
	 = _getRange(, -74, 74);
	 = _getLoop(, -180, 180);
	 = _getRange(, -74, 74);

	var x1, x2, y1, y2;
	x1 = degreeToRad();
	y1 = degreeToRad();
	x2 = degreeToRad();
	y2 = degreeToRad();

	return EARTHRADIUS * (((y1) * (y2) + (y1) * (y2) * (x2 - x1)));
}

 = {
	GeoUtils
}

相关文章