我试图根据从小叶OSRM获得的坐标在我的小叶地图上放置turfjs缓冲区。
我要执行的操作是加载路线,然后在路线周围(例如10米之内)放置缓冲区。如果单击该缓冲区中的任何位置,请显示其所在的道路及其附带的说明。
我设法获得了路线并将路线保存为geojson格式。我无法做到的是将其添加到地图中,然后单击添加以加载功能信息。
获取路线的代码是
function getroute() {
myroutewithout = L.Routing.control({
waypoints: [
L.latLng(window.my_lat, window.my_lng),
L.latLng(window.job_p_lat, window.job_p_lng)
],show: true, units: 'imperial',
router: L.Routing.mapbox('CODE-HERE'),
createMarker: function(i, wp, nWps) {
if (i === 0 || i === nWps + 1) {
// here change the starting and ending icons
return mymarker = L.marker(wp.latLng, {
icon: window.operatorIcon
});
} else {
// here change all the others
return job_start = L.marker(wp.latLng, {
icon: window.jobIcon
});
}
}
}).addTo(map);
保存路由中每一位数据的代码是:
myroutewithout.on('routeselected', function(e) {
var coord = e.route.coordinates;
var instr = e.route.instructions;
L.geoJson(GeoJson(instr,coord), {onEachFeature: onEach}).addTo(map);
});
function GeoJson(instr,coord) {
var formatter = new L.Routing.Formatter();
var instrPts = {
type: "FeatureCollection",
features: []
};
for (var i = 0; i < instr.length; ++i) {
var g = {
"type": "Point",
"coordinates": [coord[instr[i].index].lng, coord[instr[i].index].lat]
};
var p = {
"instruction": formatter.formatInstruction(instr[i])
};
instrPts.features.push({
"geometry": g,
"type": "Feature",
"properties": p
});
var point = turf.point([coord[instr[i].index].lng, coord[instr[i].index].lat]);
var buffered = turf.buffer(point, 500, {units: 'meters'});
//addToMap
var addToMap = [point, buffered];
console.log(addToMap);
}
window.instrPts = instrPts;
return instrPts
}
function onEach(feature, layer) {
layer.bindPopup(feature.properties.instruction);
}
所以我在那里保存了我认为需要的所有东西,但是我对如何在地图上放置并添加点击功能一无所知?
请提出任何想法,谢谢