概述：
leaflet是一个轻量级的并且开源的地图框架，是由esri发起的，由于其轻量、简单而被大家喜欢，本文带你学习如何在leaflet中加载天地图。
实现：
leaflet加载天地图比较简单，做了一个WMTS扩展的类，源代码如下：
tdtLayer.js
L.TileLayer.WMTS = L.TileLayer.extend({
defaultWmtsParams: {
service: 'WMTS',
request: 'GetTile',
version: '1.0.0',
layer: '',
style: '',
tilematrixSet: '',
format: 'image/jpeg'
},
initialize: function (url, options) { // (String, Object)
this._url = url;
var wmtsParams = L.extend({}, this.defaultWmtsParams),
tileSize = options.tileSize || this.options.tileSize;
if (options.detectRetina && L.Browser.retina) {
wmtsParams.width = wmtsParams.height = tileSize * 2;
} else {
wmtsParams.width = wmtsParams.height = tileSize;
}
for (var i in options) {
// all keys that are not TileLayer options go to WMTS params
if (!this.options.hasOwnProperty(i) && i!="matrixIds") {
wmtsParams[i] = options[i];
}
}
this.wmtsParams = wmtsParams;
this.matrixIds = options.matrixIds||this.getDefaultMatrix();
L.setOptions(this, options);
},
onAdd: function (map) {
L.TileLayer.prototype.onAdd.call(this, map);
},
getTileUrl: function (tilePoint, zoom) { // (Point, Number) -> String
var map = this._map;
crs = map.options.crs;
tileSize = this.options.tileSize;
nwPoint = tilePoint.multiplyBy(tileSize);
//+/-1 in order to be on the tile
nwPoint.x+=1;
nwPoint.y-=1;
sePoint = nwPoint.add(new L.Point(tileSize, tileSize));
nw = crs.project(map.unproject(nwPoint, zoom));
se = crs.project(map.unproject(sePoint, zoom));
tilewidth =se.x-nw.x;
zoom=map.getZoom();
ident = this.matrixIds[zoom].identifier;
X0 =this.matrixIds[zoom].topLeftCorner.lng;
Y0 =this.matrixIds[zoom].topLeftCorner.lat;
tilecol=Math.floor((nw.x-X0)/tilewidth);
tilerow=-Math.floor((nw.y-Y0)/tilewidth);
var layer = this.wmtsParams.layer;
return url = this._url+'?T='+layer+'&L='+ident+'&Y='+tilerow+'&X='+tilecol;
},
setParams: function (params, noRedraw) {
L.extend(this.wmtsParams, params);
if (!noRedraw) {
this.redraw();
}
return this;
},
getDefaultMatrix : function () {
/**
* the matrix3857 represents the projection
* for in the IGN WMTS for the google coordinates.
*/
var matrixIds3857 = new Array(22);
for (var i= 0; i<22; i++) {
matrixIds3857[i]= {
identifier : "" + i,
topLeftCorner : new L.LatLng(90,-180)
};
}
return matrixIds3857;
}
});
L.tileLayer.wmts = function (url, options) {
return new L.TileLayer.WMTS(url, options);
};说明：该类中，核心代码为getTileUrl这个部分，可仔细研究研究。
前台调用：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>leaflet</title>
<link rel="stylesheet" href="../../plugin/leaflet/leaflet.css" type="text/css">
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
<script src="../../plugin/jquery/jquery-1.8.3.js"></script>
<script src="../../plugin/leaflet/leaflet.js"></script>
<script src="extend/layer/tdtLayer.js"></script>
<script>
var map;
$(window).load(function() {
var url = "http://localhost:8081/tile/tdttile";
// var url = "http://t2.tianditu.com/DataServer";
/**
* 天地图地图类型说明
______________________________
图层名称 | 说明
vec_c | 矢量
img_c | 影像
ter_c | 地形
cva_c | 注记
eva_c | 英文注记
cia_c | 路网
eia_c | 英文路网
————————————————————————
*/
var vec_c = new L.TileLayer.WMTS(url ,
{
tileSize:256,
layer: 'vec_c'
}
);
var cva_c = new L.TileLayer.WMTS(url ,
{
tileSize:256,
layer: 'cva_c'
}
);
var map = L.map('map',{
crs:L.CRS.EPSG4326,
center: {lon:103.847 , lat:36.0473},
zoom: 4
})
map.addLayer(vec_c);
map.addLayer(cva_c);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>说明：代码中，有两个url，未注释的是离线天地图的url，注释掉的是在线天地图的url，离线天地图的可参考我的博文Openlayer是离线加载天地图.
---------------------------------------------------------------------------------------------------------------
技术博客
http://blog.csdn.NET/gisshixisheng
在线教程
http://edu.csdn.Net/course/detail/799
Github
https://github.com/lzugis/
联系方式
q q:1004740957
e-mail:niujp08@qq.com
公众号:lzugis15
Q Q 群:452117357(webgis)
337469080(Android)
