关键词搜索

源码搜索 ×
×

Leaflet笔记-把leaflet-tilelayer-wmts移植到vue cli中（含思路）

发布2019-09-11浏览6484次

详情内容

目录

 

 

前言

过程

 

前言

关于leaflet的webpackage使用npm安装官方是有明显的解析

但是关于插件特别是TileLayer.WMTS是不提供的，但提供了源码，可以稍微修改下，就能在vue cli中使用，在此记录下，这个经验很有用，方便自己以后查阅。

 

过程

先把leaflet下载下来

npm install leaflet

把leaflet.TileLayer.WMTS的Github中把leaflet-tilelayer-wmts-src.js的源码拷贝下！

安装好后在vue中引用：

拷贝后，把源码修改为：

  1.       /***
  2.        * 插件移植开始
  3.        */
  4.  
  5.       $L.TileLayer.WMTS = $L.TileLayer.extend({
  6.         defaultWmtsParams: {
  7.           service: 'WMTS',
  8.           request: 'GetTile',
  9.           version: '1.0.0',
  10.           layer: '',
  11.           style: '',
  12.           tilematrixset: '',
  13.           format: 'image/jpeg'
  14.         },
  15.  
  16.         initialize: function (url, options) { // (String, Object)
  17.           this._url = url;
  18.           var lOptions= {};
  19.           var cOptions = Object.keys(options);
  20.           cOptions.forEach(element=>{
  21.             lOptions[element.toLowerCase()]=options[element];
  22.           });
  23.           var wmtsParams = $L.extend({}, this.defaultWmtsParams);
  24.           var tileSize = lOptions.tileSize || this.options.tileSize;
  25.           if (lOptions.detectRetina && $L.Browser.retina) {
  26.             wmtsParams.width = wmtsParams.height = tileSize * 2;
  27.           } else {
  28.             wmtsParams.width = wmtsParams.height = tileSize;
  29.           }
  30.           for (var i in lOptions) {
  31.             // all keys that are in defaultWmtsParams options go to WMTS params
  32.             if (wmtsParams.hasOwnProperty(i) && i!="matrixIds") {
  33.               wmtsParams[i] = lOptions[i];
  34.             }
  35.           }
  36.           this.wmtsParams = wmtsParams;
  37.           this.matrixIds = options.matrixIds||this.getDefaultMatrix();
  38.           $L.setOptions(this, options);
  39.         },
  40.  
  41.         onAdd: function (map) {
  42.           this._crs = this.options.crs || map.options.crs;
  43.           $L.TileLayer.prototype.onAdd.call(this, map);
  44.         },
  45.  
  46.         getTileUrl: function (coords) { // (Point, Number) -> String
  47.           var tileSize = this.options.tileSize;
  48.           var nwPoint = coords.multiplyBy(tileSize);
  49.           nwPoint.x+=1;
  50.           nwPoint.y-=1;
  51.           var sePoint = nwPoint.add(new $L.Point(tileSize, tileSize));
  52.           var zoom = this._tileZoom;
  53.           var nw = this._crs.project(this._map.unproject(nwPoint, zoom));
  54.           var se = this._crs.project(this._map.unproject(sePoint, zoom));
  55.           var tilewidth = se.x-nw.x;
  56.           var ident = this.matrixIds[zoom].identifier;
  57.           var tilematrix = this.wmtsParams.tilematrixset + ":" + ident;
  58.           var X0 = this.matrixIds[zoom].topLeftCorner.lng;
  59.           var Y0 = this.matrixIds[zoom].topLeftCorner.lat;
  60.           var tilecol=Math.floor((nw.x-X0)/tilewidth);
  61.           var tilerow=-Math.floor((nw.y-Y0)/tilewidth);
  62.           var url = $L.Util.template(this._url, {s: this._getSubdomain(coords)});
  63.           return url + $L.Util.getParamString(this.wmtsParams, url) + "&tilematrix=" + tilematrix + "&tilerow=" + tilerow +"&tilecol=" + tilecol;
  64.         },
  65.  
  66.         setParams: function (params, noRedraw) {
  67.           $L.extend(this.wmtsParams, params);
  68.           if (!noRedraw) {
  69.             this.redraw();
  70.           }
  71.           return this;
  72.         },
  73.  
  74.         getDefaultMatrix : function () {
  75.           /**
  76.            * the matrix3857 represents the projection
  77.            * for in the IGN WMTS for the google coordinates.
  78.            */
  79.           var matrixIds3857 = new Array(22);
  80.           for (var i= 0; i<22; i++) {
  81.             matrixIds3857[i]= {
  82.               identifier    : "" + i,
  83.               topLeftCorner : new $L.LatLng(20037508.3428,-20037508.3428)
  84.             };
  85.           }
  86.           return matrixIds3857;
  87.         }
  88.       });
  89.  
  90.       $L.tileLayer.wmts = function (url, options) {
  91.         return new $L.TileLayer.WMTS(url, options);
  92.       };
  93.  
  94.  
  95.       /***
  96.        * 插件移植结束
  97.         */

其实就是把L改成了$L，这样就可以访问了！

