百度地圖WEB端判斷用戶是否在網格範圍內

時間 2019-11-07

標籤百度地圖 web 判斷用戶是否網格範圍內欄目 HTML 简体版

原文原文鏈接

在pc端設置商家的配送範圍，用戶在下單時，根據用戶設置的配送地點判斷是否在可配送範圍內，並給用戶相應的提示。javascript

下面說下個人實現思路：css

1.用百度地圖在PC端設置配送範圍，可拖拽選擇html

2.根據用戶設置的配送地址判斷是否在配送範圍內java

1、百度地圖PC端獲取範圍數據庫

改動百度地圖官網的demo，設置配送範圍。json

思路：獲取多邊形的頂點，以json的形式保存到數據庫。後端

百度API關於多邊形覆蓋物：api

構造函數：數組

Polygon(points:Array[, opts:PolygonOptions]) 建立多邊形覆蓋物ide

方法：

setPath(path:Array) none 設置多邊型的點數組（自1.2新增）getPath() Array 返回多邊型的點數組（自1.2新增）

實現：

//設置配送範圍
function setRange(_point, _ppoints) {
    var polygon = new BMap.Polygon(_ppoints, {
        strokeColor: "blue",
        strokeWeight: 2,
        strokeOpacity: 0.5
    }); //建立多邊形
    map.addOverlay(polygon); //增長多邊形
    polygon.enableEditing(); //容許編輯
    polygon.addEventListener("lineupdate",
    function(e) {
        var rangeArr = polygon.getPath();
        $("#distributeRange").val(JSON.stringify(rangeArr));
    });
}複製代碼

以上代碼主要是監聽 lineupdate 事件，每一次拖拽百度地圖回調函數將返回的多邊形的頂點，而後經過JSON.stringify方法轉爲string類型存在一個標籤裏面，以待後續的表單提交操做。

2、判斷點是否在範圍內

去網上看了一下，判斷點是否在配送範圍內的方法不少，大概採用的是射線法。可是有一些方法沒有考慮全面，致使有的狀況判斷不夠準確。在百度地圖的GeoUtils裏面找到了「判斷點是否多邊形內」這個方法。由於我是須要在後端作判斷，而後直接把js轉化成了java，測試百發百中，欣喜！（後面附上測試方法）

/**
* 判斷點是否在多邊形內
* @param point 檢測點
* @param pts 多邊形的頂點
* @return 點在多邊形內返回true,不然返回false
*/
public static boolean IsPtInPoly(Point2D.Double point, List < Point2D.Double > pts) {
    int N = pts.size();
    boolean boundOrVertex = true; //若是點位於多邊形的頂點或邊上，也算作點在多邊形內，直接返回true
    int intersectCount = 0; //cross points count of x
    double precision = 2e-10; //浮點類型計算時候與0比較時候的容差
    Point2D.Double p1,
    p2; //neighbour bound vertices
    Point2D.Double p = point; //當前點
    p1 = pts.get(0); //left vertex
    for (int i = 1; i <= N; ++i) { //check all rays
        if (p.equals(p1)) {
            return boundOrVertex; //p is an vertex
        }
        p2 = pts.get(i % N); //right vertex
        if (p.x < Math.min(p1.x, p2.x) || p.x > Math.max(p1.x, p2.x)) { //ray is outside of our interests
            p1 = p2;
            continue; //next ray left point
        }
        if (p.x > Math.min(p1.x, p2.x) && p.x < Math.max(p1.x, p2.x)) { //ray is crossing over by the algorithm (common part of)
            if (p.y <= Math.max(p1.y, p2.y)) { //x is before of ray
                if (p1.x == p2.x && p.y >= Math.min(p1.y, p2.y)) { //overlies on a horizontal ray
                    return boundOrVertex;
                }
                if (p1.y == p2.y) { //ray is vertical
                    if (p1.y == p.y) { //overlies on a vertical ray
                        return boundOrVertex;
                    } else { //before ray
                        ++intersectCount;
                    }
                } else { //cross point on the left side
                    double xinters = (p.x - p1.x) * (p2.y - p1.y) / (p2.x - p1.x) + p1.y; //cross point of y
                    if (Math.abs(p.y - xinters) < precision) { //overlies on a ray
                        return boundOrVertex;
                    }
                    if (p.y < xinters) { //before ray
                        ++intersectCount;
                    }
                }
            }
        } else { //special case when ray is crossing through the vertex
            if (p.x == p2.x && p.y <= p2.y) { //p crossing over p2
                Point2D.Double p3 = pts.get((i + 1) % N); //next vertex
                if (p.x >= Math.min(p1.x, p3.x) && p.x <= Math.max(p1.x, p3.x)) { //p.x lies between p1.x & p3.x
                    ++intersectCount;
                } else {
                    intersectCount += 2;
                }
            }
        }
        p1 = p2; //next ray left point
    }
    if (intersectCount % 2 == 0) { //偶數在多邊形外
        return false;
    } else { //奇數在多邊形內
        return true;
    }
}複製代碼

主要是判斷和這個方法的可行性。

爲此寫了個測試方法。

