什么是 wmstr
wmstr 是一个基于 openlayers 的 wmts 服务提供者，在提供 wmts 服务的基础上，还支持了多时相数据、高清图层和矢量标注。
安装
要使用 wmstr，你需要先安装 node.js 和 npm 包管理工具。
使用 npm 可以方便地安装 wmstr：
npm install wmstr --save
使用
在使用 wmstr 的时候，需要先引入模块：
import WMSTR from 'wmstr';
初始化
接下来，需要初始化 wmstr：
const wmstr = new WMSTR({
url: 'https://open-cdn.geodata.cn/wmts',
layer: 'pub:ChinaMap5000',
matrixSet: 'c',
});其中 url 是 wmts 服务地址，layer 是 wmts 的图层名称，matrixSet 是瓦片集名称。你可以根据你使用的 wmts 服务对这些参数进行修改。
获取瓦片
获取瓦片可以使用 wmstr 的 getTile 方法：
wmstr.getTile({
x: 0,
y: 0,
z: 0,
}).then((tileData) => {
console.log(tileData);
});其中 x、y、z 分别表示瓦片的坐标和层级。
获取时间切片数据
获取时间切片数据可以使用 wmstr 的 getTimeData 方法：
wmstr.getTimeData({
x: 0,
y: 0,
z: 0,
}).then((timeData) => {
console.log(timeData);
});获取瓦片标注
获取瓦片标注可以使用 wmstr 的 getAnno 方法：
wmstr.getAnno({
x: 0,
y: 0,
z: 0,
}).then((annoData) => {
console.log(annoData);
});获取指定时间切片和标注
获取指定时间切片和标注可以使用 wmstr 的 getData 方法：
wmstr.getData({
x: 0,
y: 0,
z: 0,
time: '2020-01-01',
}).then((data) => {
console.log(data);
});示例代码
下面是一个完整的示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ----- ----- - --- ------- ---- ----------------------------------- ------ ------------------- ---------- ---- --- --------------- -- -- -- -- -- -- ------------------ -- - ---------------------- --- ------------------- -- -- -- -- -- -- ------------------ -- - ---------------------- --- --------------- -- -- -- -- -- -- ------------------ -- - ---------------------- --- --------------- -- -- -- -- -- -- ----- ------------- -------------- -- - ------------------ ---
总结
wmstr 是一个非常强大的 wmts 服务提供者，通过它可以很方便地获取瓦片、时间切片数据和瓦片标注。在日常前端开发中，能够熟练地使用 wmstr 无疑是一项很有价值的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671108dd3466f61ffe2f0