グリッド範囲内のエンドユーザWEB百度マップかどうかを決定します

ユーザによって設定された配信ロケーションは、配布可能範囲か否かを判断し、ユーザへのプロンプトに応じて、PCの分布範囲のビジネス端に配置された次のシングルユーザ。

私はアイデアで実現には、次のように言いました:

1. PC側は分布範囲Baiduのマップが設けられており、あなたは選択をドラッグすることができます

2.ユーザによって設定された範囲の分布は配信アドレスを決定するかどうかによります

まず、BaiduのPCクライアントは、マップの範囲を取得します

デモBaiduのマップの公式ウェブサイトへの変更は、分布範囲を設定します。

アイデア:多角形の頂点を取得し、JSON形式のデータベースに保存。

BaiduのAPIについてポリゴンをカバーします:

コンストラクタ:

ポリゴン(ポイント:アレイは[、オプト:PolygonOptions])を被覆ポリゴンを作成します

方法:

SETPATH(パス:アレイ)(新しい1.2から)点のポリゴンセットのいずれ
ある、getPath()は、(新しい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方法にどのタイプ列によってタグがある返します。

第二に、範囲内の点を決定します

おそらく線法を使用して、分布範囲内のポイントかどうかを判断するためのメソッドをたくさんについて読むためにオンライン進みます。
しかし、いくつかのケースでは、不正確な判断を結果として、包括的とは見なされない、いくつかの方法があります。
この方法見つける内部百度マップ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.ポイントが範囲内にあるかどうかを決定するために百度マップメソッドを呼び出し
の範囲内で、自身のプログラムかどうかを決定するために、緯度と経度の店舗の百度マップの取得に応じて

Baiduのマップメソッドを呼び出します:

<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>

次のようにインターフェイスは、次のとおりです。

画像-20190917234507139

ページ上の(試験の独自の方法のための)点の座標を取得する点をクリックすると、この範囲内の店舗かどうかを決定するためにInOrOutPolygonを呼び出した後。

画像-20190917234838190

画像-20190917234855187

背景試験方法:

// 测试一个点是否在多边形内
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("点在多边形外");
    }
}

満足のいく結果をテストした後。

要約は、最も重要なの実装プロセスは、それらの頂点または頂点を保存し、(特定の順序)に応じて格納され、点が封入ポリゴンの頂点内にあるかどうかを決定することです。

Baiduのマップまたは良い使用を感じます。APIは非常に広く、私たちの開発者にとって非常に有益なデモ、装備されています。

おすすめ

転載: www.cnblogs.com/alterem/p/11539835.html