如何編寫 maptalks plugin

前面寫過 maptalks plugin ( ArcGISTileLayer )，有讀者留言說文章寫得太精簡，根據文章給出的核心代碼沒辦法寫出一個完整的 plugin ( 文中有完整 demo 地址，可能太隱蔽 )，這篇文章具體地說下 plugin 如何編寫，並實現一個 plugin ( WMTSTileLayer )。

 

學習一個新東西，最好的方式就是找官方文檔。這裏介紹一種捷徑( 我的認爲 )，直接模仿已有的插件編寫。打開官網 plugins 頁面^[1]，找一個 plugin，如 maptalks.e3.js，下面參考 maptalks.e3.js 寫一個 WMTSTileLayer。

 

一、基本結構

以 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 })));

二、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 })));

三、試一試，加載天地圖 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