天天看點

百度地圖js中地理圍欄算法bug

本人近期因為項目需要,嘗試把百度的js地理圍欄算法改成java實作,測試過程中發現有bug存在,一開始以為是轉換過程中出現了問題,後來測試了原生js,發現問題确實存在。此處demo我參照了網上的示例原demo,後來我将測試資料稍微變更便發現了問題。

測試代碼:

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>GeoUtils示例</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
    <style type="text/css">
    table {
        font-size: 14px;
    }
    </style>
</head>

<body>
    <div style="float:left;width:600px;height:500px;border:1px solid gray" id="container"></div>
    <div style="float:left;width:300px;height:500px;border:1px solid gray" id="control">
        <table style="width:100%;">
            <tr>
                <td colspan="2">判斷點是否在多邊形内:</td>
            </tr>
            <tr>
                <td><input type="button" value="多邊形1" οnclick="polygon1()" /></td>
            </tr>
            <tr>
                <td><input type="button" value="多邊形2" οnclick="polygon2()" /></td>
            </tr>
            <tr>
                <td>經度<input type="text" value="" id="lng"></td>
            </tr>
            <tr>
                <td>緯度<input type="text" value="" id="lat"></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.411, 39.910);
        var pt3 = new BMap.Point(116.411, 39.915);
        var pt4 = new BMap.Point(116.416, 39.915);
        var pt5 = new BMap.Point(116.416, 39.920);

        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>
           

直接将代碼複制到本地html檔案運作即可,得到如下頁面

百度地圖js中地理圍欄算法bug

其中多邊形1測試用例沒有問題,但是多邊形2測試時,隻需要将點選在一些特殊位置就會判斷錯誤,如圖

百度地圖js中地理圍欄算法bug

此處的射線法求證時,沒有考慮到這種情況,所選點的緯度為39.915時,與多邊形2的pt3,pt4緯度一緻,就會發生錯誤判斷,即使點明顯在範圍内,也會得出在範圍外的結論。而網上的demo基本都是采用這種射線法求證,希望百度地圖可以對此算法的bug進行糾正,以保證準确性,如果文中有錯誤的地方随時發郵件聯系[email protected],我會及時更改

百度地圖js中地理圍欄算法bug