LeafletJS - 图层组

//创建标记var hydMarker = new L.Marker([17.385044, 78.486671]);var vskpMarker = new L.Marker([17.686816, 83.218482]);var vjwdMarker = new L.Marker([16.506174, 80.648015]); //创建latlng对象var latlngs = [   [17.385044, 78.486671],   [16.506174, 80.648015],   [17.686816, 83.218482]];//创建一个多边形var polygon = L.polygon(latlngs，{color:'red'});

//创建图层组var layerGroup = L. layerGroup([hydMarker，vskpMarker，vjwdMarker，polygon]);

//将图层组添加到map  layerGroup.addTo(map);

它生成以下输出 :

添加图层(元素)

您可以使用 addLayer()向要素组添加图层方法.对于此方法，您需要传递要添加的元素.

您可以在市中心添加一个城市海德拉巴的圆圈.

//创建一个圆 var circle = L.circle([16.506174,80.648015]，50000，{color:'red'，fillColor:'＃ f03'，fillOpacity:0}); //将圆圈添加到图层组 layerGroup.addLayer(circle);

它将产生以下输出.  :

删除图层(元素)

您可以使用 removeLayer()方法从要素组中删除图层.对于此方法，您需要传递要删除的元素.

您可以删除名为Vijayawada的城市上的标记，如下所示.

//从地图中删除图层 layerGroup.removeLayer(vjwdMarker);

它将产生以下输出 :

功能组

它类似于 LayerGroup ，但它允许鼠标事件和绑定弹出窗口它.您还可以使用 setStyle()方法将样式设置为整个组.

按照以下步骤创建要素组并将其添加到地图中.

第1步 : 通过传递< div >创建地图对象element(字符串或对象)和地图选项(可选).

第2步 : 通过传递所需图块的URL来创建图层对象.

步骤3 : 使用 Map 类的 addLayer()方法将图层对象添加到地图.

步骤4 : 通过实例化各个类来创建所需的标记，多边形和圆形元素(图层)，如下所示.

//创建标记 var hydMarker = new L.Marker([17.385044,78.486671]);  var vskpMarker = new L.Marker([17.686816,83.218482]);  var vjwdMarker = new L.Marker([16.506174,80.648015]); //创建latlng对象 var latlngs = [ [17.385044,78.486671]， [16.506174,80.648015]， [17.686816,83.218482] ]; //创建多边形 var polygon = L.polygon(latlngs，{color:'red'});>

第5步 : 使用 l.featureGroup()创建要素组.传递上面创建的标记，多边形等，如下所示.

//创建要素组 var featureGroup = L .featureGroup([hydMarker，vskpMarker，vjwdMarker，polygon]);

第6步 : 如果将样式设置为要素组，则它将应用于组中的每个元素(图层).您可以使用 setStyle()方法完成此操作，并且需要将值传递给颜色和不透明度等选项.

设置在上一步中创建的要素组的样式.

//为要素组设置样式 featureGroup.setStyle({color : '蓝'，不透明度:0.5});

第7步 : 使用 bindPopup()方法绑定弹出窗口，如下所示.

//将弹出窗口绑定到要素组 featureGroup.bindPopup("功能组");

第8步 : 使用 addTo()方法添加在上一步中创建的要素组.

//将图层组添加到map  featureGroup.addTo(map);

示例

以下代码创建一个包含3个标记和一个多边形的要素组，并将其添加到map.