leaflet載入各類圖層
leaflet.js本身大小隻有33k，它能載入的圖層種類是有限的，不過可以藉助esri-leaflet.js這個外掛載入其他的圖層，如果需要載入wmts(地圖瓦片服務)可以引用leaflet-tilelayer-wmts-src.js來支援。更多的功能支援需要引入其他的外掛。
leaflet:
官方文件：https://leafletjs.com/reference-1.3.4.html#path
1.載入光柵圖層
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(map);
網址模板：
'http://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png'{s}裝置可用的子域中的一個（順序地用於幫助每個域限制瀏覽器並行請求;子域值在選項中指定; a，b或c通過預設，可省略），{z}-縮放級別，{x}以及{y}-瓷磚座標。{r}可用於將“@ 2x”新增到URL以載入視網膜圖塊。您可以在模板中使用自定義鍵，這些鍵將從TileLayer選項中進行評估，如下所示：
L.tileLayer('http://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png', {foo: 'bar'});選項：
| 選項 | 型別 | 預設 | 描述 |
|---|---|---|---|
minZoom |
Number |
0 |
顯示此圖層的最小縮放級別（包括）。 |
maxZoom |
Number |
18 |
此圖層將顯示的最大縮放級別（包括）。 |
subdomains |
String|String[] |
'abc' |
磁貼服務的子域。可以以一個字串（每個字母是子域名）或字串數組的形式傳遞。 |
errorTileUrl |
String |
'' |
要顯示的圖塊影象的URL，以代替無法載入的圖塊。 |
zoomOffset |
Number |
0 |
平鋪URL中使用的縮放編號將使用此值進行偏移。 |
tms |
Boolean |
false |
如果true，反轉瓷磚的Y軸編號（為TMS服務啟用此功能）。 |
zoomReverse |
Boolean |
false |
如果設定為true，則平鋪URL中使用的縮放編號將反轉（maxZoom - zoom而不是zoom） |
detectRetina |
Boolean |
false |
如果true和使用者在視網膜顯示器上，它將要求四個指定尺寸的一半的瓷磚和一個更大的縮放級別來代替一個以利用高解析度。 |
crossOrigin |
Boolean|String |
false |
是否將crossOrigin屬性新增到切片中。如果提供了String，則所有tile都將其crossOrigin屬性設定為提供的String。如果要訪問切片畫素資料，則需要這樣做。有關有效的字串值，請參閱CORS設定。 |
WMS
用於在地圖上將WMS服務顯示為切片圖層。
var nexrad = L.tileLayer.wms("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
layers: 'nexrad-n0r-900913',
format: 'image/png',
transparent: true,
attribution: "Weather data © 2012 IEM Nexrad"
});2.UI圖層
標記:
L.Marker用於在地圖上顯示可點選/可拖動的圖示。
L.marker([50.5, 30.5]).addTo(map);彈出:
用於在地圖的某些位置開啟彈出視窗。使用Map.openPopup開啟彈出視窗，同時確保一次只打開一個彈出視窗（建議用於可用性），或使用Map.addLayer開啟任意數量的彈出視窗。
如果你想將彈出視窗繫結到標記點選然後開啟它，那很簡單：
marker.bindPopup(popupContent).openPopup();折線之類的路徑疊加也有一個bindPopup方法。這是在地圖上開啟彈出視窗的更復雜方法：
var popup = L.popup()
.setLatLng(latlng)
.setContent('<p>Hello world!<br />This is a nice popup.</p>')
.openOn(map);提示:
marker.bindTooltip("my tooltip text").openTooltip();
3.向量圖層（點、線、面）
0.點
表示帶有x和y以畫素為單位的座標的點。
var point = L.point(200, 300);接受Point物件的所有Leaflet方法和選項也以簡單的Array形式接受它們（除非另有說明），因此這些行是等效的：
map.panBy([200, 300]);
map.panBy(L.point(200, 300));a.線
// create a red polyline from an array of LatLng points
var latlngs = [
[45.51, -122.68],
[37.77, -122.43],
[34.04, -118.2]
];
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
// zoom the map to the polyline
map.fitBounds(polyline.getBounds());還可以傳遞多維陣列來表示MultiPolyline形狀：
// create a red polyline from an array of arrays of LatLng points
var latlngs = [
[[45.51, -122.68],
[37.77, -122.43],
[34.04, -118.2]],
[[40.78, -73.91],
[41.83, -87.62],
[32.76, -96.72]]
];其他選項請閱讀官方文件
b.多邊形
(多邊形的最後一個點座標是第一個點座標，這樣可以讓圖形閉合)
// create a red polygon from an array of LatLng points
var latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
// zoom the map to the polygon
map.fitBounds(polygon.getBounds());您還可以傳遞一系列latlngs陣列，第一個陣列表示外部形狀，另一個數組表示外部形狀中的孔：
var latlngs = [
[[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]], // outer ring
[[37.29, -108.58],[40.71, -108.58],[40.71, -102.50],[37.29, -102.50]] // hole
];此外，您可以傳遞多維陣列以表示MultiPolygon形狀。
var latlngs = [
[ // first polygon
[[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]], // outer ring
[[37.29, -108.58],[40.71, -108.58],[40.71, -102.50],[37.29, -102.50]] // hole
],
[ // second polygon
[[41, -111.03],[45, -111.04],[45, -104.05],[41, -104.05]]
]
];c.長方形
// define rectangle geographical bounds
var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];
// create an orange rectangle
L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);
// zoom the map to the rectangle bounds
map.fitBounds(bounds);d.圓
L.circle([50.5, 30.5], {radius: 200}).addTo(map);e.SVG(可縮放向量圖形是基於可擴充套件標記語言（標準通用標記語言的子集），用於描述二維向量圖形的一種圖形格式。它由全球資訊網聯盟制定，是一個開放標準。)
預設情況下，對地圖中的所有路徑使用SVG：
var map = L.map('map', {
renderer: L.svg()
});使用具有額外填充的SVG渲染器來處理特定的向量幾何：
var map = L.map('map');
var myRenderer = L.svg({ padding: 0.5 });
var line = L.polyline( coordinates, { renderer: myRenderer } );
var circle = L.circle( center, { renderer: myRenderer } );f.帆布-canvas
(<canvas> 是 HTML5 新增的元素，可用於通過使用JavaScript中的指令碼來繪製圖形。例如，它可以用於繪製圖形，製作照片，建立動畫，甚至可以進行實時視訊處理或渲染。)
預設情況下，對地圖中的所有路徑使用Canvas：
var map = L.map('map', { renderer: L.canvas() });對於特定的向量幾何，請使用Canvas渲染器和額外的填充：
var map = L.map('map');
var myRenderer = L.canvas({ padding: 0.5 });
var line = L.polyline( coordinates, { renderer: myRenderer } );
var circle = L.circle( center, { renderer: myRenderer } );g.圖層組
(用於將多個圖層分組並將其作為一個圖層處理。如果將其新增到地圖中，則還會在地圖上新增/刪除從組中新增或刪除的任何圖層)
L.layerGroup([marker1, marker2])
.addLayer(polyline)
.addTo(map);h.FeatureGroup
擴充套件LayerGroup使得更容易對其所有成員層執行相同的操作：
bindPopup一次將彈出視窗繫結到所有圖層（同樣如此bindTooltip）- 事件傳播到
FeatureGroup，因此如果組具有事件處理程式，它將處理來自任何層的事件。這包括滑鼠事件和自定義事件。 - 有
layeradd和layerremove事件
L.featureGroup([marker1, marker2, polyline])
.bindPopup('Hello world!')
.on('click', function() { alert('Clicked on a member of the group!'); })
.addTo(map);i.GeoJSON
L.geoJSON(data, {
style: function (feature) {
return {color: feature.properties.color};
}
}).bindPopup(function (layer) {
return layer.feature.properties.description;
}).addTo(map);
j.GridLayer
用於處理HTML元素的平鋪網格的通用類。這是所有切片圖層和替換的基類TileLayer.Canvas。GridLayer可以擴充套件為建立一個HTML元素的平鋪網格，如<canvas>，<img>或<div>。GridLayer將為您處理建立和動畫這些DOM元素。
同步使用
要建立自定義層，延長GridLayer和實施createTile()方法，這將傳遞一個Point物件和x，y和z（縮放級別）座標繪製的瓷磚。
var CanvasLayer = L.GridLayer.extend({
createTile: function(coords){
// create a <canvas> element for drawing
var tile = L.DomUtil.create('canvas', 'leaflet-tile');
// setup tile width and height according to the options
var size = this.getTileSize();
tile.width = size.x;
tile.height = size.y;
// get a canvas context and draw something on it using coords.x, coords.y and coords.z
var ctx = tile.getContext('2d');
// return the tile so it can be rendered on screen
return tile;
}
});非同步使用
平鋪建立也可以是非同步的，這在使用第三方繪相簿時很有用。圖塊完成繪製後，可以將其傳遞給done()回撥。
var CanvasLayer = L.GridLayer.extend({
createTile: function(coords, done){
var error;
// create a <canvas> element for drawing
var tile = L.DomUtil.create('canvas', 'leaflet-tile');
// setup tile width and height according to the options
var size = this.getTileSize();
tile.width = size.x;
tile.height = size.y;
// draw something asynchronously and pass the tile to the done() callback
setTimeout(function() {
done(error, tile);
}, 1000);
return tile;
}
});k.經緯度
表示具有一定緯度和經度的地理點。
var latlng = L.latLng(50.5, 30.5);接受LatLng物件的所有Leaflet方法也以簡單的Array形式和簡單的物件形式接受它們（除非另有說明），因此這些行是等效的：
map.panTo([50, 30]);
map.panTo({lon: 30, lat: 50});
map.panTo({lat: 50, lng: 30});
map.panTo(L.latLng(50, 30));l.LatLngBounds
var corner1 = L.latLng(40.712, -74.227),
corner2 = L.latLng(40.774, -74.125),
bounds = L.latLngBounds(corner1, corner2);接受LatLngBounds物件的所有Leaflet方法也以簡單的Array形式接受它們（除非另有說明），因此上面的bounds示例可以像這樣傳遞：
map.fitBounds([
[40.712, -74.227],
[40.774, -74.125]
]);注意：如果區域穿過反射（通常與國際日期線混淆），則必須指定[-180,180]度經度範圍之外的角。請注意，LatLngBounds不會從Leafet的Class物件繼承，這意味著新類不能從它繼承，並且無法使用該include函式向其新增新方法。
m.邊界
var p1 = L.point(10, 10),
p2 = L.point(40, 60),
bounds = L.bounds(p1, p2);接受Bounds物件的所有Leaflet方法也以簡單的Array形式接受它們（除非另有說明），因此上面的bounds示例可以像這樣傳遞：
otherBounds.intersects([[10, 10], [40, 60]]);n.圖示
表示建立標記時要提供的圖示。
var myIcon = L.icon({
iconUrl: 'my-icon.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
shadowUrl: 'my-icon-shadow.png',
shadowSize: [68, 95],
shadowAnchor: [22, 94]
});
L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);L.Icon.Defaultextends L.Icon，是Leaflet預設用於標記的藍色圖示。
o.DivIcon
表示使用簡單<div> 元素而不是影象的標記的輕量級圖示。繼承Icon但忽略iconUrl和陰影選項。
var myIcon = L.divIcon({className: 'my-div-icon'});
// you can set .my-div-icon styles in CSS
L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);
esri-leaflet
傳送門:http://esri.github.io/esri-leaflet/
1.L.esri.BasemapLayer(底圖圖層)
var map = L.map('map').setView([37.75,-122.45], 12);
L.esri.basemapLayer("Topographic").addTo(map);2.L.esri.FeatureLayer(特徵圖層)
L.esri.FeatureLayer用於視覺化，樣式化，查詢和編輯ArcGIS Online中託管並使用ArcGIS Server釋出的向量地理資料。服務中的版權文字會自動新增到地圖歸屬中。
var map = L.map('map').setView([45.53,-122.64], 14);
L.esri.basemapLayer("Streets").addTo(map);
var busStops = L.esri.featureLayer({
url: 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/stops/FeatureServer/0/'
}).addTo(map);3.L.esri.TiledMapLayer(平鋪地圖圖層)
var map = L.map('map').setView([37.7614, -122.3911], 12);
L.esri.tiledMapLayer({
url: 'https://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer',
maxZoom: 15
}).addTo(map);4.L.esri.DynamicMapLayer(動態地圖圖層)
var map = L.map('map').setView([ 38.83,-98.5], 7);
L.esri.basemapLayer('Gray').addTo(map);
var url = "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer";
L.esri.dynamicMapLayer({
url: url,
opacity : 0.25,
useCors: false
}).addTo(map);5.L.esri.ImageMapLayer(影象地圖圖層)
從ArcGIS Online和ArcGIS Server渲染和視覺化影象服務。
var map = L.map('map').setView([43.50, -120.23], 7);
L.esri.basemapLayer('Imagery').addTo(map);
L.esri.imageMapLayer({
url: 'http://imagery.oregonexplorer.info/arcgis/rest/services/NAIP_2011/NAIP_2011_Dynamic/ImageServer'
})
.setBandIds('3,0,1')
.addTo(map);6.L.esri.Vector.Basemap(向量底圖)
<script src="./esri-leaflet-vector.js"></script>
var map = L.map('map').setView([37.75,-122.45], 12);
L.esri.Vector.basemap("Newspaper").addTo(map);7.L.esri.Heat.FeatureLayer(熱圖特徵層)
<script src="./leaflet-heat.js"></script>
<script src="./esri-leaflet-heatmap.js"></script>
var map = new L.Map('map').setView([40.722868115037,-73.92142295837404], 14);
L.esri.basemapLayer('Gray').addTo(map);
var heatmap = L.esri.Heat.featureLayer({
url : "https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Graffiti_Locations3/FeatureServer/0",
radius: 12
}).addTo(map);8.L.esri.Cluster.FeatureLayer(聚類特徵層)
<link rel="stylesheet" type="text/css" href="./MarkerCluster.Default.css">
<link rel="stylesheet" type="text/css" href="./MarkerCluster.css">
<script src="./leaflet.markercluster.js"></script>
<script>./esri-leaflet-cluster.js</script>
var map = L.map('map').setView([45.53,-122.64], 16);
L.esri.basemapLayer("Streets").addTo(map);
var url = "https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/stops/FeatureServer/0";
var busStops = L.esri.Cluster.featureLayer({
url: url,
// Cluster Options
polygonOptions: {
color: "#2d84c8"
},
// Feature Layer Options
pointToLayer: function (geojson, latlng) {
return L.circleMarker(latlng, 10, {
color: "#2D84C8"
});
}
}).addTo(map);9.L.esri.Vector.Layer(向量層)
<script src="./esri-leaflet-vector.js"></script>
var map = L.map('map').setView([37.75,-122.45], 12);
L.esri.Vector.layer('bd505ce3efff479bb4e87b182f180159').addTo(map);更多功能請參考esri-leaflet官方文件
WMTS
SuperMap iServer 提供了 WMTS（Web Map Tile Service，Web 地圖瓦片服務）服務，該服務符合 OGC（Open Geospatial Consortium，開放地理資訊聯盟）制定的 WMTS 實現規範。
WMTS 是 OGC 提出的快取技術標準，即在伺服器端快取被切割成一定大小瓦片的地圖，對客戶端只提供這些預先定義好的單個瓦片的服務，將更多的資料處理操作如圖層疊加等放在客戶端，從而緩解 GIS 伺服器端資料處理的壓力，改善使用者體驗。
WMTS 使用瓦片矩陣集（Tile matrix set）來表示切割後的地圖，如圖1所示。瓦片就是包含地理資料的矩形影像，一幅地圖按一定的瓦片大小被切割成多個瓦片，形成瓦片矩陣，一個或多個瓦片矩陣即組成瓦片矩陣集。不同的瓦片矩陣具有不同的解析度，每個瓦片矩陣由瓦片矩陣識別符號（一般為瓦片矩陣的序號，解析度最低的一層為第0層，依次向上排）進行標識。
詳細內容請看: https://blog.csdn.net/qq_30465893/article/details/78365146
載入wmts圖層需要引入:
<script src="leaflet/leaflet-src.js"></script>
<script src="leaflet/leaflet-tilelayer-wmts-src.js"></script> var emap_url='http://t0.tianditu.com/vec_c/wmts';
var emapanno_url='http://t0.tianditu.com/cva_c/wmts';
var img_url='http://t0.tianditu.com/img_c/wmts';
var imganno_url='http://t0.tianditu.com/cia_c/wmts';
//電子地圖
var emap_layer = new L.TileLayer.WMTS( emap_url ,
{
tileSize:256,
layer: 'vec',
style: "default",
tilematrixSet: "c",
format: "tile",
//attribution: "<a href='https://github.com/mylen/leaflet.TileLayer.WMTS'>GitHub</a>© <a href='http://www.ign.fr'>IGN</a>"
}
);
//電子地圖註記
var emapanno_layer = new L.TileLayer.WMTS( emapanno_url,
{
tileSize:256,
layer: 'cva',
style: "default",
tilematrixSet: "c",
format: "tile",
//attribution: "<a href='https://github.com/mylen/leaflet.TileLayer.WMTS'>GitHub</a>© <a href='http://www.ign.fr'>IGN</a>"
}
);
//影像地圖
var img_layer = new L.TileLayer.WMTS( img_url,
{
tileSize:256,
layer: 'img',
style: "default",
tilematrixSet: "c",
format: "tile",
//attribution: "<a href='https://github.com/mylen/leaflet.TileLayer.WMTS'>GitHub</a>© <a href='http://www.ign.fr'>IGN</a>"
}
);
//影像地圖註記
var imganno_layer = new L.TileLayer.WMTS( imganno_url,
{
tileSize:256,
layer: 'cia',
style: "default",
tilematrixSet: "c",
format: "tile",
//attribution: "<a href='https://github.com/mylen/leaflet.TileLayer.WMTS'>GitHub</a>© <a href='http://www.ign.fr'>IGN</a>"
}
);
var map = L.map('map',{crs:L.CRS.EPSG4326,center: {lon:112 , lat:40},zoom: 13})
var dlgLayer=L.layerGroup().addLayer(emap_layer,emapanno_layer);
var imgLayer=L.layerGroup().addLayer(img_layer,imganno_layer);
map.addLayer(dlgLayer);
map.addLayer(imgLayer);