微信小程序 地圖選取多邊形【選中建築物】

最近項目有個需求:
在微信小程序內置地圖上渲染出給定的多個多邊形的建築物輪廓,並且在用戶點選對應建築物的時候,給出被選中建築物的各種詳情。
難點解析:地圖點擊的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
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章