leaflet加载天地图

Posted 2022-07-31 牛老师讲GIS

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了leaflet加载天地图相关的知识，希望对你有一定的参考价值。

概述：

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