zoukankan      html  css  js  c++  java
  • 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

    Q Q 群:452117357(webgis)
                 337469080(Android)




  • 相关阅读:
    总结
    spring boot 使用mongodb基本操作与一些坑
    java 在循环中删除数组元素之二
    学习spring cloud 笔记
    一些名词解释
    redis--分布式锁
    微信小程序的加密与解密--java
    java 动态代理
    (收藏)CORS(跨域资源共享)
    策略模式学习笔记--在写更好的代码路上
  • 原文地址:https://www.cnblogs.com/lzugis/p/6539767.html
Copyright © 2011-2022 走看看