如何在Leaflet中使用TomTom MapMaker创建的自定义地图样式？

问题描述 #

我当前使用Leaflet加载TomTom瓦片地图的URL为：

https://api.tomtom.com/map/1/tile/basic/main/{z}/{x}/{y}.png?tileSize=512&view=Unified&language=NGT&key=?

我通过MapMaker创建了自定义地图样式，希望将其应用到Leaflet中，但查阅相关文档后未找到适配方法，文档仅介绍的直接导入样式方式无法在Leaflet中生效，修改现有API URL也未找到可行方案，请问是否可以实现该需求？

解决方案 #

可以实现，核心是修改TomTom瓦片URL中的样式标识部分，替换为你自定义样式的ID和版本号即可：

• 获取自定义样式的ID和版本：在MapMaker中发布自定义样式后，进入样式详情页面，就能找到样式ID（一串唯一字符）和对应的版本号（默认通常为1）。
• 修改瓦片URL：将原有URL中的basic/main替换为{styleId}/{version}，修改后的URL格式如下：

https://api.tomtom.com/map/1/tile/你的样式ID/你的版本号/{z}/{x}/{y}.png?tileSize=512&view=Unified&language=NGT&key=你的API密钥

• 在Leaflet中加载：用修改后的URL创建L.tileLayer实例，添加到地图中即可，示例代码：

const customMapLayer = L.tileLayer('https://api.tomtom.com/map/1/tile/你的样式ID/你的版本号/{z}/{x}/{y}.png?tileSize=512&view=Unified&language=NGT&key=你的API密钥', {
  maxZoom: 22,
  tileSize: 512
}).addTo(map);

原理是TomTom的地图瓦片API支持通过指定自定义样式ID来加载对应样式的瓦片，Leaflet的瓦片图层只需要正确的瓦片URL即可渲染，因此这种方式完全适配Leaflet。

内容的提问来源于stack exchange，提问作者Nicolas Gehlert