如何编写 maptalks plugin

前面写过 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