Javascript 传单实时锁定圆外边界警报

我使用传单在地图上实时跟踪用户。我画了一个圆圈作为所有用户的边界。如果用户超出边界，我需要提醒消息。我跟踪用户很好。只有我需要提醒超出边界的用户的消息

var shipLayer = L.layerGroup();
var ships = L.icon({
  iconUrl: 'images/marker.png',
  iconSize: [16, 20]
});
var popup;
var region;
var fen = {
  lat: "17.4468",
  lng: "78.3922"
};
var i = 1;
var realtime = L.realtime(

  function(success, error) {
    var ship = mockShip();
    success(ship);
  }, {
    interval: refresh * 1000,
    getFeatureId: function(featureData) {
      return featureData.properties.userName;
    },
    pointToLayer: function(feature, latlng) {
      region = '';
      if (typeof ship === "undefined" || ship === null) {
        var title = feature.properties.userName + " - " + feature.properties.gpsTime;
        popup = L.popup()
          .setLatLng(latlng)
          .setContent(feature.properties.userName + '<br/>' + feature.properties.gpsTime + '<br/>BatteryInfo:' + feature.properties.batteryInfo + '%')
          .openOn(map);
        marker = L.marker(latlng, {
          title: title,
          icon: ships
        });
        // this is my code for alert
        if (fen.lat < feature.properties.latitude && fen.lng < feature.properties.longitude) {
          alert('hi');
        }
        //end
        region = L.circle(fen, 450, {
          color: 'red',
          fillColor: '#f03',
          fillOpacity: 0
        }).addTo(map);
        marker.bindPopup(popup);
        marker.on('mouseover', function(e) {
          this.openPopup();
        });
        marker.on('mouseout', function(e) {
          this.closePopup();
        });
        marker.addTo(shipLayer);
        return marker;
      }
    }
  }).addTo(map);

var shipLayer=L.layerGroup（）；
var=L.icon({
iconUrl:'images/marker.png'，
iconSize:[16,20]
});
var弹出窗口；
var区域；
var fen={
拉丁语：“17.4468”，
液化天然气：“78.3922”
};
var i=1；
var realtime=L.realtime(
函数（成功、错误）{
var ship=mockShip（）；
成功（船）；
}, {
间隔：刷新*1000，
getFeatureId:函数（featureData）{
返回featureData.properties.userName；
},
pointToLayer：功能（特性、latlng）{
区域=''；
如果（船舶类型==“未定义”| |船舶===空）{
var title=feature.properties.userName+“-”+feature.properties.gpsTime；
popup=L.popup（）
.setLatLng（latlng）
.setContent（feature.properties.userName+'
'+feature.properties.gpsTime+'
BatteryInfo:'+feature.properties.BatteryInfo+'%'））
.openOn（地图）；
标记器=L.标记器（板条{
标题:标题,，
图标：船舶
});
//这是我的警报代码
if（fen.lat

使用turf.js，您可以非常轻松地做到这一点：

marker = L.marker(latlng, {
  title: title,
  icon: ships
});
region = L.circle(fen, 450, {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0
}).addTo(map);
if (turf.distance(marker.toGeoJSON(), region.toGeoJSON()) * 1000 > 450) {
  alert('You are outside the circle!');
}

将返回两个GeoJSON点之间的距离。这里的结果乘以1000，因为

L.circle

使用米作为半径，而

turf.distance

默认为公里。下面是一个简单的小提琴，展示了这一点：

---

当您在圆圈外单击时，将触发警报。

您可以使用

L.LatLng

的

distance to

方法来计算两个坐标之间的距离：

返回使用Haversine公式计算的到给定车床的距离（以米为单位）

---

仅供参考：由于

L.LatLng

对象有一个

distanceTo

方法，因此无需为此引入额外的库。因此，我的回答是：）

// Get L.LatLng object of the circle
var circleLatLng = circle.getLatLng();

// Get L.LatLng object of the marker
var markerLatLng = marker.getLatLng();

// Calculate distance:
var distance = circleLatLng.distanceTo(markerLatLng);

// Use distance in a condition:
if (distance > 450) {
    // Out of bounds, do stuff
}