Геозона листовки на нескольких кругах с обнаружением маркера внутри/снаружи

У меня есть код, который определяет, когда рынок перетаскивается внутрь и за пределы круга.

Это прекрасно работает, но мне просто интересно, как я могу обнаружить один рынок и несколько кругов вместо одного.

Вот текущий код:

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

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

var marker = new L.marker([50.896422, -1.148444],{
    draggable: true,
    autoPan: 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'
    })
});

Но я хотел бы добавить несколько кругов вместо одного.

Как я могу это сделать?


geolocation maps leaflet geofencing
person Community    schedule 07.08.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Поместите круги в массив и forEach() поверх них с тестом радиуса - что-то вроде этого (подставьте свой собственный метод настройки кругов)

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

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

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

var circles = [];

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

circles[1] = L.circle([some - other - coordinates], {
  color: "red",
  fillColor: "#f03",
  fillOpacity: 0.5,
  radius: 100
}).addTo(mymap);

marker.on("drag", function(e) {
  circles.forEach(function(circle) {
    var d = mymap.distance(e.latlng, circle.getLatLng());
    var isInside = d < circle.getRadius();
    circle.setStyle({
      fillColor: isInside ? "green" : "#f03"
    });
  });
});
person peeebeee    schedule 08.08.2019