leaflet怎么加载天地图的wmts服务

Posted 2023-03-17

tags:

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

参考技术A Web地图服务（WMS）：利用具有地理空间位置信息的数据制作地图，其中将地图定义为地理数据可视的表现，地图本身并不是数据。地图通常以图像格式表达，例如PNG,GIF或是JPEG，有时候也表达为基于矢量图形，如可缩放矢量图形（SVG）或是网络电脑图形元文件等格式（WebCGM）。根据OGC规范，地图服务是专门提供共享地图数据的服务，负责根据客户程序的请求，提供地图图像、指定坐标点的要素信息、以及地图服务的功能说明信息。
WMS规范定义了三个接口（操作）：GetCapabilities（获取服务能力）, GetMap（获取地图）和GetFeatureInfo（获取对象信息）。其中GetMap为核心操作。GetCapabitities返回服务级元数据，它是对服务信息内容和要求参数的一种描述；GetMap返回一个地图影像，其地理空间参考和大小参数是明确定义了的；GetFeatureInfo（可选）返回显示在地图上的某些特殊要素的信息。这个规范还定义了一个用于调用上述操作的万维网统一资源定位器（URL）语法和服务级元数据的XML（可扩展标记语言）表达法。本回答被提问者采纳

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