如何編寫 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 的基本框架如下：

/*!
 * 版本申明
 * maptalks.wmts v0.1.0
 * LICENSE : MIT
 */
/*!
 * 依賴申明
 * requires maptalks@^0.39.0 
 */
// UMD 固定寫法
(function (global, factory) {
  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) {
  'use strict';
  
  // 定義layer
  var WMTSTileLayer = function (_TileLayer) {
    // 構造函數
    function WMTSTileLayer(id, options) {
      
    }
    // 圖層導出為 JSON
    WMTSTileLayer.prototype.toJSON = function toJSON() {
      
    };
    // 圖層導入 
    WMTSTileLayer.prototype.fromJSON = function fromJSON(layerJSON) {
      
    };
    return WMTSTileLayer;
  }(maptalks.TileLayer);

  // 注冊圖層
  WMTSTileLayer.registerJSONType('WMTSTileLayer');
  
  // 導出整個類，外界調用入口
  exports.WMTSTileLayer = WMTSTileLayer;

  Object.defineProperty(exports, '__esModule', { value: true });
    
  // 一些打印信息
  typeof console !== 'undefined' && console.log('maptalks.wmts v0.1.0, requires maptalks@^0.39.0.');
    
})));

2、WMTS 服務

網上搜索 WMTS 服務接口說明^[2]，得到參數說明如下：

拿到參數說明后，接下來就是具體代碼實現。WMTS 服務是切片服務，相比 WMS 而言，犧牲定制地圖的靈活性來提升性能，那么具體的代碼實現可以參考官方的 WMTSTileLayer^[3]，具體實現代碼如下：

/*!
 * 版本申明
 * maptalks.wmts v0.1.0
 * LICENSE : MIT
 */
/*!
 * 依賴申明
 * requires maptalks@^0.39.0 
 */
// UMD 固定寫法
(function (global, factory) {
  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) {
  'use strict';
  
 // 參數大小寫配置
  var options$v2 = {
    uppercase: false
  };
  // 參數默認值
  var defaultWmtsParams = {
    service: 'WMTS',
    request: 'GetTile',
    layer: '',
    tilematrixset: '',
    format: 'image/png',
    version: '1.0.0'
  };
    
  // 定義layer
  var WMTSTileLayer = function (_TileLayer) {
     // 繼承
     _inherits(WMTSTileLayer, _TileLayer);
    // 構造函數，mixins 參數
    function WMTSTileLayer(id, options) {
      var _this;
      _this = _TileLayer.call(this, id) || this;
      var wmtsParams = extend({}, defaultWmtsParams);
      for (var p in options) {
        if (!(p in _this.options)) {
          wmtsParams[p] = options[p];
        }
      }
      // 改寫 url
      var url = options.urlTemplate;
      options.urlTemplate = url + getParamString(wmtsParams, url, this.options.uppercase) + '&tileMatrix={z}&tileRow={y}&tileCol={x}';
        
      _this.setOptions(options);
      _this.setZIndex(options.zIndex);
      return _this;
    }
    // 圖層導出為 JSON
    WMTSTileLayer.prototype.toJSON = function toJSON() {
      return {
        'type': 'WMTSTileLayer',
        'id': this.getId(),
        'options': this.config()
      };
    };
    // 圖層導入 
    WMTSTileLayer.prototype.fromJSON = function fromJSON(layerJSON) {
      if (!layerJSON || layerJSON['type'] !== 'WMTSTileLayer') {
        return null;
      }
      return new WMTSTileLayer(layerJSON['id'], layerJSON['options']);
    };
    return WMTSTileLayer;
  }(maptalks.TileLayer);

  // 注冊圖層
  WMTSTileLayer.registerJSONType('WMTSTileLayer');
  
  // 導出整個類，外界調用入口
  exports.WMTSTileLayer = WMTSTileLayer;

  Object.defineProperty(exports, '__esModule', { value: true });
    
  // 一些打印信息
  typeof console !== 'undefined' && console.log('maptalks.wmts v0.1.0, requires maptalks@^0.39.0.');
    
})));

3、試一試，加載天地圖 WMTS 服務^[4]

var map = new maptalks.Map('map', {
    center: [105.08052356963802, 36.04231948670001],
    zoom: 4,
    minZoom:1,
    maxZoom:18,
    spatialReference:{
        projection:'EPSG:4326'
    },
    baseLayer: new maptalks.WMTSTileLayer('base', {
        tileSystem : [1, -1, -180, 90],
        layer:'vec',
        tilematrixset:'c',
        format:'tiles',
        urlTemplate:'http://t{s}.tianditu.com/vec_c/wmts?tk=de0dc270a51aaca3dd4e64d4f8c81ff6',
        subdomains:['1', '2', '3', '4', '5'],
        attribution : '&copy; <a target="_blank" href="http://www.tianditu.cn">Tianditu</a>'
    }),
    layers : [
        new maptalks.WMTSTileLayer('road', {
            layer:'cva',
            tilematrixset:'c',
            format:'tiles',
            urlTemplate:'http://t{s}.tianditu.com/cva_c/wmts?tk=de0dc270a51aaca3dd4e64d4f8c81ff6',
            subdomains:['1', '2', '3', '4', '5'],
            opacity:1
        })
    ]
});

[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