Turf.buffer и перетаскиваемый маркер

Question

До сих пор я создал маркер, передал его в geoJSON и создал буфер вокруг него с Turf.buffer. Как я могу заставить этот буфер «придерживаться» маркера, когда я перетаскиваю его вокруг карты?

<script> 
     L.mapbox.accessToken = 'fg.eyJ1IjoisdflksdaklsjZWwiLCJhIjoiRHNwX0ZWNCJ9.Ov2O5sslkdqV93_R0lq3Q'; 
     var map = L.mapbox.map('map', 'example.kf6j9ec4') 
      .setView([38.633, -90.319],12); 

     var marker = L.marker(new L.LatLng(38.633, -90.319), { 
      icon: L.mapbox.marker.icon({ 
       'marker-color': '1B05E3', 
       "marker-symbol": "pitch" 
      }), 
      draggable: true 
     }); 

     marker.bindPopup('This marker is draggable! Move it around to see what locales are in your "area of walkability".'); 

     //Make the marker a feature 
     var pointMarker = marker.toGeoJSON(); 

     //buffer the marker geoJSON feature 
     var buffered = turf.buffer(pointMarker, 2, 'miles'); 

     var resultFeatures = buffered.features.concat(pointMarker); 
     var result = { 
      "type": "FeatureCollection", 
      "features": resultFeatures 
     }; 

     L.mapbox.featureLayer().setGeoJSON(buffered).addTo(map); 
     marker.addTo(map); 

    </script> 

Answer 1

Итак, с помощью приведенного выше кода и большого количества поисковых запросов я придумал решение, которое работает. Что сработало: добавив перетаскиваемый маркер, а затем используя метод marker.on, чтобы инициировать функцию для очистки старых буферов, а затем функцию для перерисовки буфера вокруг текущего местоположения.

 //add marker that is draggable 
     var marker = L.marker(new L.LatLng(38.633, -90.319), { 
      icon: L.mapbox.marker.icon({ 
       'marker-color': '1B05E3', 
       "marker-symbol": "pitch" 
      }), 
      draggable: true 
     }); 

     //add marker popup 
     marker.bindPopup('This marker is draggable! Move it around to see what locales are in your "area of walkability".'); 
     marker.addTo(map); 

     //remove old buffers (used when marker is dragged) 
     function removeBuff(){ 
      map.removeLayer(buff); 
      }; 

     //create buffer (used when the marker is dragged) 
     function updateBuffer(){ 
      //Make the marker a feature 
      var pointMarker = marker.toGeoJSON(); 
      //buffer the marker geoJSON feature 
      var buffered = turf.buffer(pointMarker, 1, 'miles'); 
      //add buffer to the map. Note: no "var" before "buff" makes it a global variable and usable within the removeBuff() function. 
      buff = L.mapbox.featureLayer(buffered); 
      buff.addTo(map); 
     }; 

     marker.on('drag', function(){removeBuff(), updateBuffer()}); 
     updateBuffer(); 

Answer 2

Искренние, я должен сказать, я не знаком с Turf.js совсем так застрелить меня, если я ошибаюсь. Одна вещь, которую я не понимаю о том, что вы делаете, - почему вы добавляете buffered к featureLayer, а не к объекту result? Я полагаю, вы хотели сделать это, поэтому я изменил это в моем примере ниже.

Вам нужно зацепить на маркер dragend. Там вам понадобятся новые результаты, основанные на текущем объекте geojson маркера. Поэтому лучше всего написать функцию для получения результатов, поэтому вы можете использовать ее при размещении маркера в первый раз и при каждом перетаскивании маркера. Код:

// Add empty featureLayer 
var layer = L.mapbox.featureLayer().addTo(map); 

var marker = L.marker(new L.LatLng(38.633, -90.319), { 
    draggable: true 
}); 

// Attach handler on dragend event 
marker.on('dragend', function (event) { 
    // Get new results based on marker's current geojson 
    var results = getResults(event.target.toGeoJSON()); 
    // Add the results to the featurelayer 
    layer.setGeoJSON(results); 
}); 

marker.addTo(map); 

// Function for getting results 
function getResults (geojson) { 
    // You returned buffered, makes no sense to me 
    // Changed it to return the new featurecollection 
    // But you can alter it to what you need 
    var buffered = turf.buffer(geojson, 2, 'miles'), 
     resultFeatures = buffered.features.concat(geojson); 
    return { 
     "type": "FeatureCollection", 
     "features": resultFeatures 
    }; 
} 

// Get results the first time 
var results = getResults(marker.toGeoJSON()); 
// Add the results to the featurelayer 
layer.setGeoJSON(results); 

Теперь у вас будут обновленные результаты по каждому перетаскиванию маркера. Был ли этот код быстрым и грязным и не смог его проверить, потому что я не знаю, как использовать дерн. В противном случае я бы создал пример на Plunker. Дайте мне знать, если у вас возникнут проблемы. Надеюсь, что это поможет, удачи!