前面写过 maptalks plugin ( ArcGISTileLayer )，有读者留言说文章写得太精简，根据文章给出的核心代码没办法写出一个完整的 plugin ( 文中有完整 demo 地址，可能太隐蔽 )，这篇文章具体地说下 plugin 如何编写，并实现一个 plugin ( WMTSTileLayer )。

学习一个新东西，最好的方式就是找官方文档。这里介绍一种捷径( 个人认为 )，直接模仿已有的插件编写。打开官网 plugins 页面[1]，找一个 plugin，如 maptalks.e3.js，下面参考 maptalks.e3.js 写一个 WMTSTileLayer。

1、基本结构

以 maptalks.e3.js 为基本版本，通过对比其他插件，去掉具体业务代码，得到一个 WMTSTileLayer 的基本框架如下：

 1 /*!
 2  * 版本申明
 3  * maptalks.wmts v0.1.0
 4  * LICENSE : MIT
 5  */
 6 /*!
 7  * 依赖申明
 8  * requires maptalks@^0.39.0
 9  */
10 // UMD 固定写法
11 (function (global, factory) {
12   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('maptalks')) :typeof define === 'function' && define.amd ? define(['exports', 'maptalks'], factory) :(factory((global.maptalks = global.maptalks || {}), global.maptalks));}(this, (function (exports, maptalks) {
13   'use strict';
14
15   // 定义layer
16   var WMTSTileLayer = function (_TileLayer) {
17     // 构造函数
18     function WMTSTileLayer(id, options) {
19
20     }
21     // 图层导出为 JSON
22     WMTSTileLayer.prototype.toJSON = function toJSON() {
23
24     };
25     // 图层导入
26     WMTSTileLayer.prototype.fromJSON = function fromJSON(layerJSON) {
27
28     };
29     return WMTSTileLayer;
30   }(maptalks.TileLayer);
31
32   // 注册图层
33   WMTSTileLayer.registerJSONType('WMTSTileLayer');
34
35   // 导出整个类，外界调用入口
36   exports.WMTSTileLayer = WMTSTileLayer;
37
38   Object.defineProperty(exports, '__esModule', { value: true });
39
40   // 一些打印信息
41   typeof console !== 'undefined' && console.log('maptalks.wmts v0.1.0, requires maptalks@^0.39.0.');
42
43 })));

2、WMTS 服务

网上搜索 WMTS 服务接口说明[2]，得到参数说明如下：

拿到参数说明后，接下来就是具体代码实现。WMTS 服务是切片服务，相比 WMS 而言，牺牲定制地图的灵活性来提升性能，那么具体的代码实现可以参考官方的 WMTSTileLayer[3]，具体实现代码如下：

 1 /*!
 2  * 版本申明
 3  * maptalks.wmts v0.1.0
 4  * LICENSE : MIT
 5  */
 6 /*!
 7  * 依赖申明
 8  * requires maptalks@^0.39.0
 9  */
