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.。 關於 npm 的使用方式介紹如下：
2.2.1 安裝依賴包 maptalks.wmts
yarn add maptalks.wmts 或 npm install maptalks.wmts --save
2.2.2 編寫代碼
js 代碼
import {
Map
} from 'maptalks'
import {
WMTSTileLayer
} from 'maptalks.wmts'
const mapContainer = document.getElementById('root')
const map = new Map(mapContainer, {
center: [105.08052356963802, 36.04231948670001],
zoom: 4,
minZoom: 1,
maxZoom: 18,
spatialReference: {
projection: 'EPSG:4326'
},
baseLayer: new WMTSTileLayer('base', {
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: '© <a target="_blank" href="http://www.tianditu.cn">Tianditu</a>'
}),
layers: [
new WMTSTileLayer('road', {
layer: 'cva',
tilematrixset: 'c',
format: 'tiles',
urlTemplate: 'http://t{s}.tianditu.com/cva_c/wmts?tk=34e168d12e2b79f61dc1e6e220659c71',
subdomains: ['1', '2', '3', '4', '5'],
opacity: 1
})
]
});
html 代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>library test</title>
</head>
<style>
html,body,#root{
margin: 0px;
padding: 0px;
font-size: 14px;
widows: 100%;
height: 100%;
background-color: bisque;
}
</style>
<body>
<div id ='root'>
</div>
</body>
<script src = './dist/main.js'></script>
</html>
效果圖：