思路：獲取一個多邊形的頂點，而後隨機點一個點

1.調用百度地圖的方法，判斷該點是否在範圍內2.根據百度地圖獲取的那個店的經緯度，本身程序判斷是否在範圍內

調用百度地圖的方法：

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<title>GeoUtils示例</title>
<script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>
<script src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js" type="text/javascript"></script>
<style type="text/css">
    table {
      font-size: 14px;
    }
</style>
</head>
<body>
<div id="container" style="float:left;width:600px;height:500px;border:1px solid gray">
</div>
<div id="control" style="float:left;width:300px;height:500px;border:1px solid gray">
    <table style="width:100%;">
    <tr>
        <td colspan="2">
            判斷點是否在多邊形內:
        </td>
    </tr>
    <tr>
        <td>
            <input onclick="polygon1()" type="button" value="多邊形1"/>
        </td>
    </tr>
    <tr>
        <td>
            <input onclick="polygon2()" type="button" value="多邊形2"/>
        </td>
    </tr>
    <tr>
        <td>
            經度<input id="lng" type="text" value="">
        </td>
    </tr>
    <tr>
        <td>
            緯度<input id="lat" type="text" value="">
        </td>
    </tr>
    <tr>
        <td>
            結果：
        </td>
    </tr>
    <tr>
        <td>
            <p id="result" style="color:red">
            </p>
        </td>
    </tr>
    <table>
</div>
</body>
</html>
<script type="text/javascript">
  var map = new BMap.Map('container')
  var pt = new BMap.Point(116.404, 39.915)
  var mkr = new BMap.Marker(pt)
  var ply //多邊形
  map.centerAndZoom(pt, 16)
  map.enableScrollWheelZoom() //開啓滾動縮放
  map.enableContinuousZoom() //開啓縮放平滑
  //初始化爲多邊形1
  polygon1()
  //生成多邊形1
  function polygon1 () {
    var pts = []
    var pt1 = new BMap.Point(116.395, 39.910)
    var pt2 = new BMap.Point(116.394, 39.914)
    var pt3 = new BMap.Point(116.403, 39.920)
    var pt4 = new BMap.Point(116.402, 39.914)
    var pt5 = new BMap.Point(116.410, 39.913)
    pts.push(pt1)
    pts.push(pt2)
    pts.push(pt3)
    pts.push(pt4)
    pts.push(pt5)
    ply = new BMap.Polygon(pts)
//演示：將面添加到地圖上
    map.clearOverlays()
    map.addOverlay(ply)
  }
  //生成多邊形2
  function polygon2 () {
    var pts = []
    var pt1 = new BMap.Point(116.395, 39.910)
    var pt2 = new BMap.Point(116.394, 39.914)
    var pt3 = new BMap.Point(116.396, 39.919)
    var pt4 = new BMap.Point(116.406, 39.920)
    var pt5 = new BMap.Point(116.410, 39.913)
    pts.push(pt1)
    pts.push(pt2)
    pts.push(pt3)
    pts.push(pt4)
    pts.push(pt5)
    ply = new BMap.Polygon(pts)
//演示：將多邊形添加到地圖上
    map.clearOverlays()
    map.addOverlay(ply)
  }
  map.addEventListener('click', function (e) {
    mkr.setPosition(e.point)
    map.addOverlay(mkr)
//將點擊的點的座標顯示在頁面上
    document.getElementById('lng').value = e.point.lng
    document.getElementById('lat').value = e.point.lat
    InOrOutPolygon(e.point.lng, e.point.lat)
  })
  function InOrOutPolygon (lng, lat) {
    var pt = new BMap.Point(lng, lat)
    var result = BMapLib.GeoUtils.isPointInPolygon(pt, ply)
    if (result == true) {
      document.getElementById('result').innerHTML = '點在多邊形內'
    } else {
      document.getElementById('result').innerHTML = '點在多邊形外'
    }
  }
</script>複製代碼

界面以下：

在頁面上點擊一個點後，獲取了該點的座標（用於本身的方法測試），並調用了 InOrOutPolygon 來判斷了該店是否在此範圍內。

後臺的測試方法：

// 測試一個點是否在多邊形內
public static void main(String[] args) {
    Point2D.Double point = new Point2D.Double(116.404072, 39.916605);
    List<Point2D.Double> pts = new ArrayList<Point2D.Double>();
    pts.add(new Point2D.Double(116.395, 39.910));
    pts.add(new Point2D.Double(116.394, 39.914));
    pts.add(new Point2D.Double(116.403, 39.920));
    pts.add(new Point2D.Double(116.402, 39.914));
    pts.add(new Point2D.Double(116.410, 39.913));
    if (IsPtInPoly(point, pts)) {
        System.out.println("點在多邊形內");
    } else {
        System.out.println("點在多邊形外");
    }
}複製代碼

通過測試，結果滿意。

總結，實現的過程最重要是保存那些頂點，並根據那些保存的頂點（有必定的順序），來判斷一個點是否在這些頂點圍成的多邊形內。

感受百度地圖仍是很好用的。API很全，並且都配有demo，很是利於咱們開發者。