目录

 

 

前言

过程

---

 

前言

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

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

 

过程

先把leaflet下载下来

npm install leaflet

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

安装好后在vue中引用：

拷贝后，把源码修改为：

      /***
       * 插件移植开始
       */

      $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 lOptions= {};
          var cOptions = Object.keys(options);
          cOptions.forEach(element=>{
            lOptions[element.toLowerCase()]=options[element];
          });
          var wmtsParams = $L.extend({}, this.defaultWmtsParams);
          var tileSize = lOptions.tileSize || this.options.tileSize;
          if (lOptions.detectRetina && $L.Browser.retina) {
            wmtsParams.width = wmtsParams.height = tileSize * 2;
          } else {
            wmtsParams.width = wmtsParams.height = tileSize;
          }
          for (var i in lOptions) {
            // all keys that are in defaultWmtsParams options go to WMTS params
            if (wmtsParams.hasOwnProperty(i) && i!="matrixIds") {
              wmtsParams[i] = lOptions[i];
            }
          }
          this.wmtsParams = wmtsParams;
          this.matrixIds = options.matrixIds||this.getDefaultMatrix();
          $L.setOptions(this, options);
        },

        onAdd: function (map) {
          this._crs = this.options.crs || map.options.crs;
          $L.TileLayer.prototype.onAdd.call(this, map);
        },

        getTileUrl: function (coords) { // (Point, Number) -> String
          var tileSize = this.options.tileSize;
          var nwPoint = coords.multiplyBy(tileSize);
          nwPoint.x+=1;
          nwPoint.y-=1;
          var sePoint = nwPoint.add(new $L.Point(tileSize, tileSize));
          var zoom = this._tileZoom;
          var nw = this._crs.project(this._map.unproject(nwPoint, zoom));
          var se = this._crs.project(this._map.unproject(sePoint, zoom));
          var tilewidth = se.x-nw.x;
          var ident = this.matrixIds[zoom].identifier;
          var tilematrix = this.wmtsParams.tilematrixset + ":" + ident;
          var X0 = this.matrixIds[zoom].topLeftCorner.lng;
          var Y0 = this.matrixIds[zoom].topLeftCorner.lat;
          var tilecol=Math.floor((nw.x-X0)/tilewidth);
          var tilerow=-Math.floor((nw.y-Y0)/tilewidth);
          var url = $L.Util.template(this._url, {s: this._getSubdomain(coords)});
          return url + $L.Util.getParamString(this.wmtsParams, url) + "&tilematrix=" + tilematrix + "&tilerow=" + tilerow +"&tilecol=" + 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(20037508.3428,-20037508.3428)
            };
          }
          return matrixIds3857;
        }
      });

      $L.tileLayer.wmts = function (url, options) {
        return new $L.TileLayer.WMTS(url, options);
      };


      /***
       * 插件移植结束
        */

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

这里把JSMap.vue贴一下

<template>
    <div>
      <div id="map">
      </div>
    </div>
</template>

<script>

  import "leaflet/dist/leaflet.css"
  import $L from "leaflet";

  export default {
    mounted(){

      /***
       * 插件移植开始
       */

      $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 lOptions= {};
          var cOptions = Object.keys(options);
          cOptions.forEach(element=>{
            lOptions[element.toLowerCase()]=options[element];
          });
          var wmtsParams = $L.extend({}, this.defaultWmtsParams);
          var tileSize = lOptions.tileSize || this.options.tileSize;
          if (lOptions.detectRetina && $L.Browser.retina) {
            wmtsParams.width = wmtsParams.height = tileSize * 2;
          } else {
            wmtsParams.width = wmtsParams.height = tileSize;
          }
          for (var i in lOptions) {
            // all keys that are in defaultWmtsParams options go to WMTS params
            if (wmtsParams.hasOwnProperty(i) && i!="matrixIds") {
              wmtsParams[i] = lOptions[i];
            }
          }
          this.wmtsParams = wmtsParams;
          this.matrixIds = options.matrixIds||this.getDefaultMatrix();
          $L.setOptions(this, options);
        },

        onAdd: function (map) {
          this._crs = this.options.crs || map.options.crs;
          $L.TileLayer.prototype.onAdd.call(this, map);
        },

        getTileUrl: function (coords) { // (Point, Number) -> String
          var tileSize = this.options.tileSize;
          var nwPoint = coords.multiplyBy(tileSize);
          nwPoint.x+=1;
          nwPoint.y-=1;
          var sePoint = nwPoint.add(new $L.Point(tileSize, tileSize));
          var zoom = this._tileZoom;
          var nw = this._crs.project(this._map.unproject(nwPoint, zoom));
          var se = this._crs.project(this._map.unproject(sePoint, zoom));
          var tilewidth = se.x-nw.x;
          var ident = this.matrixIds[zoom].identifier;
          var tilematrix = this.wmtsParams.tilematrixset + ":" + ident;
          var X0 = this.matrixIds[zoom].topLeftCorner.lng;
          var Y0 = this.matrixIds[zoom].topLeftCorner.lat;
          var tilecol=Math.floor((nw.x-X0)/tilewidth);
          var tilerow=-Math.floor((nw.y-Y0)/tilewidth);
          var url = $L.Util.template(this._url, {s: this._getSubdomain(coords)});
          return url + $L.Util.getParamString(this.wmtsParams, url) + "&tilematrix=" + tilematrix + "&tilerow=" + tilerow +"&tilecol=" + 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(20037508.3428,-20037508.3428)
            };
          }
          return matrixIds3857;
        }
      });

      $L.tileLayer.wmts = function (url, options) {
        return new $L.TileLayer.WMTS(url, options);
      };


      /***
       * 插件移植结束
        */

      const ign = new $L.TileLayer.WMTS( "http://XXX.XXX.XXX.XXX:8080/geoserver/gwc/service/wmts" ,
        {
          layer: 'GG_9:gg_9',
          tilematrixset: "EPSG:900913",
          Format : 'image/png',
          TileMatrix: 'EPSG:900913:8'
        }
      );

      const map = $L.map('map', {
        minZoom: 4,
        maxZoom: 7
      }).setView([32, 118], 7);



      $L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);

      map.addLayer(ign);

      map.invalidateSize(true);
    }
  }
</script>

<style>

  #map {
    width: 800px;
    height: 800px;
  }

  .chart{
    width: 600px;
    height: 300px;
    background-color: #fff;
  }
</style>