JSAPIThree 加载天地图学习笔记：使用天地图影像服务
<blockquote><p>作为一个刚开始学习 mapvthree 的小白，今天要学习加载天地图了！听说这个功能可以加载天地图的影像服务，作为场景的底图！想想就期待！</p>
</blockquote>
<h2 id="第一次听说天地图加载">第一次听说天地图加载</h2>
<p>今天在文档里看到了"天地图"这个词，一开始我还以为是某个地图库，结果查了一下才知道，原来这是国家基础地理信息中心提供的地图服务！</p>
<p>文档说天地图加载可以：</p>
<ul>
<li>加载天地图影像服务</li>
<li>需要配置 token</li>
<li>可以作为场景的底图</li>
</ul>
<p><strong>我的理解</strong>：简单说就是"用天地图的影像服务"，让场景有天地图风格的地图底图！</p>
<h2 id="第一步配置天地图-token">第一步：配置天地图 Token</h2>
<p>作为一个初学者，我习惯先看看需要什么配置。文档说使用天地图服务需要配置天地图 token！</p>
<p><strong>我的发现</strong>：天地图需要 token 才能使用，这是必须的配置！</p>
<h3 id="获取天地图-token">获取天地图 Token</h3>
<ol>
<li>访问 天地图控制台 获取 token</li>
<li>在项目中配置</li>
</ol>
<h3 id="全局配置-token">全局配置 Token</h3>
<p>获取 token 后，在项目的入口处进行配置，全局执行一次即可：</p>
<pre><code class="language-js">import * as mapvthree from '@baidumap/mapv-three';
// 配置天地图 token
mapvthree.TiandituConfig.tk = '您的token';
</code></pre>
<p><strong>我的理解</strong>：全局配置后，使用天地图的所有服务都不需要再配置了！</p>
<h3 id="临时配置-token">临时配置 Token</h3>
<p>如果没有全局配置，可以在构造函数参数中临时配置：</p>
<pre><code class="language-js">const mapView = engine.add(new mapvthree.MapView({
imageryProvider: new mapvthree.TiandituImageryTileProvider({
tk: '您的token', // 临时配置天地图 token
}),
}));
</code></pre>
<p><strong>我的发现</strong>：可以全局配置，也可以临时配置，根据需求选择！</p>
<h2 id="第二步加载天地图">第二步：加载天地图</h2>
<p>看到需要配置 token 后，我想：怎么加载天地图？</p>
<p>文档说可以用 <code>TiandituImageryTileProvider</code> 来加载天地图！</p>
<pre><code class="language-js">import * as mapvthree from '@baidumap/mapv-three';
const container = document.getElementById('container');
const engine = new mapvthree.Engine(container, {
map: {
center: ,
range: 500000,
provider: null, // 设置为 null，稍后手动添加
projection: 'EPSG:3857',
},
});
// 添加天地图
const mapView = engine.add(new mapvthree.MapView({
imageryProvider: new mapvthree.TiandituImageryTileProvider({
// tk: '您的token', // 如果没有全局配置，可以在这里直接传入
}),
}));
</code></pre>
<p><strong>我的发现</strong>：天地图通过 <code>imageryProvider</code> 添加，作为影像图层使用！</p>
<p><strong>我的理解</strong>：</p>
<ul>
<li>优点：国家官方地图服务，数据权威</li>
<li>缺点：需要 token</li>
<li>适用场景：需要国家官方地图数据的场景</li>
</ul>
<h2 id="第三步理解-mapview-结构">第三步：理解 MapView 结构</h2>
<p>看到可以加载天地图后，我想：天地图是怎么组织的？</p>
<p>文档说 <code>MapView</code> 是引擎中底图的容器，天地图使用 <code>RasterSurface</code> 渲染。</p>
<p><strong>我的理解</strong>：</p>
<ul>
<li><code>TiandituImageryTileProvider</code> 是 <code>ImageryTileProvider</code></li>
<li>通过 <code>imageryProvider</code> 添加到 <code>RasterSurface</code></li>
<li><code>RasterSurface</code> 能保证图层之间叠加顺序的正确性</li>
</ul>
<p><strong>我的发现</strong>：</p>
<ul>
<li><code>RasterSurface</code> 适合二维地图的渲染</li>
<li>多个 <code>ImageryTileProvider</code> 可以叠加渲染，并分层设置透明度</li>
<li>如果不设置地形，引擎内部会自动创建一个平面地形层</li>
</ul>
<h3 id="多个影像图层叠加">多个影像图层叠加</h3>
<p>文档说可以同时加载多个影像图层：</p>
<pre><code class="language-js">const mapView = engine.add(new mapvthree.MapView({
imageryProviders: [
new mapvthree.TiandituImageryTileProvider({
opacity: 1,
}),
// 可以添加其他影像图层
],
}));
</code></pre>
<p><strong>我的发现</strong>：可以同时加载多个影像图层，通过 <code>opacity</code> 控制透明度！</p>
<h2 id="第四步完整示例">第四步：完整示例</h2>
<p>我想写一个完整的示例，把学到的都用上：</p>
<pre><code class="language-js">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: ,
range: 500000,
provider: null, // 设置为 null，稍后手动添加
projection: 'EPSG:3857',
},
});
// 添加天地图
const mapView = engine.add(new mapvthree.MapView({
imageryProvider: new mapvthree.TiandituImageryTileProvider({
// 使用全局配置的 token
}),
}));
</code></pre>
<p><strong>我的感受</strong>：写一个完整的示例，把学到的都用上，感觉很有成就感！</p>
<h2 id="第五步踩过的坑">第五步：踩过的坑</h2>
<p>作为一个初学者，我踩了不少坑，记录下来避免再犯：</p>
<h3 id="坑-1地图不显示">坑 1：地图不显示</h3>
<p><strong>原因</strong>：没有配置天地图 token，或者 token 配置错误。</p>
<p><strong>解决</strong>：确保正确配置了天地图 token，可以全局配置或临时配置。</p>
<h3 id="坑-2地图显示空白">坑 2：地图显示空白</h3>
<p><strong>原因</strong>：在引擎初始化时设置了 <code>provider</code>，但没有正确配置。</p>
<p><strong>解决</strong>：如果手动添加 MapView，需要将 <code>provider</code> 设置为 <code>null</code>。</p>
<h3 id="坑-3token-过期">坑 3：token 过期</h3>
<p><strong>原因</strong>：天地图 token 可能过期。</p>
<p><strong>解决</strong>：重新获取 token 并更新配置。</p>
<h3 id="坑-4性能问题">坑 4：性能问题</h3>
<p><strong>原因</strong>：创建了多个 MapView 实例。</p>
<p><strong>解决</strong>：MapView 性能开销较大，尽可能少创建 MapView 实例，尽量在一个 MapView 中叠加多个图层。</p>
<h2 id="我的学习总结">我的学习总结</h2>
<p>经过这一天的学习，我掌握了：</p>
<ol>
<li><strong>配置天地图 Token</strong>：全局配置或临时配置</li>
<li><strong>加载天地图</strong>：使用 <code>TiandituImageryTileProvider</code></li>
<li><strong>MapView 结构</strong>：理解天地图在 MapView 中的组织方式</li>
<li><strong>图层叠加</strong>：可以同时加载多个影像图层</li>
</ol>
<p><strong>我的感受</strong>：天地图加载功能很实用！虽然配置有点复杂，但是用起来其实不难。关键是要理解 MapView 的结构，然后正确配置 token！</p>
<p><strong>下一步计划</strong>：</p>
<ol>
<li>学习更多影像图层的配置选项</li>
<li>尝试创建复杂的图层叠加效果</li>
<li>做一个完整的地图展示项目</li>
</ol>
<hr>
<blockquote>
<p>学习笔记就到这里啦！作为一个初学者，我觉得天地图加载虽然配置有点复杂，但是用起来其实不难。关键是要理解 MapView 的结构，然后正确配置 token！希望我的笔记能帮到其他初学者！大家一起加油！</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/map-3d-vis/p/19325906
頁:
[1]