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

Posted 2023-03-25

【中文标题】在传单中显示或隐藏折线作为图层

【英文标题】：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);

【问题讨论】：

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

【参考方案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);