10 // UMD 固定写法
11 (function (global, factory) {
12   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('maptalks')) :typeof define === 'function' && define.amd ? define(['exports', 'maptalks'], factory) :(factory((global.maptalks = global.maptalks || {}), global.maptalks));}(this, (function (exports, maptalks) {
13   'use strict';
14
15  // 参数大小写配置
16   var options$v2 = {
17     uppercase: false
18   };
19   // 参数默认值
20   var defaultWmtsParams = {
21     service: 'WMTS',
22     request: 'GetTile',
23     layer: '',
24     tilematrixset: '',
25     format: 'image/png',
26     version: '1.0.0'
27   };
28
29   // 定义layer
30   var WMTSTileLayer = function (_TileLayer) {
31      // 继承
32      _inherits(WMTSTileLayer, _TileLayer);
33     // 构造函数，mixins 参数
34     function WMTSTileLayer(id, options) {
35       var _this;
36       _this = _TileLayer.call(this, id) || this;
37       var wmtsParams = extend({}, defaultWmtsParams);
38       for (var p in options) {
39         if (!(p in _this.options)) {
40           wmtsParams[p] = options[p];
41         }
42       }
43       // 改写 url
44       var url = options.urlTemplate;
45       options.urlTemplate = url + getParamString(wmtsParams, url, this.options.uppercase) + '&tileMatrix={z}&tileRow={y}&tileCol={x}';
46
47       _this.setOptions(options);
48       _this.setZIndex(options.zIndex);
49       return _this;
50     }
51     // 图层导出为 JSON
52     WMTSTileLayer.prototype.toJSON = function toJSON() {
53       return {
54         'type': 'WMTSTileLayer',
55         'id': this.getId(),
56         'options': this.config()
57       };
58     };
59     // 图层导入
60     WMTSTileLayer.prototype.fromJSON = function fromJSON(layerJSON) {
61       if (!layerJSON || layerJSON['type'] !== 'WMTSTileLayer') {
62         return null;
63       }
64       return new WMTSTileLayer(layerJSON['id'], layerJSON['options']);
65     };
66     return WMTSTileLayer;
67   }(maptalks.TileLayer);
68
69   // 注册图层
70   WMTSTileLayer.registerJSONType('WMTSTileLayer');
71
72   // 导出整个类，外界调用入口
73   exports.WMTSTileLayer = WMTSTileLayer;
74
75   Object.defineProperty(exports, '__esModule', { value: true });
76
77   // 一些打印信息
78   typeof console !== 'undefined' && console.log('maptalks.wmts v0.1.0, requires maptalks@^0.39.0.');
79
80 })));

3、试一试，加载天地图 WMTS 服务[4]

 1 var map = new maptalks.Map('map', {
 2     center: [105.08052356963802, 36.04231948670001],
 3     zoom: 4,
 4     minZoom:1,
 5     maxZoom:18,
 6     spatialReference:{
 7         projection:'EPSG:4326'
 8     },
 9     baseLayer: new maptalks.WMTSTileLayer('base', {
10         tileSystem : [1, -1, -180, 90],
11         layer:'vec',
12         tilematrixset:'c',
13         format:'tiles',
14         urlTemplate:'http://t{s}.tianditu.com/vec_c/wmts?tk=de0dc270a51aaca3dd4e64d4f8c81ff6',
15         subdomains:['1', '2', '3', '4', '5'],
16         attribution : '&copy; <a target="_blank" href="http://www.tianditu.cn">Tianditu</a>'
17     }),
18     layers : [
19         new maptalks.WMTSTileLayer('road', {
20             layer:'cva',
21             tilematrixset:'c',
22             format:'tiles',
23             urlTemplate:'http://t{s}.tianditu.com/cva_c/wmts?tk=de0dc270a51aaca3dd4e64d4f8c81ff6',
24             subdomains:['1', '2', '3', '4', '5'],
25             opacity:1
26         })
27     ]
28 });

[1] http://maptalks.org/plugins.html
[2] http://tdt.fuzhou.gov.cn/help/apipfs/3.htm
[3] https://github.com/maptalks/maptalks.js/blob/master/src/layer/tile/WMSTileLayer.js
[4] http://maptalks.org/examples/en/tilelayer-projection/wms/#tilelayer-projection_wms

转载于:https://www.cnblogs.com/lifefriend/p/11048318.html

