当前位置：首页 > news >正文

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

news 2026/5/12 20:37:17

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

第一次听说天地图加载

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

文档说天地图加载可以：

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

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

第一步：配置天地图 Token

作为一个初学者，我习惯先看看需要什么配置。文档说使用天地图服务需要配置天地图 token！

我的发现：天地图需要 token 才能使用，这是必须的配置！

获取天地图 Token

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

全局配置 Token

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

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

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

临时配置 Token

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

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

我的发现：可以全局配置，也可以临时配置，根据需求选择！

第二步：加载天地图

看到需要配置 token 后，我想：怎么加载天地图？

文档说可以用 TiandituImageryTileProvider 来加载天地图！

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

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

我的理解：

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

第三步：理解 MapView 结构

看到可以加载天地图后，我想：天地图是怎么组织的？

文档说 MapView 是引擎中底图的容器，天地图使用 RasterSurface 渲染。

我的理解：

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

我的发现：

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

多个影像图层叠加

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

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

我的发现：可以同时加载多个影像图层，通过 opacity 控制透明度！

第四步：完整示例

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

import * as mapvthree from '@baidumap/mapv-three';// 全局配置天地图 token
mapvthree.TiandituConfig.tk = '您的token';const container = document.getElementById('container');const engine = new mapvthree.Engine(container, {map: {center: [120.628, 27.786],range: 500000,provider: null, // 设置为 null，稍后手动添加projection: 'EPSG:3857',},
});// 添加天地图
const mapView = engine.add(new mapvthree.MapView({imageryProvider: new mapvthree.TiandituImageryTileProvider({// 使用全局配置的 token}),
}));

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