多个圆圈上的传单地理围栏......检测内部/外部标记

Posted

技术标签:

【中文标题】多个圆圈上的传单地理围栏......检测内部/外部标记【英文标题】:Leaflet geofence on multiple circles ... detecting marker inside / outside 【发布时间】:2019-08-07 19:17:29 【问题描述】:

我有一些代码可以检测市场何时被拖动到圆圈内外。

这很好用,但我只是想知道如何才能检测到一个市场和多个圈子,而不仅仅是一个。

这是当前代码:

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

但我想添加多个圆圈而不是一个。

我该怎么做?

【问题讨论】:

【参考方案1】:

将圆圈放在一个数组中,然后用半径测试将 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"
    );
  );
);

【讨论】:

以上是关于多个圆圈上的传单地理围栏......检测内部/外部标记的主要内容,如果未能解决你的问题,请参考以下文章

定义地理围栏并查看点是不是在其内部/外部的算法

什么是 “地理围栏”?

使用 iOS 地理围栏跟踪多个(20 多个)位置

与 iOS 相比,Android 上的地理围栏速度较慢

地理围栏转换 PendingIntent 被 Android Oreo 上的操作系统阻止

地理围栏:如何识别对象(特征),使用 Oracle Spatial 重叠地理围栏边界?