javascript - 如何删除位于圆边界外的标记？

Question

我有一个标记设置为我的家。我有一个 slider ，当它增加时会围绕这个标记创建一个圆圈。此 slider 也可以增大或减小圆的半径。

当我增加圆的大小时，它会显示位于设置半径内的标记。我已经使用 leaflet-knn 算法找到了这一点。

现在我的问题是在标记显示后，我尝试减小圆圈的大小，然后应该删除位于圆圈之外的标记。

如何删除位于圆半径之外的标记？

这是我试过的代码。

const myloc = new L.LatLng(13.7433242, 100.5421583);
var map = L.map('map').setView(myloc, 12),
  gjLayer = L.geoJson(testCities);

const scale = ' meter';
var testCities = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "properties": {
        "name": "Mo Chit"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          100.5538,
          13.8023
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "Ratchathewi"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          100.5383,
          13.7649
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "Nong Chaeng, Bueng Sam Phan District, Phetchabun"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          100.614021,
          13.668217
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "Bang Na, Bangkok, Thailand"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          100.614021,
          13.668217
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "Nonthaburi"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          100.521652,
          13.859108
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "Nai Mueang, Mueang Nong Khai District, Nong Khai"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          102.741264,
          17.878281
        ]
      }
    }
  ]
}

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png', {
  maxZoom: 18,
  id: 'mapbox.streets'
}).addTo(map);

let marker = L.marker(myloc).addTo(map);

let circle = L.circle(myloc, {
  color: '#7a7777',
  weight: 0.1,
  fillColor: '#7a7777',
  fillOpacity: 0.2,
  radius: 0
}).addTo(map);

$(function() {
  var oldArr = [];

  var showNearestLocation = function(dist) {
    var distance = (dist == null ? 15550 : dist);
    var longitude = myloc.lng,
      latitude = myloc.lat;
    var res = leafletKnn(gjLayer).nearest(
      [longitude, latitude], 5, distance);

    diff = oldArr.filter(function(x) {
      return res.indexOf(x) < 0
    });
    for (j = 0; j < diff.length; j++) {
      map.removeLayer(diff[j].layer);
    }

    if (res.length) {
      map.setView(res[0].layer.getLatLng(), 12);
      for (i = 0; i < res.length; i++) {
        map.addLayer(res[i].layer);
        if ($.inArray(res[i], oldArr) === -1)
          oldArr.push(res[i]);
      }
    }
  }
  var slider = document.getElementById('myRange');
  var output = document.getElementById('demo');
  output.innerHTML = slider.value + scale;

  slider.oninput = function(val) {
    if (val == 0) {
      output.innerHTML = 0 + scale;
      map.removeLayer(circle);
      return;
    }
    output.innerHTML = this.value + scale;
    circle.setRadius(this.value);
    showNearestLocation(this.value);
  }
});

.container {
  width: 800px;
  margin: 20px auto;
}

#map {
  width: 800px;
  height: 450px;
  border: 1px solid #AAA;
}

.search-scope {
  margin-top: 10px;
  text-align: center;
}

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" />
<script src="https://github.com/mapbox/leaflet-knn/blob/master/leaflet-knn.js"></script>

<div class="container">
  <div class="row">
    <div id="map"></div>

    <div class="scope">
      <input type="range" min="0" max="15000" value="0" class="slider" id="myRange">
      <p>Radius:
        <span id="demo"></span>
      </p>
    </div>
  </div>
</div>

Answer 1

我不确定我尝试的解决方案是否适用，但它完成了我的工作。我所做的是首先创建一个空数组，然后将数据插入其中并删除对该数组的检查，如下所示。

$(function () {
    var oldArr = [];

    var showNearestLocation = function (distance) {

        var longitude = myloc.lng,
            latitude = myloc.lat;
        var res = leafletKnn(gjLayer).nearest(
            [longitude, latitude], 5, distance);

        diff = oldArr.filter(function (x) { return res.indexOf(x) < 0 });

        for (j = 0; j < diff.length; j++) {
            map.removeLayer(diff[j].layer);
            oldArr.splice(oldArr.indexOf(diff[j]), 1);
        }

        if (distance > 0) {
            if (res.length) {
                map.setView(res[0].layer.getLatLng(), 12);
                for (i = 0; i < res.length; i++) {
                    map.addLayer(res[i].layer);

                    if ($.inArray(res[i], oldArr) === -1)
                        oldArr.push(res[i]);
                }
            }
        }

    }
    var slider = document.getElementById('myRange');
    var output = document.getElementById('demo');
    output.innerHTML = slider.value + scale;

    slider.oninput = function (val) {
        output.innerHTML = this.value + scale;
        circle.setRadius(this.value);
        showNearestLocation(this.value);
    }
});