如何编写 maptalks plugin相关推荐

  1. MySQLPlugin之如何编写Auth Plugin

    转载请署名:印风 --------------------------------------------------------------------- 1.什么是Auth Plugin 我们先介 ...

  2. mysql sysvar int_MySQL:如何编写daemon plugin

    1.什么是DaemonPlugin 顾名思义,daemon plugin就是一种用来在后台运行的插件,在插件中,我们可以创建一些后台线程来做些有趣的事情.大名鼎鼎的handlesocket就是一个da ...

  3. n 如何编写html,webpack4系列教程，如何编写plugin处理html代码逻辑？

    本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规.大家都是程序员,不要闹得不开心. 在上一篇文章中,利用不同位置的publicPath,对html中的cdn地址,进行了处理.但是,遗留了一个小问 ...

  4. IDA Plugin 编写基础

    IDA Plugin 编写基础 IDA是迄今为止最为强大的反汇编器,它有着众多的功能.但是如果它不具备通过附加的模块来对标准的函数进行扩展的功能(粗俗点说就是plugin)的话,也就有负此盛名了.现在 ...

  5. Dynamics 365 CRM (online) 使用WebApi调用全局action（Plugin)执行批量更新操作， 前端JS批量上传记录到CRM中

    创建一个action process,如下图,分别有两个inputparameter 和一个outputparameter 2.使用visual studio 2019编写一个plugin dll, ...

  6. Cacti/Nagios监控系统应用场景

    Cacti介绍 Cacti是一个用 rrdtool 来画图的网络监控系统,通常一说到网络管理,大家首先想到的经常是 mrtg,但是 mrtg 画的图简单且难看,rrdtool 虽然画图本领一流,画出来 ...

  7. nagios安装与配置详解1

    一.Nagios简介 Nagios是一款开源的电脑系统和网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信报 ...

  8. Dubbo 跨语言调用神兽：dubbo-go-pixiu

    简介:Pixiu 是基于 Dubbogo 的云原生.高性能.可扩展的微服务 API 网关.作为一款网关产品,Pixiu 帮助用户轻松创建.发布.维护.监控和保护任意规模的 API ,接受和处理成千上万 ...

  9. 探讨TensorRT加速AI模型的简易方案 — 以图像超分为例

    AI模型近年来被广泛应用于图像.视频处理,并在超分.降噪.插帧等应用中展现了良好的效果.但由于图像AI模型的计算量大,即便部署在GPU上,有时仍达不到理想的运行速度.为此,NVIDIA推出了Tenso ...

  10. 为支持两个语言版本，我基于谷歌翻译API写了一款自动翻译的 webpack 插件

    大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...

最新文章

  1. 她说要介绍10000个开源项目？来！一起监督他！
  2. php支付密码控件,vue支付密码的图文实例
  3. Logan：美团点评的开源移动端基础日志库
  4. 译 | 像使用一台主机一样管理集群
  5. 宝塔面板 php关闭拓展,宝塔Linux面板中PHP如何安装扩展及禁用函数？
  6. golang日志服务器_golang 写日志到syslog
  7. kali字典_Web渗透测试——暴力破解字典制作工具的使用2
  8. 如何使用CDSN写博客
  9. dwg格式转换pdf
  10. 基于阿里云服务器使用kubeadm搭建k8s集群
  11. Matlab设置黑色背景
  12. icodelab 取走的弹珠（多组数据）
  13. 143120-27-8，CYCLO(-D-TYR-ARG-GLY-ASP-CYS (CARBOXYMETHYL)-OH) SULFOXIDE
  14. on后面使用and和where的区别
  15. 关于区块链的想法和感想
  16. 英语发音规则---E字母常见的发音组合有哪些
  17. 直播网站是怎么实现的
  18. kan-java, 一个能裁剪语法特性的java动态编译工具
  19. SHA256 Hashes
  20. 什么样的选择会大于努力？如何选？

热门文章

  1. poj 4451 Dressing 一个小模拟 金华regional
  2. Illustrator2020中文版教程，如何在AI中使用蒙版来裁剪内容？
  3. iOS开发Cocoapods执行命令pod setup，执行失败解决RPC failed; curl 56 LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 54
  4. 如何在macOS Big Sur的Voice Memos中使用增强录音和智能文件夹？
  5. 使用PDF Converter OCR for Mac如何区分扫描的PDF和普通文件？
  6. Jump Desktop for Mac(远程桌面控制工具)怎么链接windows电脑
  7. openJDK 源码下载
  8. 【好】Paxos以及分布式一致性的学习
  9. Linux学习一天一个命令(1)[ls命令]
  10. Mellanox infinoband RDMA SDP