leaflet加载各类图层实时操作演示
leaflet加载各类图层
本身大小只有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('
hello world!
this is a nice popup.
提示:
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
(是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元素的平铺网格，如
。gridlayer将为您处理创建和动画这些dom元素。
同步使用
要创建自定义层，延长gridlayer和实施createtile()方法，这将传递一个point对象和x，y和z（缩放级别）坐标绘制的瓷砖。
var canvaslayer = l.gridlayer.extend({
createtile: function(coords){
// create a 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 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.defaultextendsl.icon，是leaflet默认用于标记的蓝色图标。
o.divicon
表示使用简单
元素而不是图像的标记的轻量级图标。继承icon但忽略iconurl和阴影选项。
var myicon = l.picon({classname: 'my-p-icon'});
// you can set .my-p-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(聚类特征层)
<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: "github© ign"
}
);
//电子地图注记
var emapanno_layer = new l.tilelayer.wmts( emapanno_url,
{
tilesize:256,
layer: 'cva',
style: "default",
tilematrixset: "c",
format: "tile",
//attribution: "github© ign"
}
);
//影像地图
var img_layer = new l.tilelayer.wmts( img_url,
{
tilesize:256,
layer: 'img',
style: "default",
tilematrixset: "c",
format: "tile",
//attribution: "github© ign"
}
);
//影像地图注记
var imganno_layer = new l.tilelayer.wmts( imganno_url,
{
tilesize:256,
layer: 'cia',
style: "default",
tilematrixset: "c",
format: "tile",
//attribution: "github© ign"
}
);
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);
上一篇： Linux 进程间通信