Leaflet 将多边形添加到图层

Question

I'm trying to generate some kind of "river" polygon based on a path:

• I have a path as an array of points, which will be one side of the river.
• Based on that path I iterate over its points, move them a little (add a random number, in scale, to the coordinates)
• I store them in another array of points but backwards (what was path[0] should be pathinverted[paht.size.length-1])
• I concatenate both arrays so that they can form a proper polygon

This part is working, the paths are correctly generated. But when I try to add them to a layer it breaks. This is my code:

var paths = [
  [
    [-95.4240, -31.83424],
    [-95.1552, -31.86048],
    [-95.0528, -31.87200],
    [-94.8672, -31.88224],
    [-94.5856, -31.90784],
    [-94.4320, -31.92320],
    [-94.2592, -31.97184],
    [-94.2080, -31.99168],
    [-94.0352, -32.01024],
    [-93.7536, -32.04928],
    [-93.6448, -32.07488],
  ]
];
//
// Generate the other side of the river
// paths is an array of paths where a path is an array of points

// Store the inverted paths to add the other side of the river in this mirror array
var pathinverted = new Array();

for (let j = 0; j<paths.length; j++) {
  p = paths[j];
  // Iterate over every point of the path
  for (let i = p.length - 1; i >= 0; i--) {
    // Select coordinates and move them randomly to one side
    let pathx = p[i][0] + Math.random() * 1000;
    let pathy = p[i][1] + Math.random() * 1000;
    // Save the new coordinates in the mirror array
    pathinverted[j] = new Array();
    pathinverted[j][p.length - 1 - i] = [0,0];
    pathinverted[j][p.length-1-i][0] = pathx;
    pathinverted[j][p.length-1-i][1] = pathy;
  }
}

// Display rivers
var riverPolygons = new Array();
for (let i = 0; i < paths.length; i++) {
  var riverPath = [].concat(pathinverted[i],paths[i]);
  riverPolygons[i] = L.polygon(riverPath, { color: "blue", weight: 0, smoothFactor: 1.0 })
    .bindTooltip("River", { permanent: false, direction: "bottom", opacity: 0.7 });
}

var riversLayer = L.LayerGroup(riverPolygons);

var overlayMaps = {
    "Rivers": riversLayer
};

L.control.layers(overlayMaps).addTo(map);

When I try to activate the layer I get an "Uncaught TypeError: Cannot read property '0' of undefined" but with no extra information. What am I doing wrong?

Answer 1

As pointed out by GrzegorzT., the issue is in your first part:

for (let j = 0; j<paths.length; j++) {
  p = paths[j];
  // Iterate over every point of the path
  for (let i = p.length - 1; i >= 0; i--) {
    // Save the new coordinates in the mirror array
    pathinverted[j] = new Array(); // <= you recreate the array in your inner loop
  }
}

Since you recreate the mirror array in your inner loop, you are erasing previous coordinates pairs.

You should simply initialize the mirror array in the outer loop:

for (let j = 0; j<paths.length; j++) {
  p = paths[j];
  pathinverted[j] = new Array();
  // Iterate over every point of the path
  for (let i = p.length - 1; i >= 0; i--) {
    // Save the new coordinates in the mirror array
    pathinverted[j][p.length - 1 - i] = [0,0]; // etc.
  }
}