javascript - turf.nearestPoint 只返回同一个点-6ren

javascript - turf.nearestPoint 只返回同一个点

转载作者：行者123 更新时间：2023-11-29 17:44:58

我正在制作传单 map 。我正在加载一些 geoJSON 数据。我有 map 的点击功能。当我单击时，我只想提醒离加载的 geoJSON 最近的点。问题是无论我在城市的哪个地方点击，都只返回一个点(下图所示的点。

//Create the map
var map = L.map('mapdiv').setView([-43.534384, 172.640528], 13);

// Add the basemap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Create a variable that is the URL of the schools data
var url = 'https://koordinates.com/services/query/v1/vector.json?key=8dcaa116555f4ef1bfae391119119bdc&layer=243&x=172.640565&y=-43.534366&max_results=100&radius=100000&geometry=true&with_field_names=true';

// Get the data from the service and asign it to a variable
function httpGet(theUrl) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open("GET", theUrl, false); // false for synchronous request
  xmlHttp.send(null);
  return xmlHttp.responseText;
}
var schoolData = JSON.parse(httpGet(url)).vectorQuery.layers[243];

// Set some options for styling the schools
var geojsonMarkerOptions = {
  radius: 8,
  fillColor: "#ff7800",
  color: "#000",
  weight: 1,
  opacity: 1,
  fillOpacity: 0.8
};

// Add the data to the map and add a popup from some wanted data
L.geoJSON(schoolData, {
  onEachFeature: function(feature, layer) {
    layer.bindPopup('<h3>' + feature.properties.NAME + '</h3><p><strong>Info:</strong> ' + feature.properties.TAGS + '</p>');
  }
}).addTo(map);

var points = turf.featureCollection(schoolData.features);

map.on('click', function(e) {
  var coord = e.latlng;
  var lat = coord.lat;
  var lng = coord.lng;
  var targetPoint = turf.point([lat, lng]);
  var nearest = turf.nearestPoint(targetPoint, points);
	alert(JSON.stringify(nearest));
});

html,
body {
  height: 100%;
}

#mapdiv {
  height: 100%;
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
  </head>

  <body>
    <div id="mapdiv"></div>
  </body>
  <footer>
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
  </footer>

</html>

最佳答案

希望发布解决方案以在将来帮助其他人:

我发现的问题是Leaflet使用的格式是Latitude, Longitude对于坐标，而 Turf 使用 Longitude, Latitude .返回同一点的原因是因为我点击的坐标被翻转了，所以我得到了离 174.000, -43.000 最近的点。而不是 -43.000, 174.000 .有一点所以为了解决这个问题我只是改变了行

var targetPoint = turf.point([lat, lng]);

到

var targetPoint = turf.point([lng, lat]);

下面的工作版本:

//Create the map
var map = L.map('mapdiv').setView([-43.534384, 172.640528], 13);

// Add the basemap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Create a variable that is the URL of the schools data
var url = 'https://koordinates.com/services/query/v1/vector.json?key=8dcaa116555f4ef1bfae391119119bdc&layer=243&x=172.640565&y=-43.534366&max_results=100&radius=100000&geometry=true&with_field_names=true';

// Get the data from the service and asign it to a variable
function httpGet(theUrl) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open("GET", theUrl, false); // false for synchronous request
  xmlHttp.send(null);
  return xmlHttp.responseText;
}
var schoolData = JSON.parse(httpGet(url)).vectorQuery.layers[243];

// Set some options for styling the schools
var geojsonMarkerOptions = {
  radius: 8,
  fillColor: "#ff7800",
  color: "#000",
  weight: 1,
  opacity: 1,
  fillOpacity: 0.8
};

// Add the data to the map and add a popup from some wanted data
L.geoJSON(schoolData, {
  onEachFeature: function(feature, layer) {
    layer.bindPopup('<h3>' + feature.properties.NAME + '</h3><p><strong>Info:</strong> ' + feature.properties.TAGS + '</p>');
  }
}).addTo(map);

var points = turf.featureCollection(schoolData.features);

map.on('click', function(e) {
  var coord = e.latlng;
  var lat = coord.lat;
  var lng = coord.lng;
  var targetPoint = turf.point([lng, lat]);
  var nearest = turf.nearestPoint(targetPoint, points);
	alert(JSON.stringify(nearest));
});

html,
body {
  height: 100%;
}

#mapdiv {
  height: 100%;
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
  </head>

  <body>
    <div id="mapdiv"></div>
  </body>
  <footer>
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
  </footer>

</html>