在传单中显示或隐藏折线作为图层答案

【问题标题】：show or hide polyline as layer in leaflet在传单中显示或隐藏折线作为图层
【发布时间】：2021-10-10 13:23:22
【问题描述】：

我有一个不同点的 JSON。每个点都有不同的字段，例如lon1、lat1、lon2、lat2。

对于每个点，我从点 1 到点 2 画一条线。通过for，我对每个点执行此操作，并在地图中绘制不同的折线。

问题是当我激活或停用图层时，只有最后绘制的线被隐藏，而不是所有线。

在地图中你可以看到所有的线，但似乎在图层中它会覆盖并删除最后生成的线。

代码：

for (var i = 0; i < json_ARAPointsPRU_0.features.length; i++) {

  var Lon1 = json_ARAPointsPRU_0.features[i].properties['Lon(d.dd)'];
  var Lat1 = json_ARAPointsPRU_0.features[i].properties['Lat(d.dd)'];
  var Lon2 = json_ARAPointsPRU_0.features[i].properties['LON2'];
  var Lat2 = json_ARAPointsPRU_0.features[i].properties['LAT2'];

  // array of coordinates
  var mylatlngs = [
    [Lat1, Lon1],
    [Lat2, Lon2]
  ];
  // draw a polyline in the map
  var polilineas = L.polyline(mylatlngs, {
    color: 'blue'
  });
  polilineas.addTo(map);

  // add " polilineas" into other layer
  var Velocidad2D = new L.LayerGroup();
  Velocidad2D.addLayer(polilineas);
  // Velocidad2D.addLayer(cabezas);  Possibility to add arrow head
}


// Code to LAYER CONTROL

var gropedOverlayslehen = {
  "Vel 2D": Velocidad2D
}

var layerControl = L.control.layers(basemaps, gropedOverlayslehen);

layerControl.addTo(map);

【问题讨论】：

啊，一个经典的变量作用域问题。请阅读有关闭包的信息。 stackoverflow.com/questions/111102/…

标签： javascript leaflet velocity polyline

【解决方案1】：

你需要把var Velocidad2D = new L.LayerGroup();放到循环外面，否则你每次都覆盖它。

var Velocidad2D = new L.LayerGroup();
for (var i = 0; i < json_ARAPointsPRU_0.features.length; i++) {

  var Lon1 = json_ARAPointsPRU_0.features[i].properties['Lon(d.dd)'];
  var Lat1 = json_ARAPointsPRU_0.features[i].properties['Lat(d.dd)'];
  var Lon2 = json_ARAPointsPRU_0.features[i].properties['LON2'];
  var Lat2 = json_ARAPointsPRU_0.features[i].properties['LAT2'];

  // array of coordinates
  var mylatlngs = [
    [Lat1, Lon1],
    [Lat2, Lon2]
  ];
  // draw a polyline in the map
  var polilineas = L.polyline(mylatlngs, {
    color: 'blue'
  });
  polilineas.addTo(map);

  // add " polilineas" into other layer
  Velocidad2D.addLayer(polilineas);
  // Velocidad2D.addLayer(cabezas);  Possibility to add arrow head
}


// Code to LAYER CONTROL

var gropedOverlayslehen = {
  "Vel 2D": Velocidad2D
}

var layerControl = L.control.layers(basemaps, gropedOverlayslehen);

layerControl.addTo(map);

【讨论】：