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'});

选项：

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 pointsvar 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 polylinemap.fitBounds(polyline.getBounds());

还可以传递多维 数组  来表示MultiPolyline形状：

// create a red polyline from an array of arrays of LatLng pointsvar 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 pointsvar 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 polygonmap.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 boundsvar bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];// create an orange rectangleL.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);// zoom the map to the rectangle boundsmap.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 CSSL.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);

免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删