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