Question

我将一个标记设置为我的家。我有一个滑块，当增加时会在此标记周围创建一个圆圈。此滑块也可以增加或减小圆的半径。

当我增加圆的大小时，它将显示位于设置半径内的标记。我已经使用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

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

public function getCategory()
    {
        return $this->category;
    }

public function getQuantity()
    {
        return $this->quantity;
    }

如何删除圆形边界之外的标记？

1 个答案: