概述:
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)