前言

关于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中（含思路）相关推荐

Web前端笔记-js中加载图片文件（vue cli中同样适用）
这里主要是在vue cli项目中加载图片的时候会出现304,特别是使用自己写的js加载图片的时候,此博文记录了解决办法. 在js文件中引用文件 import img from '@/assets/im ...
Web前端笔记-vue cli中使用echarts加载geo地图
效果是这样的: 此处是使用echarts加载geo地图. 这里简单说下逻辑: 首先npm下个包: npm install echarts 然后用个vue组件封装下. 如下代码: <templat ...
Web前端文档阅读笔记-vis.js动态添加节点（vue cli环境）
这里主要是针对vis的network图进行节点动态添加图用的是vis.js,表单使用的是element-ui 程序运行截图如下: 添加一个节点: 这里是不需要刷新页面就能添加的. 程序结构如下: 关 ...
Web前端文档阅读笔记-vis.js在vue cli中的使用
程序运行截图如下: 首先要用npm导入的vis包 npm run vis 程序结构如下: 源码如下: HelloWorld.vue <template><div id="n ...
前端笔记-vue cli中使用router-link进行路由跳转
目录以前的方法新方法以前的方法以前是通过router的push进行跳转,代码如下: <template><div class="XXXXXXXXXXXXXXXXX& ...
前端笔记-Vue cli中使用axios后JavaScript变量传输给vue变量要注意的地方
目录 axios.all中的注意事项为什么要采用全局的JavaScript变量给vue变量 axios.all中的注意事项如下的请求: methods:{getData(){axios.all([ ...
前端笔记-vue cli中axios批量发送get和post请求及注意事项
目录基本概念关键代码基本概念这里安装好axios后,还要安装qs npm install --save qs 在vue cli中在created里面调用方法,他会在页面加载完成后自动调用! 批 ...
前端笔记-vue cli中v-bind动态数据实时更新
目录基本概念代码基本概念如下的例子,刚开始运行: 点击按钮: 数据库修改下数据: 再点击按钮刷新下: 下面给出请求的json数据: 刷新有2个方式第一种是强制刷新,这样是有问题的,数据和图表 ...
前端笔记-vue cli中使用echarts画江苏省地图
目录基本概念代码与实例基本概念这里使用echarts,框架用vue cli,下面这个链接是vue cli导入echarts https://blog.csdn.net/qq78442761/a ...

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

前言

过程

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

最新文章

热门文章