Оповещение, когда маркер вытащен из полигона - PullRequest
Новая
       6

Оповещение, когда маркер вытащен из полигона

0 голосов
/ 17 ноября 2018

Я использую Mapbox.У меня есть перетаскиваемый маркер, и на карте можно нажимать, щелкнув маркер, я хочу предупредить, когда маркер перетаскивается из полигона.и показать сообщение в форме тега.

L.mapbox.accessToken = "pk.eyJ1IjoibWlzaGFhIiwiYSI6ImNqb2U0MTA0ZDJ2NnQzdnBhNjduNzB5MTUifQ.ls9YKwPwRI5hkfAa2ZRY5A";

var map = L.mapbox.map("map", "mapbox.streets")
    .setView([35.70383346016101,51.39451503753663],15);

var rememberLat = document.getElementById('latitude').value;
var rememberLong = document.getElementById('longitude').value;

if(!rememberLat || !rememberLong ) { rememberLat = 35.70383346016101; rememberLong = 51.39451503753663;}	
     var p1 = new L.LatLng(35.70720316839909, 51.400566101074226),
         p2 = new L.LatLng(35.70723647148794,51.392656730651855),
         p3 = new L.LatLng(35.70257888022394,51.37417316436768),
	 p4 = new L.LatLng(35.700348467145695,51.39266967773438),
         polygonPoints = [p1, p2, p3,p4];     

      var polygon = new L.Polygon(polygonPoints);
      map.addLayer(polygon);   

      var marker = L.marker([rememberLat, rememberLong],{
          draggable: true
      }).addTo(map);

      marker.on('dragend', function (e) {
          updateLatLng(marker.getLatLng().lat, marker.getLatLng().lng);
      });

      map.on('click', function (e) {
          marker.setLatLng(e.latlng);
          updateLatLng(marker.getLatLng().lat, marker.getLatLng().lng);
      });

function updateLatLng(lat,lng,reverse) {
    if(reverse) {
        marker.setLatLng([lat,lng]);
        map.panTo([lat,lng]);
     } else {
        document.getElementById('latitude').value = marker.getLatLng().lat;
        document.getElementById('longitude').value = marker.getLatLng().lng;
        map.panTo([lat,lng]);
     }
}
#mapid { 
     height: 380px; 
     width: 550px 
}

.form{ height: 60px; }
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-pip/v0.0.2/leaflet-pip.js"></script>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<link href="https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css" rel="stylesheet"/>
<script src="https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js"></script>
<form class="form">
	<label for="latitude">Latitude:</label>
<input id="latitude" type="text" />
<label for="longitude">Longitude:</label>
<input id="longitude" type="text" />
</form>
<div id="map" style="width: 800px; height: 500px; "></div>

1 Ответ

0 голосов
/ 17 ноября 2018

Вы можете использовать алгоритм Ray Casting с некоторыми настройками кода от Src1 и Src2 

marker.on('dragend', function(e) {
  updateLatLng(marker.getLatLng().lat, marker.getLatLng().lng);

  alert("Marker is inside the polygon: " + isMarkerInsidePolygon(marker, polygon));

});


L.mapbox.accessToken = "pk.eyJ1IjoibWlzaGFhIiwiYSI6ImNqb2U0MTA0ZDJ2NnQzdnBhNjduNzB5MTUifQ.ls9YKwPwRI5hkfAa2ZRY5A";
var map = L.mapbox.map("map", "mapbox.streets")
  .setView([35.70383346016101, 51.39451503753663], 15);
var rememberLat = document.getElementById('latitude').value;
var rememberLong = document.getElementById('longitude').value;
if (!rememberLat || !rememberLong) {
  rememberLat = 35.70383346016101;
  rememberLong = 51.39451503753663;
}
var p1 = new L.LatLng(35.70720316839909, 51.400566101074226),
  p2 = new L.LatLng(35.70723647148794, 51.392656730651855),
  p3 = new L.LatLng(35.70257888022394, 51.37417316436768),
  p4 = new L.LatLng(35.700348467145695, 51.39266967773438),
  polygonPoints = [p1, p2, p3, p4];
var polygon = new L.Polygon(polygonPoints);
map.addLayer(polygon);
var marker = L.marker([rememberLat, rememberLong], {
  draggable: true
}).addTo(map);
marker.on('dragend', function(e) {
  updateLatLng(marker.getLatLng().lat, marker.getLatLng().lng);

  alert("Marker is inside the polygon: " + isMarkerInsidePolygon(marker, polygon));

});
map.on('click', function(e) {
  marker.setLatLng(e.latlng);
  updateLatLng(marker.getLatLng().lat, marker.getLatLng().lng);
});

function updateLatLng(lat, lng, reverse) {
  if (reverse) {
    marker.setLatLng([lat, lng]);
    map.panTo([lat, lng]);
  } else {
    document.getElementById('latitude').value = marker.getLatLng().lat;
    document.getElementById('longitude').value = marker.getLatLng().lng;
    map.panTo([lat, lng]);
  }
}

function isMarkerInsidePolygon(marker, poly) {
  var inside = false;
  var x = marker.getLatLng().lat,
    y = marker.getLatLng().lng;
  for (var ii = 0; ii < poly.getLatLngs().length; ii++) {
    var polyPoints = poly.getLatLngs()[ii];
    for (var i = 0, j = polyPoints.length - 1; i < polyPoints.length; j = i++) {
      var xi = polyPoints[i].lat,
        yi = polyPoints[i].lng;
      var xj = polyPoints[j].lat,
        yj = polyPoints[j].lng;

      var intersect = ((yi > y) != (yj > y)) &&
        (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
      if (intersect) inside = !inside;
    }
  }
  console.log(inside);
  return inside;
};
#mapid {
  height: 380px;
  width: 550px
}

.form {
  height: 60px;
}
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-pip/v0.0.2/leaflet-pip.js"></script>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<link href="https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js"></script>

<form class="form">
  <label for="latitude">Latitude:</label>
  <input id="latitude" type="text" />
  <label for="longitude">Longitude:</label>
  <input id="longitude" type="text" />
</form>
<div id="map" style="width: 800px; height: 500px; "></div>
...