leaflet加载各类图层_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 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>&copy; <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>&copy; <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>&copy; <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>&copy; <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);