Turf.buffer和可拖动标记 [英] Turf.buffer and a draggable marker
本文介绍了Turf.buffer和可拖动标记的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
到目前为止,我已经创建了一个标记,将其传输到geoJSON,并使用Turf.buffer在其周围创建了一个缓冲区.在地图上拖动缓冲区时,如何使它粘"在标记上?
So far I have created a marker, transfered it to geoJSON, and created a buffer around it with Turf.buffer. How can I get this buffer to "stick" to the marker as I drag it around the map?
<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>
推荐答案
因此,在上述代码的帮助下,通过大量的搜索,我提出了一个可行的解决方案.起作用的方法:添加可拖动标记,然后使用"marker.on"方法启动清除所有旧缓冲区的函数,然后使用函数在当前位置周围重画缓冲区.
So with the help of the above code and a lot of googling I came up with a solution which works. What worked: adding a draggable marker and then using the "marker.on" method to initiate a function to clear any old buffers and then a function to redraw the buffer around the current location.
//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();
这篇关于Turf.buffer和可拖动标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文