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！渴望我的条记能帮到其他初学者！各人一起加油！