admin管理员组

文章数量:1290946

I am trying out geofencing with leaflet and I have a marker that can be moved and a circle on a map.

Here is the full code:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

</head>
<body>

<head>
    <link href='.js/plugins/leaflet-locatecontrol/v0.43.0/css/font-awesome.min.css' rel='stylesheet' />
    <link rel="stylesheet" href="/[email protected]/dist/leaflet.css" />

    <script src="/[email protected]/dist/leaflet.js"></script>
  </head>
<body>
<div id="mapid" style="height: 600px"></div>
<script>

  var mymap = L.map('mapid', {
    center: [50.897819, -1.150189],
    zoom: 16
  });

    L.tileLayer('/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic3RldmVuc2F0Y2giLCJhIjoiY2p5eDR6MWgzMHRvbjNocnJkN2d2MjRwaSJ9.wd0OtBUQQfUtNxdduQA3lg', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="/">OpenStreetMap</a> contributors, ' +
            '<a href=".0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="/">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(mymap);

var marker = new L.marker([50.898422, -1.148444],{
    draggable: true,
    autoPan: true
}).addTo(mymap);


 var circle = L.circle([50.895763, -1.150556], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 200
}).addTo(mymap);


</script>
</body>

</body>
</html>

I need to detect when the marker going into and out of the circle.

How can I do this?

I am trying out geofencing with leaflet and I have a marker that can be moved and a circle on a map.

Here is the full code:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

</head>
<body>

<head>
    <link href='https://api.mapbox./mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/css/font-awesome.min.css' rel='stylesheet' />
    <link rel="stylesheet" href="https://unpkg./[email protected]/dist/leaflet.css" />

    <script src="https://unpkg./[email protected]/dist/leaflet.js"></script>
  </head>
<body>
<div id="mapid" style="height: 600px"></div>
<script>

  var mymap = L.map('mapid', {
    center: [50.897819, -1.150189],
    zoom: 16
  });

    L.tileLayer('https://api.tiles.mapbox./v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic3RldmVuc2F0Y2giLCJhIjoiY2p5eDR6MWgzMHRvbjNocnJkN2d2MjRwaSJ9.wd0OtBUQQfUtNxdduQA3lg', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativemons/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox./">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(mymap);

var marker = new L.marker([50.898422, -1.148444],{
    draggable: true,
    autoPan: true
}).addTo(mymap);


 var circle = L.circle([50.895763, -1.150556], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 200
}).addTo(mymap);


</script>
</body>

</body>
</html>

I need to detect when the marker going into and out of the circle.

How can I do this?

  • javascript
  • leaflet
  • maps
  • geofencing
Share Improve this question asked Aug 6, 2019 at 22:34 user11832840user11832840
Add a ment  | 

2 Answers 2

Reset to default 8
  • You can listen to the drag event to act when the marker is dragged
  • and you can then determine if the marker is inside your circle, for example by calculating the distance to the center.

Something like

marker.on('drag', function(e) {
    // distance between the current position of the marker and the center of the circle
    var d = mymap.distance(e.latlng, circle.getLatLng());

    // the marker is inside the circle when the distance is inferior to the radius
    var isInside = d < circle.getRadius();

   // let's manifest this by toggling the color
    circle.setStyle({
        fillColor: isInside ? 'green' : '#f03'
    })
});

And a demo

var mymap = L.map('mapid', {
    center: [50.895763, -1.150556],
    zoom: 16
});

var marker = new L.marker([50.896422, -1.148444],{
    draggable: true
}).addTo(mymap);

var circle = L.circle([50.895763, -1.150556], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 100
}).addTo(mymap);

marker.on('drag', function(e) {
    var d = mymap.distance(e.latlng, circle.getLatLng());
    var isInside = d < circle.getRadius();
    circle.setStyle({
        fillColor: isInside ? 'green' : '#f03'
    })
});
<link rel="stylesheet" href="https://unpkg./[email protected]/dist/leaflet.css" />
<script src="https://unpkg./[email protected]/dist/leaflet.js"></script>
<div id="mapid" style="height: 180px"></div>

An alternative is to check if the circle is rendered at the pixel where the marker has been dragged to; this can be done by leveraging the Leaflet.CheapLayerAt plugin, e.g.:

<script src="https://unpkg./[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg./[email protected]/Leaflet.CheapLayerAt.js"></script>

and

marker.on('dragend', function(ev) {
    // Hide the marker momentarily, so CheapLayerAt doesn't return it
    marker.getElement().style.display = 'none';

    if (map.getLayerAtLatLng(marker.getLatLng()) === circle) {
      // The marker was dragged inside
    } else {
      // The marker was dragged outside
    }

    // Display the marker icon again
    marker.getElement().style.display = 'inherit';
});

There are drawbacks with this approach - it's difficult to use id during a drag, because hiding the marker then displaying it again inside a drag operation might fire more DOM events and mess up things. If the marker looks like the default one, one could calculate instead the layer under the pixel just below the marker's tip, e.g.:

marker.on('drag', function(ev) {
    var pxPos = map.latLngToContainerPoint(marker.getLatLng());
    pxPos.y += 1;

    if (map.getLayerAt(pxPos) === circle) {
      // The marker was dragged inside
    } else {
      // The marker was dragged outside
    }
});

Keep in mind that this approach will tell you when the marker has been dragged on the circle's border. If the stroke weight of the circle is too wide, you will get results when the marker is just over the border, even though the distance from the marker to the circle's center is larger than the circle radius.

So, even though this answers your question ("When is the marker dragged over the circle?"), I think you are asking the wrong question. For geofencing, you want to know if a point is within a given distance to another known point, so I would go with @nikoshr's answer.

本文标签： javascriptLeaflet detect when marker goes into and out of a circleStack Overflow

版权声明：本文标题：javascript - Leaflet detect when marker goes into and out of a circle - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741502579a2382133.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。