JSAPIThree 加载天地图学习笔记：使用天地图影像服务

作为一个刚开始学习 mapvthree 的小白，今天要学习加载天地图了！听说这个功能可以加载天地图的影像服务，作为场景的底图！想想就期待！

第一次听说天地图加载

今天在文档里看到了"天地图"这个词，一开始我还以为是某个地图库，结果查了一下才知道，原来这是国家基础地理信息中心提供的地图服务！
文档说天地图加载可以：

• 加载天地图影像服务
  
• 需要配置 token
  
• 可以作为场景的底图
  

我的理解：简单说就是"用天地图的影像服务"，让场景有天地图风格的地图底图！
第一步：配置天地图 Token

作为一个初学者，我习惯先看看需要什么配置。文档说使用天地图服务需要配置天地图 token！
我的发现：天地图需要 token 才能使用，这是必须的配置！
获取天地图 Token

• 访问 天地图控制台 获取 token
  
• 在项目中配置
  

全局配置 Token

获取 token 后，在项目的入口处进行配置，全局执行一次即可：

1. import * as mapvthree from '@baidumap/mapv-three';
3. // 配置天地图 token
4. mapvthree.TiandituConfig.tk = '您的token';

复制代码

我的理解：全局配置后，使用天地图的所有服务都不需要再配置了！
临时配置 Token

如果没有全局配置，可以在构造函数参数中临时配置：

1. const mapView = engine.add(new mapvthree.MapView({
2.     imageryProvider: new mapvthree.TiandituImageryTileProvider({
3.         tk: '您的token', // 临时配置天地图 token
4.     }),
5. }));

复制代码

我的发现：可以全局配置，也可以临时配置，根据需求选择！
第二步：加载天地图

看到需要配置 token 后，我想：怎么加载天地图？
文档说可以用 TiandituImageryTileProvider 来加载天地图！

1. import * as mapvthree from '@baidumap/mapv-three';
3. const container = document.getElementById('container');
5. const engine = new mapvthree.Engine(container, {
6.     map: {
7.         center: [120.628, 27.786],
8.         range: 500000,
9.         provider: null, // 设置为 null，稍后手动添加
10.         projection: 'EPSG:3857',
11.     },
12. });
14. // 添加天地图
15. const mapView = engine.add(new mapvthree.MapView({
16.     imageryProvider: new mapvthree.TiandituImageryTileProvider({
17.         // tk: '您的token', // 如果没有全局配置，可以在这里直接传入
18.     }),
19. }));

复制代码

我的发现：天地图通过 imageryProvider 添加，作为影像图层使用！
我的理解：

• 优点：国家官方地图服务，数据权威
  
• 缺点：需要 token
  
• 适用场景：需要国家官方地图数据的场景
  

第三步：理解 MapView 结构

看到可以加载天地图后，我想：天地图是怎么组织的？
文档说 MapView 是引擎中底图的容器，天地图使用 RasterSurface 渲染。
我的理解：

• TiandituImageryTileProvider 是 ImageryTileProvider
  
• 通过 imageryProvider 添加到 RasterSurface
  
• RasterSurface 能保证图层之间叠加顺序的正确性
  

我的发现：

• RasterSurface 适合二维地图的渲染
  
• 多个 ImageryTileProvider 可以叠加渲染，并分层设置透明度
  
• 如果不设置地形，引擎内部会自动创建一个平面地形层
  

多个影像图层叠加

文档说可以同时加载多个影像图层：

1. const mapView = engine.add(new mapvthree.MapView({
2.     imageryProviders: [
3.         new mapvthree.TiandituImageryTileProvider({
4.             opacity: 1,
5.         }),
6.         // 可以添加其他影像图层
7.     ],
8. }));

复制代码

我的发现：可以同时加载多个影像图层，通过 opacity 控制透明度！
第四步：完整示例

我想写一个完整的示例，把学到的都用上：

1. import * as mapvthree from '@baidumap/mapv-three';
3. // 全局配置天地图 token
4. mapvthree.TiandituConfig.tk = '您的token';
6. const container = document.getElementById('container');
8. const engine = new mapvthree.Engine(container, {
9.     map: {
10.         center: [120.628, 27.786],
11.         range: 500000,
12.         provider: null, // 设置为 null，稍后手动添加
13.         projection: 'EPSG:3857',
14.     },
15. });
17. // 添加天地图
18. const mapView = engine.add(new mapvthree.MapView({
19.     imageryProvider: new mapvthree.TiandituImageryTileProvider({
20.         // 使用全局配置的 token
21.     }),
22. }));

复制代码

我的感受：写一个完整的示例，把学到的都用上，感觉很有成就感！
第五步：踩过的坑

作为一个初学者，我踩了不少坑，记录下来避免再犯：
坑 1：地图不显示

原因：没有配置天地图 token，或者 token 配置错误。
解决：确保正确配置了天地图 token，可以全局配置或临时配置。
坑 2：地图显示空白

原因：在引擎初始化时设置了 provider，但没有正确配置。
解决：如果手动添加 MapView，需要将 provider 设置为 null。
坑 3：token 过期

原因：天地图 token 可能过期。
解决：重新获取 token 并更新配置。
坑 4：性能问题

原因：创建了多个 MapView 实例。
解决：MapView 性能开销较大，尽可能少创建 MapView 实例，尽量在一个 MapView 中叠加多个图层。
我的学习总结

经过这一天的学习，我掌握了：

• 配置天地图 Token：全局配置或临时配置
  
• 加载天地图：使用 TiandituImageryTileProvider
  
• MapView 结构：理解天地图在 MapView 中的组织方式
  
• 图层叠加：可以同时加载多个影像图层
  

我的感受：天地图加载功能很实用！虽然配置有点复杂，但是用起来其实不难。关键是要理解 MapView 的结构，然后正确配置 token！
下一步计划：

• 学习更多影像图层的配置选项
  
• 尝试创建复杂的图层叠加效果
  
• 做一个完整的地图展示项目
  

学习笔记就到这里啦！作为一个初学者，我觉得天地图加载虽然配置有点复杂，但是用起来其实不难。关键是要理解 MapView 的结构，然后正确配置 token！希望我的笔记能帮到其他初学者！大家一起加油！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！