Leaflet 如何在传单中动态显示/隐藏LineString

我正在将飞机航迹的GeoJSON文件加载到传单中。我想将当前位置绘制为图标，将以前的“轨迹”绘制为线条。显示所有的轨迹会随着飞机的增加而变得繁忙，所以我希望只有当飞机被点击时才能打开它们

我可以/应该如何动态显示/隐藏与标记分开的线字符串

我发现了一些建议，但是

。setStyle

适用于特征，而不是几何体

概述：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "reg": "G-CGWP",
        "type": "fixed",
        "model": "website.profile"
      },
      "id": 12,
      "geometry": {
        "type": "GeometryCollection",
        "geometries": [
          {
            "type": "LineString",
            "coordinates": [
              [
                -0.319281196282617,
                52.08664390758181
              ],
              [
                -1.076445537370006,
                52.79518475653341
              ],
              [
                -0.098191354875297,
                51.94810149137197
              ],
              [
                -0.940941846648286,
                53.508162348603435
              ]
            ]
          },
          {
            "type": "Point",
            "coordinates": [
              -0.940941846648286,
              53.508162348603435
            ]
          }
        ]
      }
    },
  ...
  ]
}

---

我对GejJon有控制，所以可以改变.< /P> < P>自从<代码> LineString <代码>集合被表示为<代码>几何集合/<代码>你可以考虑把代码>几何集合[< /代码> > <代码> LineString < /Cord>几何，（例如通过<代码>草皮.js<代码>）：

进入

然后在每层应用样式

layer.on({
   click: function(e) {
      toggleLayerVisibility(e.target);
   }
});

在哪里

这里有一个例子

var数据={
类型：“FeatureCollection”，
特点：[
{
键入：“功能”，
几何图形：{
类型：“GeometryCollection”，
几何图形：[
{
键入：“LineString”，
坐标：[
[-105.00341892242432, 39.75383843460583],
[-105.0008225440979, 39.751891803969535]
]
},
{
键入：“LineString”，
坐标：[
[-105.0008225440979, 39.751891803969535],
[-104.99820470809937, 39.74979664004068]
]
},
{
键入：“LineString”，
坐标：[
[-104.99820470809937, 39.74979664004068],
[-104.98689651489258, 39.741052354709055]
]
}
]
}
},
{
键入：“功能”，
几何图形：{
类型：“多多边形”，
坐标：[
[
[
[-105.00432014465332, 39.74732195489861],
[-105.00715255737305, 39.7462000683517],
[-105.00921249389647, 39.74468219277038],
[-105.01067161560059, 39.74362625960105],
[-105.01195907592773, 39.74290029616054],
[-105.00989913940431, 39.74078835902781],
[-105.00758171081543, 39.74059036160317],
[-105.00346183776855, 39.74059036160317],
[-105.00097274780272, 39.74059036160317],
[-105.00062942504881, 39.74072235994946],
[-105.00020027160645, 39.74191033368865],
[-105.00071525573731, 39.74276830198601],
[-105.00097274780272, 39.74369225589818],
[-105.00097274780272, 39.74461619742136],
[-105.00123023986816, 39.74534214278395],
[-105.00183105468751, 39.74613407445653],
[-105.00432014465332, 39.74732195489861]
],
[
[-105.00361204147337, 39.74354376414072],
[-105.00301122665405, 39.74278480127163],
[-105.00221729278564, 39.74316428375108],
[-105.00283956527711, 39.74390674342741],
[-105.00361204147337, 39.74354376414072]
]
],
[
[
[-105.00942707061768, 39.73989736613708],
[-105.00942707061768, 39.73910536278566],
[-105.00685214996338, 39.73923736397631],
[-105.00384807586671, 39.73910536278566],
[-105.00174522399902, 39.73903936209552],
[-105.00041484832764, 39.73910536278566],
[-105.00041484832764, 39.73979836621592],
[-105.00535011291504, 39.73986436617916],
[-105.00942707061768, 39.73989736613708]
]
]
]
}
}
]
};
var map=L.map（“map”）.setView（[39.74739，-105]，14）；
蒂莱耶(
"https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？access_token=pk.eyj1ijoibwwwwym94iiwiysi6imnpey4nxvycta2emycxbndhrqcmz3n3gifq.rjfig214ariislb6b5aw“，
{
maxZoom:18，
归属：
'映射数据©；贡献者，'+
', ' +
“图像”，
id:“地图盒.灯光”
}
).addTo（地图）；
var data_flatten=草坪平坦（数据）；
var geojson=L.geojson（数据展平{
风格：{
填充颜色：'#1c9099'，
体重：8
},
onEachFeature:onEachFeature
}).addTo（地图）；
var selectedLayerId=null；
功能切换LayerVisibility（层）{
如果（已选择LayerId）{
geojson.resetStyle（层）；
selectedLayerId=null；
}否则{
//隐藏一层
layer.setStyle({
不透明度：0，
填充不透明度：0.0
});
selectedLayerId=图层。\u传单\u id；
}
}
功能onEachFeature（功能，图层）{
分层({
点击：功能（e）{
切换层可视性（如目标）；
}
});
}

#地图{
宽度：600px；
高度：400px；
}

---

感谢您提供了一个完整的示例-不是JS程序员，这非常有用。

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [-105.00341892242432, 39.75383843460583],
          [-105.0008225440979, 39.751891803969535]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [-105.0008225440979, 39.751891803969535],
          [-104.99820470809937, 39.74979664004068]
        ]
      }
    }
  ]
}

layer.on({
   click: function(e) {
      toggleLayerVisibility(e.target);
   }
});

var selectedLayerId = null;
function toggleLayerVisibility(layer) {
    if (selectedLayerId) {
      geojson.resetStyle(layer);
      selectedLayerId = null;
    } else {
      //hide a layer
      layer.setStyle({
        opacity: 0,
        fillOpacity: 0.0
      });
      selectedLayerId = layer._leaflet_id;
    }
}