草皮缓冲区和一个可拖动的标记

Turf.buffer and a draggable marker

本文关键字：一个 拖动 缓冲区      更新时间：2023-09-26

到目前为止，我已经创建了一个标记，将其传输到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>

在前面，我不得不说，我对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上创建一个例子。如果你遇到任何问题，请告诉我。希望有帮助，祝你好运！

因此，在上面代码和大量谷歌搜索的帮助下，我想出了一个有效的解决方案。工作原理：添加一个可拖动的标记，然后使用"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();
相关文章：