[英]find nearest point and show properties from nearest point into user created marker in Leaflet
示例我正在尝试使用 Leaflet 在特定位置的地图上找到最近的标记,想要在用户创建的标记上显示弹出信息,即找到最近的点,弹出信息应该包含来自 geojson 数据层的最近点属性。 示例 maker.bindpopup(feature.properties.name).addTo(map)
(function() {
var geojosn1= 'url1';
var geojsonn2= 'url2';
var stations,
$body = $('body'),
$locate = $('#locate'),
$findNearest = $('#find-nearest'),
$status = $('#status');
$.getJSON(geojosn1, function(data) {
//$('#loader').fadeOut();
$body.addClass('loaded');
stations = L.geoJson(data, {
pointToLayer : function(feature, latlng) {
return L.circleMarker(latlng, {
stroke : false,
fillColor : 'orange',
fillOpacity : 1,
radius: 2
});
}
}).addTo(map);
$locate.fadeIn().on('click', function(e) {
$status.html('finding your location');
if (!navigator.geolocation){
alert("<p>Sorry, your browser does not support Geolocation</p>");
return;
}
$body.removeClass('loaded');
navigator.geolocation.getCurrentPosition(success, error);
$locate.fadeOut();
});
});
function success(position) {
$body.addClass('loaded');
var currentPos = [position.coords.latitude,position.coords.longitude];
map.setView(currentPos, zoomLevel);
var myLocation = L.marker(currentPos)
.addTo(map)
.bindTooltip("you are here")
.openTooltip();
$findNearest.fadeIn()
.on('click', function(e) {
$findNearest.fadeOut();
$status.html('finding your nearest locations')
queryFeatures(currentPos, 5);
myLocation.unbindTooltip();
});
};
function queryFeatures(currentPos, numResults) {
var distances = [];
stations.eachLayer(function(l) {
var distance = L.latLng(currentPos).distanceTo(l.getLatLng())/1000;
distances.push(distance);
});
distances.sort(function(a, b) {
return a - b;
});
var stationsLayer = L.featureGroup();
stations.eachLayer(function(l) {
var distance = L.latLng(currentPos).distanceTo(l.getLatLng())/1000;
if(distance < distances[numResults]) {
l.bindTooltip(distance.toLocaleString() + ' km from current location.');
L.polyline([currentPos, l.getLatLng()], {
color : 'orange',
weight : 2,
opacity: 1,
dashArray : "5, 10"
}).addTo(stationsLayer);
}
});
map.flyToBounds(stationsLayer.getBounds(), {duration : 3, easeLinearity: .1 });
map.on('zoomend', function() {
map.addLayer(stationsLayer);
})
}
})()
尝试这个:
function queryFeatures(currentPos, numResults) {
var stationsLayer = L.featureGroup();
var result = {
layer: null,
dis: 0,
marker: null
};
stations.eachLayer(function(l) {
var distance = L.latLng(currentPos).distanceTo(l.getLatLng())/1000;
if(result.layer == null || distance < result.dis) {
var line = L.polyline([currentPos, l.getLatLng()], {
color : 'orange',
weight : 2,
opacity: 1,
dashArray : "5, 10"
});
result = {
layer: line,
dis: distance,
marker: l
};
}
});
result.marker.bindTooltip(result.dis.toLocaleString() + ' km from current location.');
result.layer.addTo(stationsLayer);
map.flyToBounds(stationsLayer.getBounds(), {duration : 3, easeLinearity: .1 });
map.on('zoomend', function() {
map.addLayer(stationsLayer);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.