前面写过 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的更多相关文章

  1. 编写jquery Plugin

    编写jquery插件的原则 1.给$.fn绑定函数,实现插件的代码逻辑 2.插件函数最后要return this,以支持链式调用 3.插件函数要有默认值,绑定在$.fn.<pluginName& ...

  2. webpack中如何编写一个plugin

    loader和plugin有什么区别呢?什么是loader,什么是plugin. 当我们在源代码里面去引入一个新的js文件或者一个其他格式的文件的时候,这个时候,我们可以借助loader去帮我们处理引 ...

  3. webpack编写一个plugin插件

    插件向第三方开发者提供了 webpack 引擎中完整的能力.使用阶段式的构建回调,开发者可以引入它们自己的行为到 webpack 构建流程中.创建插件比创建 loader 更加高级,因为你将需要理解一 ...

  4. 编写NPAPI plugin的命名问题

    最近写了个NPAPI的插件,在chrome上用得好好的,结果在火狐上死活不认我的插件,找了N多资料最后在官方的说明里才找到说火狐浏览器的插件的文件名必须是以np开头的,立刻吐血三升,难怪被chrome ...

  5. Maya Plugin 编译Maya插件

    Maya自身的功能就已经非常强大了,但是更棒的是它的扩展性非常强,提供API让用户自己来编写插件Plugin.Maya的插件主要是两种,一种是用C++编写的,后缀为".mll",另 ...

  6. 简单 babel plugin 开发-使用lerna 工具

    babel在现在的web 应用开发上具有很重要的作用,帮助我们做了好多事情,同时又有 比较多的babel plugin 可以解决我们实际开发上的问题. 以下只是学习下如果编写一个简单的babel pl ...

  7. 编写jQuery 插件

    编写jQuery Plugin,要设置默认值,并允许用户修改默认值,或者运行是传入其他值. 最终,我们得出编写一个jQuery插件的原则: 给$.fn绑定函数,实现插件的代码逻辑: 插件函数最后要 r ...

  8. Nagios学习实践系列——产品介绍篇

    Nagios介绍 Nagios是一款功能强大.优秀的开源监控系统,它能够让你发现和解决IT架构中存在的问题,避免这些问题影响到关键业务流程. Nagios最早于1999年发布,它在开源社区的影响力是相 ...

  9. Linux下Nagios的安装与配置[转]

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

随机推荐

  1. C# OpenCVSharp使用SetMouseCallback设置回调方法,报错"向非托管代码传递委托时,托管应用程序必须让这些委托保持活动状态,直到确信不会再次调用它们。"

    一.描述问题 当非托管代码调用托管应用程序的委托的时候,经常会报错“托管调试助手 "CallbackOnCollectedDelegate"   Message=托管调试助手 &q ...

  2. 项目部署到Linux上遇到的坑

    作者:晨钟暮鼓c个人微信公众号:程序猿的月光宝盒 1.本地Navicat for MySQL无法连接至服务器(Centos 7 x86_64 bbr) 1045错误: 解决步骤: ​ 1.查看用户名密 ...

  3. vue小案例--简易评论区

    一.小案例(评论区) 1.流程 (1)分析静态页面.(vue项目创建参考https://www.cnblogs.com/l-y-h/p/11241503.html)(2)拆分静态页面,变成一个个组件. ...

  4. [转]UiPath教程:UiPath及其组件介绍

    本文转自:http://www.rpa-cn.com/UiPathxuexirenzheng/UiPathzaixianxueyuan/2019-06-05/937.html 根据德勤2018年的调查 ...

  5. GIT命令行统计代码提交行数

    项目中遇到写报告的时候要反馈某个人或者某个功能的代码量,又没有集成CI这些插件,可以简单的用GIT命令统计下代码提交量: --统计某个人的提交代码 git log --author="old ...

  6. 安装上传下载插件,jdk及redis

    安装rz sz (1)编译安装root 账号登陆后,依次执行以下命令:cd /tmpwget http://www.ohse.de/uwe/releases/lrzsz-0.12.20.tar.gzt ...

  7. EChart绘制风速风向曲线分析图

    1.获取ECharts 在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 2.引入ECharts ...

  8. Hadoop、storm和Spark Streaming简单介绍(非原创)

    文章大纲 一.Hadoop是什么二.storm是什么三.Spark Streaming是什么四.Spark与storm比较五.参考文章   一.Hadoop是什么 1. 简介 Hadoop是一个由Ap ...

  9. LeetCode 1248. 统计「优美子数组」

    地址 https://www.acwing.com/solution/leetcode/content/5801/ 题目描述给你一个整数数组 nums 和一个整数 k. 如果某个子数组中恰好有 k 个 ...

  10. Django restful framework中自动生成API文档

    自动生成api文档(不管是函数视图还是类视图都能显示) 1.安装rest_framework_swagger库 pip install django-rest-swagger 2.在项目下的 urls ...