同时，确保你有一个包含自行车站点信息的json文件（例如 citybike.json），其结构类似于以下示例：
{
"stationBeanList": [
{
"id": 72,
"stationName": "W 52 St & 11 Ave",
"availableDocks": 32,
"totalDocks": 39,
"latitude": 40.76727216,
"longitude": -73.99392888,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 6,
"stAddress1": "W 52 St & 11 Ave",
"stAddress2": "",
"city": "",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": ""
},
{
"id": 76,
"stationName": "1st & Houston",
"availableDocks": 23,
"totalDocks": 30,
"latitude": 41.76727216,
"longitude": -74.99392888,
"availableBikes": 7
},
{
"id": 12,
"stationName": "White plains",
"availableDocks": 12,
"totalDocks": 22,
"latitude": 51.76727216,
"longitude": 1.99392888,
"availableBikes": 10
}
]
}2. 计算距离的函数
我们将使用Haversine公式来计算两个坐标点之间的距离。以下是一个JavaScript函数，用于计算地球上两点之间的距离（以米为单位）：
function getDistance(lat1, lon1, lat2, lon2, unit = 'M') {
const R = 6371e3; // 地球半径（米）
const φ1 = lat1 * Math.PI/180;
const φ2 = lat2 * Math.PI/180;
const Δφ = (lat2-lat1) * Math.PI/180;
const Δλ = (lon2-lon1) * Math.PI/180;
const a = Math.sin(Δφ/2) * Math.sin(Δφ/2) +
Math.cos(φ1) * Math.cos(φ2) *
Math.sin(Δλ/2) * Math.sin(Δλ/2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
const d = R * c; // 距离（米）
if (unit === 'km') return d * 0.001;
if (unit === 'mi') return d * 0.0006213712;
return d;
}这个函数接受两个坐标点的纬度和经度，以及一个可选的单位参数（默认为米）。 你也可以选择返回公里或英里。
3. 查找最近站点的函数
接下来，创建一个函数，该函数接受起始坐标、站点列表和单位，并返回按距离排序的站点列表：
function getStationDistances(locLat, locLng, stationsList, unit = 'mi') {
return stationsList.map(station => {
const {
id,
stationName: name,
latitude: sLat,
longitude: sLng,
availableDocks
} = station;
const distance = Number.parseFloat((Math.round(getDistance(
locLat,
locLng,
sLat,
sLng,
unit) * 100) / 100).toFixed(2));
return {
id,
name,
distance,
unit,
sLat,
sLng,
availableDocks
};
}).sort((a, b) => a.distance > b.distance);
}这个函数使用 map 方法遍历站点列表，计算每个站点与给定坐标之间的距离，并将结果存储在一个新的对象中。 然后，使用 sort 方法按距离对结果进行排序。
4. 在Leaflet地图上应用
现在，让我们将这些函数应用到Leaflet地图上。 首先，创建一个地图实例：
var map_var = L.map('map_id').setView([40.72730240765651, -73.9939667324035], 16);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map_var);
var startPosition = L.latLng();
var endPosition = L.latLng();
L.Routing.control({
waypoints: [
startPosition,
endPosition,
],
routeWhileDragging: true,
collapsible: true,
geocoder: L.Control.Geocoder.nominatim()
}).addTo(map_var);然后，使用 $.getJSON 方法加载JSON数据，并调用 getStationDistances 函数来查找最近的站点：
$.getJSON("citybike.json", function (json1) {
const locationLat = 40.72730240765651; // 起始纬度
const locationLng = -73.9939667324035; // 起始经度
const nearestStations = getStationDistances(locationLat, locationLng, json1.stationBeanList, 'mi');
// 输出最近的站点
console.log(nearestStations);
// 在地图上标记站点
nearestStations.forEach(station => {
const marker = L.marker([station.sLat, station.sLng]);
marker.addTo(map_var).bindPopup(`${station.name}
Distance: ${station.distance} ${station.unit}
Available Docks: ${station.availableDocks}`);
});
});这段代码首先定义了起始坐标。 然后，它调用 getStationDistances 函数，并将结果存储在 nearestStations 变量中。 最后，它遍历 nearestStations 数组，并在地图上标记每个站点，并显示一个包含站点名称、距离和可用停靠点的弹出窗口。
5. 完整示例代码
Leaflet Nearest Station
注意事项：
- 确保 citybike.json 文件与HTML文件位于同一目录下，或者提供正确的路径。
- 根据你的需求调整起始坐标和单位。
- 可以自定义弹出窗口的内容，以显示更多站点信息。
6. 总结
通过本教程，你学习了如何使用Leaflet地图库和JavaScript来计算给定坐标与JSON数据集中自行车站点之间的距离，并找到最近的站点。 你可以将这些技术应用到各种基于位置的服务中，例如查找最近的餐馆、商店或公共交通站点。
