2016-04-22 13 views
-1

マップ上でのリアルタイムのユーザー追跡のためにリーフレットを使用しています。このサークルをすべてのユーザーの境界として描きました。ユーザーが境界線から外れている場合は、メッセージに警告する必要があります。私はユーザーをよく追跡しています。私は境界からユーザーのメッセージを警告する必要があります。リーフレットサークル境界外のリアルタイムlatlng

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

答えて

0

あなたは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!'); 
} 

turf.distanceは2つのにGeoJSON点間の距離を返します。 L.circleは半径のメートルを使用し、turf.distanceのデフォルトはキロメートルなので、結果に1000を掛けます。

http://jsfiddle.net/nathansnider/nv2tL6mz/

あなたが円の外側をクリックすると、アラートがトリガされます。ここでの仕事でこれを示す簡単なフィドルです。

+1

:L.LatLng'オブジェクトは 'distanceTo'メソッドを持っている'ので、このためのターフなどの余分なlibにプルする必要はありません。したがって私の答え;) – iH8

+0

ああ、それは良いです! – nathansnider

2

次の2つの座標間距離を算出するL.LatLngdistanceTo方法を使用することができる:

は、半正矢の式を用いて計算し、所与の緯度経度に(メートル)の距離を返します。

FYI

http://leafletjs.com/reference.html#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 
}