如何从坐标数组渲染L.featureGroup [英] How can I render the L.featureGroup from an array of coordinate

问题描述

如何从 data.json 中的 coordinateRoute 数组中呈现 L.featureGroup ，以使用按钮 Snake it！ ，就像我点击蛇！一样。拥有自己的 id ，地图将显示带有相应 id

how can I render the L.featureGroup from an array of coordinateRoute in data.json, to handle with button "Snake it!", It's like when I click on "snake it!" has it's own id and the map will show Polyline of the coordinateRoute with corresponding id

此处为代码链接

这是data.json：

Here's data.json:

链接data.json

要更特别是，这就是我的方法尝试但错误：

tobe more Specifically this is how I try but WRONG:

    let route;
    data.map((item) => {
      if (item.id === 1 && item.coordinateRoute) {
    return (route = L.featureGroup([
      item.coordinateRoute.map((line) => {
        if (i % 2 === 0) {
          L.marker(item.coordinateRoute[i], { icon });
        }
        L.polyline([item.coordinateRoute[i], item.coordinateRoute[i + 1]]);
        return i++;
      }),
    ]));


        return (route = L.featureGroup(lines));
      }
      return route;
    });

推荐答案

我做到了，但我不认为

这是我的代码：

let markerList = [];
    let polyLineList = [];
    let lines = [];
    for (let i = 0; i < 4; i++) {
      markerList.push(L.marker(data[0].coordinateRoute[i], { icon }));
      if (data[0].coordinateRoute[i + 1]) {
        polyLineList.push(
          L.polyline(
            [data[0].coordinateRoute[i], data[0].coordinateRoute[i + 1]],
            { snakingSpeed: 500 }
          )
        );
      }
    }
    let l = Math.min(markerList.length, polyLineList.length);

    for (let i = 0; i < l; i++) {
      lines.push(markerList[i], polyLineList[i]);
    }
 const route = L.featureGroup(lines, { snakingPause: 50 });

这篇关于如何从坐标数组渲染L.featureGroup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！