javascript - 使用来自数据库的位置坐标在 Bing map 上实现 pointInpolygon 搜索算法

Question

我希望确定是否在 Bing map 上绘制的多边形内找到给定点(纬度和经度)。多边形由用户绘制。

这是我已经拥有的

<script type='text/javascript'>
    var map, drawingManager;

    function GetMap() {
        map = new Microsoft.Maps.Map('#myMap', {});

        //Load the DrawingTools module
        Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
            //Create an instance of the DrawingTools class and bind it to the map.
            var tools = new Microsoft.Maps.DrawingTools(map);
            //Show the drawing toolbar and enable editing on the map.
            tools.showDrawingManager(function (manager) {
                //Store a reference to the drawing manager as it will be useful later.
                drawingManager = manager;
                //Create a shortcut to the DrawingBarAction to minimize code.
                var da = Microsoft.Maps.DrawingTools.DrawingBarAction;
                //Limit which tools appear in the drawing toolbar.
                manager.setOptions({
                    drawingBarActions: da.polyline | da.polygon | da.erase,
                    fillColor: 'rgba(255, 0, 0, 0.5)'
                });
            });
        });
    }


    function IsPointInPolygon() {
        var shapes = drawingManager.getPrimitives();
        if (shapes && shapes.length > 0) {
            for (i = 0; i < shapes.length; i++) {
                var points = shapes[i].getLocations();

                //Get all locations from DB
                $.ajax({
                    url: 'http://localhost:53851/Locations/ReturnLocationsList',
                    type: 'POST',
                    dataType: 'json',
                    success: function (response) {
                        //do something with data
                        //alert(JSON.stringify(response.data));
                        arrayLocations = response.data;
                        //alert(arrayLocations.length);
                        var columns = ['IdLocation', 'Name', 'Latitude', 'Longitude'];

                        //Convert gotten locations to Maps.Locations in order to ease calculations
                        var allLocations = [];
                        alert("are you here ?");

                        for (i = 0; i < arrayLocations.length; i++) {
                            var coordinates = new Microsoft.Maps.Location(arrayLocations[i].Latitude, arrayLocations[i].Longitude);
                            allLocations.push(coordinates);
                        }
                        alert(allLocations[0]);

                        //Add pushpin to each location coming from DB
                        var pinLocation = new Microsoft.Maps.Pushpin(origin, {
                            color: 'blue'
                        });

                        for (i = 0; i < allLocations.length; i++) {
                            map.entities.push(pinLocation);

                            if (pointInPolygon(points, allLocations[i].Latitude, allLocations[i].Longitude)) {
                                alert("Point is inside polygon");
                            }
                            else {
                                alert("Point is not found in polygon");
                            }
                        }

                        function pointInPolygon(points, lat, lng) {
                            // ray-casting algorithm based on
                            // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html

                            var inside = false;
                            for (var i = 0, j = points.length - 1; i < points.length; j = i++) {
                                var intersect =
                                    points[i].latitude > lat != points[j].latitude > lat &&
                                    lng <
                                    ((points[j].longitude - points[i].longitude) *
                                        (lat - points[i].latitude)) /
                                    (points[j].latitude - points[i].latitude) +
                                    points[i].longitude;
                                if (intersect) inside = !inside;
                            }

                            return inside;
                        }
                    },
                    error: function (error) {
                        //log or alert the error
                        alert("There's an error !");
                        //alert(error);
                    }
                });
            }
            //return locations;
        } else {
            alert("No shapes in the drawing manager.");
        }
    }

</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[Bing Map key]' async defer></script>

<div class="row">
    <div class="col-lg-12">
        <div id="myMap" style="position:relative;width:950px;height:500px;"></div>
        <input type="button" class="btn btn-primary" value="Get Shapes" onclick="IsPointInPolygon()" />
    </div>
</div>

arrayLocations 是实际来自数据库的位置，并且在这些位置中至少有一个在绘制的多边形区域中找到的位置，但对于所有位置，我肯定会收到“在多边形中找不到点”消息。

我什至尝试向来自数据库的每个位置添加图钉，但图钉不会显示在 map 上。

我彻底迷路了。请提供任何帮助!

Answer 1

看来您改编了 Polygon Search algorithm来自官方文档，对吗？如果是这样，他们的实现似乎有错误并且没有按预期工作。

相反，我建议使用以下方法来确定该点是否实际上位于多边形内部:

function pointInPolygon(points, lat, lng) {
  // ray-casting algorithm based on
  // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
  var inside = false;
  for (var i = 0, j = points.length - 1; i < points.length; j = i++) {
    var intersect =
      points[i].latitude > lat != points[j].latitude > lat &&
      lng <
        ((points[j].longitude - points[i].longitude) *
          (lat - points[i].latitude)) /
          (points[j].latitude - points[i].latitude) +
          points[i].longitude;
    if (intersect) inside = !inside;
  }

  return inside;
}

演示

var map, drawingManager, point;

function GetMap() {
  map = new Microsoft.Maps.Map("#myMap", {});

  point = map.getCenter();
  var pin = new Microsoft.Maps.Pushpin(point, {
    title: "Center point"
  });
  map.entities.push(pin);

  //Load the DrawingTools module
  Microsoft.Maps.loadModule("Microsoft.Maps.DrawingTools", function() {
    //Create an instance of the DrawingTools class and bind it to the map.
    var tools = new Microsoft.Maps.DrawingTools(map);
    //Show the drawing toolbar and enable editing on the map.
    tools.showDrawingManager(function(manager) {
      //Store a reference to the drawing manager as it will be useful later.
      drawingManager = manager;
      //Create a shortcut to the DrawingBarAction to minimize code.
      var da = Microsoft.Maps.DrawingTools.DrawingBarAction;
      //Limit which tools appear in the drawing toolbar.
      manager.setOptions({
        drawingBarActions: da.polyline | da.polygon | da.erase,
        fillColor: "rgba(255, 0, 0, 0.5)"
      });
    });
  });
}

function getShapes() {
  var shapes = drawingManager.getPrimitives();
  if (shapes && shapes.length > 0) {
    for (i = 0; i < shapes.length; i++) {
      var points = shapes[i].getLocations();
      if (pointInPolygon(points, point.latitude, point.longitude)) {
        alert("Point is inside polygon");
      } else {
        alert("Point is not found in polygon");
      }
    }

    //return locations;
  } else {
    alert("No shapes in the drawing manager.");
  }
}

function pointInPolygon(points, lat, lng) {
  // ray-casting algorithm based on
  // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
  var inside = false;
  for (var i = 0, j = points.length - 1; i < points.length; j = i++) {
    var intersect =
      points[i].latitude > lat != points[j].latitude > lat &&
      lng <
        ((points[j].longitude - points[i].longitude) *
          (lat - points[i].latitude)) /
          (points[j].latitude - points[i].latitude) +
          points[i].longitude;
    if (intersect) inside = !inside;
  }

  return inside;
}

<div id="myMap" style="position:relative;width:640px;height:320px;"></div>
      <input type="button" class="btn btn-primary" value="Get Shapes" onclick="getShapes()" />
 <script
  type="text/javascript"
  src="https://www.bing.com/api/maps/mapcontrol?key=Ap12Gwv9esg5iXgfAh5Ehlbf36MZ-O8051Sl66Zm6glGwq7PSaaKgGPpcOUEGICy&callback=GetMap"
  async
  defer
></script>