turf.nearestPoint只返回相同的点 [英] turf.nearestPoint only returning the same point
本文介绍了turf.nearestPoint只返回相同的点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在制作一张传单地图.我正在加载一些geoJSON数据.我有一个点击功能的地图.当我单击时，我只想提醒已加载的geoJSON中最近的点.问题是，无论我在哪里单击，都只返回一个点(如下图所示.
I am making a Leaflet map. I am loading some geoJSON data. I have an on click function for the map. When I click I simply want to alert the nearest point from the loaded geoJSON. The problem is that only one point is returned no matter where I click in the city ( the point shown in the image below.
//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: '© <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>
推荐答案
发布解决方案以希望将来对其他人有帮助:
Posting the solution to help others in the future hopefully:
我发现的问题是Leaflet使用格式Latitude, Longitude作为坐标，而Turf使用Longitude, Latitude.返回同一点的原因是因为我单击的坐标被翻转了，所以我从174.000, -43.000而不是-43.000, 174.000得到了最近的点.为了解决这个问题，我只是更改了行
The problem I found was that Leaflet uses the format Latitude, Longitude for coordinates while Turf uses Longitude, Latitude. The reason the same point was returning was because the coordinates I was clicking at were getting flipped so I was getting the nearest of the points from 174.000, -43.000 instead of -43.000, 174.000. with a point So to fix this I simply changed the line
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: '© <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>
这篇关于turf.nearestPoint只返回相同的点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
