leaflet.js地圖製作中篇— —點、線、面、圖層，的新增刪除與相關滑鼠操作；
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