1.featureGroup圖層創建
在實際項目中地圖數據分為不同類型，這時如果把所有數據同時加載到地圖上來進行操作會帶來各種問題，所以此時需要利用L.featureGroup方法創建不同的圖層，用來加載不同類型的數據，以方便操作，具體方法如下：
var _viewSpotLayer=new L.featureGroup([]);
_map.addLayer(_viewSpotLayer);
如需要清除圖層上的數據集合，使用內置方法即可：
_viewSpotLayer.clearLayers();
2.使用L.marker創建點數據
如上圖，橙色框內為 popup，粉色框內為 label ，圖標為 icon，三者組合構成了marker。
示例：
var pointFeature = new L.marker([39.905,116.399],{ icon: viewIcon,title:"故宮"}).bindLabel("故宮",{noHide:true}).addTo(_viewSpotLayer);
參數說明：
icon //用於渲染標記的圖標實例。使用L.icon創建，下面會有詳細講解
title //鼠標懸停時提示文本
alt //圖像文本
riseOnHover //true/false(默認)，為true時當您將鼠標懸停在其上時，標記將會顯示在其他標記之上。
方法說明：
.addTo(layer) //添加到指定圖層當中
.bindLabel() //給marker綁定label，使用方法及參數下面詳解
事件說明：
marker支持各種鼠標事件，使用方法為
marker.on("event",function(){
//do something
})
ps:如果通過ajax請求加載多個marker，並且都需要添加點擊事件，請使用【封閉空間】循環加載數據點
使用示例：
$.ajax({
url:"js/demo.json",
type:"POST",
success:function(data){
for(var i=0;i<data.rows.length;i++){
(function (index){ //封閉空間開始
var row=data.rows[index];
var pointFeature = new L.marker([row.lat,row.lng],{ icon:
viewIcon,title:row.name}).bindLabel(row.name,{noHide:true});
pointFeature.options.sm_sid = "rwjg";
pointFeature.on("click",function(){
alert(row.name)
});
pointFeature.addTo(_viewSpotLayer)
})(i) //封閉空間結束
}
}
})
.bindLabel方法不是leaflet內置方法，需要引入額外的css與js文件才能使用，插件可以去Leaflet.label官網下載(https://github.com/Leaflet/Leaflet.label)。不過leaflet最新版本為1.3.4，此版本中直接引入Leaflet.label使用會報錯，需要修改部分源碼才能實現功能。
<link href="css/leaflet.label.css" rel="stylesheet" />
<script src="leaflet/leaflet.label-src.js"></script>
<script src="leaflet/BaseMarkerMethods.js"></script>
<script src="leaflet/Marker.Label.js"></script>
<script src="leaflet/Map.Label.js"></script>
使用方法：
.bindLabel("文字內容",{options})
noHide //label是否一致顯示不消失，默認為false,鼠標移入時才會顯示label。
使用L.icon方法創建圖標
使用示例：
var viewIcon = L.icon({
iconUrl: 'images/draw_maker.png',
iconSize: [18, 27],
iconAnchor: [9, 14],
popupAnchor: [0, -13]
});
參數說明：
iconUrl //圖片路徑
iconSize //圖片大小，已像素為單位
iconAnchor //圖標“尖端”的坐標（相對於其左上角）。圖標將對齊，以使此點位於標記的地理位置。如果指定了size，則默認居中。
popupAnchor //彈出窗口相對於圖標錨點“打開”的點的坐標。
className //class名稱
使用L.popup方法創建彈出層
<script>
使用示例：
var popText="<span style='width:80px;line-height:40px;text-align:center;font-
size:16px;display:block;'>故宮</span>";
var popup = L.popup({ maxWidth: 700, maxHeight: 600 })
.setLatLng([39.905,116.399])
.setContent(popText);
pointFeature.bindPopup(popup);
參數說明：
maxWidth //彈出窗最大寬度
minWidth //彈出窗最小寬度
maxHeight //彈出窗最大高度
autoPan //默認true，如果您不希望地圖執行平移動畫以適合彈出窗口，請將其設置為false。
closeButton //默認為true，是否顯示關閉按鈕
className //class名稱
ps:默認點擊地圖會關閉已打開popup，像關閉該功能請在加載地圖時進行設置，詳見初篇L.map({options}).
方法說明:
setLatLng() //設置彈出窗口打開的地理位置。
setContent() //設置彈出窗內容。
marker.bindPopup(popup) //將popup綁定到圖標上，綁定后點擊marker會彈出/關閉popup
</script>
3.使用L.polyline創建線段
使用示例
newL.polyline(數據集合,{options})
var lineArr=[[39.920969009399414, 116.38572692871094],[39.91101264953613,
116.3862419128418],[39.91161346435547, 116.39636993408203],[39.9217414855957,
116.3957691192627],[39.9213981628418, 116.38589859008789]];
var line =newL.polyline(lineArr,{color:'red',opacity:'0.8',weight:'3'})
.addTo(_viewSpotLayer);
參數說明：
color：線段顏色
weight：線段寬度
opacity：線段透明度
dashArray：虛線間隔
fill：是否填充內部(true/false)
fillColor:內部填充顏色，如不設置，默認為color顏色
fillOpacity：內部填充透明度
方法：
.setStyle() 設置樣式;
事件：
line.on("event",function(){
//do something
})
ps:線段的事件，是能在鼠標位於線段上方時操作才會觸發
4.使用L.polygon創建面
L.polygon與L.polyline在使用方法，參數等上面完全一樣，不同的是效果與事件范圍有所差異，如下圖
此面與上圖的線段使用同一組數據，觀察一下可以看出，兩張圖的左上角部分，線段是敞開的，面是閉合的，這就是polyline與polygon的不同之處，polygon會自動閉合首尾點，形成一個封閉的面，並且polygon的事件觸發范圍為整個面內（包括填充部分）。兩者都可以使用.bindPopup()方法綁定彈窗，並且彈窗會根據鼠標點擊位置彈出。
5.利用L.imageOverlay加載圖片圖層
效果圖
使用示例：
var imgLayer=L.imageOverlay(imgurl,bounds,{options});
bounds：為限制圖片范圍的經緯度，是右上經緯度點與左下經緯度點，如需要填充整個地圖可視范圍，可使用
_map.getBounds()直接獲取當前試圖內右上左下經緯度，或者也可以自己創建想要的范圍，此時需要使
用內置方法創建bounds數據集合，具體方法為：
var bounds = new L.LatLngBounds(new L.LatLng(右上),new L.LatLng(左下));
例：var bounds = new L.LatLngBounds(
new L.LatLng(39.948177, 116.426239),
new L.LatLng(39.899082, 116.351222)
);
參數說明：
opacity：圖片透明度
maxZoom：最大縮放層級
minZoom：最小縮放層級
className：class名稱
方法說明：
setUrl() 重新設置圖片路徑
setBounds() 重新設置圖片范圍
ps: 1.setBounds()方法在最新版1.3.4內存在，老版本0.7.7版本沒有此方法
2.使用L.imageOverlay方法加載圖片到地圖上時，進行縮放放大時，圖片會模糊，所以需要使用
setUrl與setBounds方法重新加載圖片，后續與arcgis聯動部分會說明。
————————————————
版權聲明：本文為CSDN博主「This_塵淵」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/lonly_maple/article/details/83545997