目錄

?

?

前言

過程

---

?

前言

關于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 paramsif (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) -> Stringvar 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 paramsif (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) -> Stringvar 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>

?

總結

以上是生活随笔為你收集整理的Leaflet笔记-把leaflet-tilelayer-wmts移植到vue cli中（含思路）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。