使用OSRM中的geojson路由数据在传单地图上添加带turfjs的缓冲区

时间:2019-02-15 23:12:31

标签: javascript leaflet geojson osrm turfjs

我试图根据从小叶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);

}

所以我在那里保存了我认为需要的所有东西,但是我对如何在地图上放置并添加点击功能一无所知?

请提出任何想法,谢谢

0 个答案:

没有答案