在 Leaflet 中查找最近点并将最近点的属性显示到用户创建的标记中

Question

Example 我正在尝试使用 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);
        })
      
    }

})()

Answer 1

试试这个：

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);
    });
}