Question

我正在努力显示所选标记在给定范围内的标记。用户可以通过滑动滑块来设置距离范围。我将标记的位置存储在数据库中。我不确定如何找到用户所选范围内的标记。

有人可以帮助我如何完成此任务。

谢谢。

const myloc = new L.LatLng(13.7563, 100.5018);
const myloc1 = new L.LatLng(13.8023, 100.5538);
const myloc2 = new L.LatLng(13.7649, 100.5383);
const myloc3 = new L.LatLng(15.8700, 100.9925);
const myloc4 = new L.LatLng(13.668217, 100.614021);
const myloc5 = new L.LatLng(13.859108, 100.521652);
const myloc6 = new L.LatLng(17.878281, 102.741264);
const myloc7 = new L.LatLng(13.814029, 100.037292);
const myloc8 = new L.LatLng(18.793867, 98.997116);
const myloc9 = new L.LatLng(14.979900, 102.097771);
const myloc10 = new L.LatLng(18.772558, 98.982361);
const myloc11 = new L.LatLng(18.772558, 98.982361);
const myloc12 = new L.LatLng(16.439625, 102.828728);
const myloc13 = new L.LatLng(13.361143, 100.984673);

const map = L.map('map').setView(myloc, 11);

const scale = ' meter';

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
  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>',
  maxZoom: 18,
  id: 'mapbox.streets',
  accessToken: 'accesstoken'
}).addTo(map);

let marker = L.marker(myloc).addTo(map);

L.marker(myloc).addTo(map);
L.marker(myloc1).addTo(map);
L.marker(myloc2).addTo(map);
L.marker(myloc3).addTo(map);
L.marker(myloc4).addTo(map);
L.marker(myloc5).addTo(map);
L.marker(myloc6).addTo(map);
L.marker(myloc7).addTo(map);
L.marker(myloc8).addTo(map);
L.marker(myloc9).addTo(map);
L.marker(myloc10).addTo(map);
L.marker(myloc11).addTo(map);
L.marker(myloc12).addTo(map);
L.marker(myloc13).addTo(map);

let circle = L.circle(myloc, {
  color: '#7a7777',
  weight: 0.1,
  fillColor: '#7a7777',
  fillOpacity: 0.2,
  radius: 0
}).addTo(map);

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);

}

#map {
  width: 500px;
  height: 400px;
  border: 1px solid #AAA;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script>

<div id="map"></div>

<input type="range" min="0" max="15000" value="0" class="slider" id="myRange">
<br>
<span id="demo"></span>

Answer 1

您所描述的东西非常接近k-Nearest Neighbour search问题（或简称为 k -NN搜索）。

为了通过 k -NN搜索并假设使用JavaScript作为平台来解决此问题，您可以利用leaflet-knn或仅使用rbush并利用{ {3}}。

（如果您选择以后的版本，请当心数据所使用的坐标系-距离应使用该坐标系-如果将坐标存储为纬度-经度，则查询距离必须以纬度表示-lng）。

如rbush-knn中所述， k -NN搜索不能真正在距给定点一定距离内提供 all 结果。为此，请利用this other question：在搜索点上创建一个循环缓冲区，然后计算缓冲区与数据点之间的相交。

如何显示给定范围内最接近的标记？

1 个答案: