0

これまでのところ、マーカーを作成し、それを 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>
4

2 に答える 2

0

したがって、上記のコードと多くのグーグル検索の助けを借りて、機能するソリューションを思いつきました。何がうまくいったか：ドラッグ可能なマーカーを追加し、「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();
于 2015-03-12T18:50:21.587 に答える
0

前もって言っておきますが、私は Turf.js にまったく慣れていないので、間違っていたら私を撃ってください。あなたがしていることについて私が理解できないことの1つは、なぜオブジェクトではなくオブジェクトに追加bufferedするのですか? あなたはそうするつもりだったと思うので、以下の例でそれを変更しました。featureLayerresult

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

これで、マーカーをドラッグするたびに結果が更新されます。このコードは簡単で汚れていて、turf の使い方がわからないためテストできませんでした。そうでなければ、Plunker で例を作成したでしょう。問題が発生した場合はお知らせください。お役に立てば幸いです、頑張ってください！

于 2015-03-05T00:22:50.847 に答える