maptalks 加載 wmts服務的實現

1、前言

日常積累，歡迎指正

2、正文

2.1 maptalks 介紹

maptalks 是一個 HTML5 的地圖引擎, 基於原生 ES6 Javascript 開發:

• 二三維一體化地圖, 通過二維地圖的旋轉 /傾斜增加三維視角
• 插件化設計, 能與其他圖形庫結合, 開發各種二三維效果, 例如 echarts/d3/THREE 等
• 很認真的優化了繪製性能
• 很重視測試, 有接近 1.5K 個單元測試用例, 所以穩定性還不錯, 已經應用在很多大大小小的系統上了
  gitHub 地址 https://github.com/maptalks/maptalks.js

2.2 maptalks 加載 wmts 服務的實現

截止目前 （2019 年 6 月18 日）maptalks (version 0.44.2) 本身還不原生支持加載 wmts 服務，如果需要實現這樣的功能就需要自己編寫這樣一個擴展模塊，這裏只介紹 npm 方式的使用，如果想使用 script 標籤引入的方式使用請參考大神的代碼 lifefriend/maptalks-demo.。

由於 maptalks 沒有提供直接加載 wmts 服務的接口，在遇到這個需求時只好自己解決，最後發現 gitHub 上有以爲大神自己封裝了 maptalks 加載 wmts 服務的接口 點擊這裏查看：maptalks-demo，如果想使用 script 標籤引入的方式使用參考這位大神的代碼就好了
不過我的開發環境是 webpack + typescript 並且項目本身有較嚴格的語法檢查導致直接使用它的源代碼會有一系列 typescript 語法報錯和其它亂起八糟的錯誤，雖然也可以修改一版 typescript 的代碼但是想了想覺的將其直接發佈爲 npm 包使用起來會更方便，現在已經將其發佈到 npm 倉庫了，包的名稱爲 maptalks.wmts。大家有需要可以參考下面的使用說明直接使用。

3、npm 包 maptalks.wmts 使用

$ yarn add maptalks.wmts
或
$ npm install maptalks.wmts -dev-save

核心代碼 - es module 版本

import { WMTSTileLayer } from 'maptalks.wmts'

new WMTSTileLayer('layer', {
    tileSystem: [1, -1, -180, 90],
	layer: 'vec',
	tilematrixset: 'c',
	format: 'tiles',
	urlTemplate: 'http://t{s}.tianditu.com/vec_c/wmts?tk=34e168d12e2b79f61dc1e6e220659c71',
	subdomains: ['1', '2', '3', '4', '5'],
	attribution: '&copy; <a target="_blank" href="http://www.tianditu.cn">Tianditu</a>'
}),

new WMTSTileLayer(id, options),

其它調用方式也支持具體代碼待補充

完整 demo 及 源碼點擊這裏查看

有其它問題也可以提 issue

歡迎 fork 歡迎 star

4、效果預覽

5、當前版本中的 bug

• 當 options 參數爲引用類型時存在 庫代碼修改外部參數的情況 - 別人使用遇到反饋給我的，自己還沒來得及重現和修改，如果要使用且 options 參數傳入的是另一個引用類型記得深拷貝這個 options 參數給一箇中間量防止出現錯誤(我會盡量快點找時間解決的)

=以下爲: 2020 年 3月 23 日更新==

3、如何發佈一個自己的 npm 包

關於 npm 包的發佈自己並沒有寫相關總結文章，這裏有一篇，推薦
從 0 開始發佈一個無依賴、高質量的 npm 包