如何编写 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

巴特西

如何编写 maptalks plugin

最新文章

热门文章