这里把JSMap.vue贴一下

  1. <template>
  2.     <div>
  3.       <div id="map">
  4.       </div>
  5.     </div>
  6. </template>
  7.  
  8. <script>
  9.  
  10.   import "leaflet/dist/leaflet.css"
  11.   import $L from "leaflet";
  12.  
  13.   export default {
  14.     mounted(){
  15.  
  16.       /***
  17.        * 插件移植开始
  18.        */
  19.  
  20.       $L.TileLayer.WMTS = $L.TileLayer.extend({
  21.         defaultWmtsParams: {
  22.           service: 'WMTS',
  23.           request: 'GetTile',
  24.           version: '1.0.0',
  25.           layer: '',
  26.           style: '',
  27.           tilematrixset: '',
  28.           format: 'image/jpeg'
  29.         },
  30.  
  31.         initialize: function (url, options) { // (String, Object)
  32.           this._url = url;
  33.           var lOptions= {};
  34.           var cOptions = Object.keys(options);
  35.           cOptions.forEach(element=>{
  36.             lOptions[element.toLowerCase()]=options[element];
  37.           });
  38.           var wmtsParams = $L.extend({}, this.defaultWmtsParams);
  39.           var tileSize = lOptions.tileSize || this.options.tileSize;
  40.           if (lOptions.detectRetina && $L.Browser.retina) {
  41.             wmtsParams.width = wmtsParams.height = tileSize * 2;
  42.           } else {
  43.             wmtsParams.width = wmtsParams.height = tileSize;
  44.           }
  45.           for (var i in lOptions) {
  46.             // all keys that are in defaultWmtsParams options go to WMTS params
  47.             if (wmtsParams.hasOwnProperty(i) && i!="matrixIds") {
  48.               wmtsParams[i] = lOptions[i];
  49.             }
  50.           }
  51.           this.wmtsParams = wmtsParams;
  52.           this.matrixIds = options.matrixIds||this.getDefaultMatrix();
  53.           $L.setOptions(this, options);
  54.         },
  55.  
  56.         onAdd: function (map) {
  57.           this._crs = this.options.crs || map.options.crs;
  58.           $L.TileLayer.prototype.onAdd.call(this, map);
  59.         },
  60.  
  61.         getTileUrl: function (coords) { // (Point, Number) -> String
  62.           var tileSize = this.options.tileSize;
  63.           var nwPoint = coords.multiplyBy(tileSize);
  64.           nwPoint.x+=1;
  65.           nwPoint.y-=1;
  66.           var sePoint = nwPoint.add(new $L.Point(tileSize, tileSize));
  67.           var zoom = this._tileZoom;
  68.           var nw = this._crs.project(this._map.unproject(nwPoint, zoom));
  69.           var se = this._crs.project(this._map.unproject(sePoint, zoom));
  70.           var tilewidth = se.x-nw.x;
  71.           var ident = this.matrixIds[zoom].identifier;
  72.           var tilematrix = this.wmtsParams.tilematrixset + ":" + ident;
  73.           var X0 = this.matrixIds[zoom].topLeftCorner.lng;
  74.           var Y0 = this.matrixIds[zoom].topLeftCorner.lat;
  75.           var tilecol=Math.floor((nw.x-X0)/tilewidth);
  76.           var tilerow=-Math.floor((nw.y-Y0)/tilewidth);
  77.           var url = $L.Util.template(this._url, {s: this._getSubdomain(coords)});
  78.           return url + $L.Util.getParamString(this.wmtsParams, url) + "&tilematrix=" + tilematrix + "&tilerow=" + tilerow +"&tilecol=" + tilecol;
  79.         },
  80.  
  81.         setParams: function (params, noRedraw) {
  82.           $L.extend(this.wmtsParams, params);
  83.           if (!noRedraw) {
  84.             this.redraw();
  85.           }
  86.           return this;
  87.         },
  88.  
  89.         getDefaultMatrix : function () {
  90.           /**
  91.            * the matrix3857 represents the projection
  92.            * for in the IGN WMTS for the google coordinates.
  93.            */
  94.           var matrixIds3857 = new Array(22);
  95.           for (var i= 0; i<22; i++) {
  96.             matrixIds3857[i]= {
  97.               identifier    : "" + i,
  98.               topLeftCorner : new $L.LatLng(20037508.3428,-20037508.3428)
  99.             };
  100.           }
  101.           return matrixIds3857;
  102.         }
  103.       });
  104.  
  105.       $L.tileLayer.wmts = function (url, options) {
  106.         return new $L.TileLayer.WMTS(url, options);
  107.       };
  108.  
  109.  
  110.       /***
  111.        * 插件移植结束
  112.         */
  113.  
  114.       const ign = new $L.TileLayer.WMTS( "http://XXX.XXX.XXX.XXX:8080/geoserver/gwc/service/wmts" ,
  115.         {
  116.           layer: 'GG_9:gg_9',
  117.           tilematrixset: "EPSG:900913",
  118.           Format : 'image/png',
  119.           TileMatrix: 'EPSG:900913:8'
  120.         }
  121.       );
  122.  
  123.       const map = $L.map('map', {
  124.         minZoom: 4,
  125.         maxZoom: 7
  126.       }).setView([32, 118], 7);
  127.  
  128.  
  129.  
  130.       $L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);
  131.  
  132.       map.addLayer(ign);
  133.  
  134.       map.invalidateSize(true);
  135.     }
  136.   }
  137. </script>
  138.  
  139. <style>
  140.  
  141.   #map {
  142.     width: 800px;
  143.     height: 800px;
  144.   }
  145.  
  146.   .chart{
  147.     width: 600px;
  148.     height: 300px;
  149.     background-color: #fff;
  150.   }
  151. </style>

 

相关技术文章

最新源码

下载排行榜
点击QQ咨询
开通会员
返回顶部
×
微信扫码支付 元
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载