JSAPIThree 加载 Cesium 数据学习笔记：使用 Cesium 地形和影像服务
<blockquote><p>作为一个刚开始学习 mapvthree 的小白，今天要学习加载 Cesium 数据了！听说这个功能可以加载真实的地形数据，还能使用 Cesium 的影像服务！想想就期待！</p>
</blockquote>
<h2 id="第一次听说-cesium-数据加载">第一次听说 Cesium 数据加载</h2>
<p>今天在文档里看到了"Cesium"这个词。文档说 Cesium 数据加载可以：</p>
<ul>
<li>加载真实的地形数据</li>
<li>使用 Cesium 的影像服务</li>
<li>支持 Cesium Ion 服务</li>
<li>需要配置 AccessToken</li>
</ul>
<p><strong>我的理解</strong>：简单说就是"用 Cesium 的地形和影像服务"，让场景有真实的地形起伏！</p>
<h2 id="第一步配置-cesium-ion-accesstoken">第一步：配置 Cesium Ion AccessToken</h2>
<p>作为一个初学者，我习惯先看看需要什么配置。文档说使用 Cesium 服务需要配置 Cesium Ion AccessToken！</p>
<p><strong>我的发现</strong>：Cesium 需要 AccessToken 才能使用，这是必须的配置！</p>
<h3 id="获取-cesium-ion-accesstoken">获取 Cesium Ion AccessToken</h3>
<ol>
<li>访问 Cesium ion 获取 accessToken</li>
<li>在项目中配置</li>
</ol>
<h3 id="全局配置-accesstoken">全局配置 AccessToken</h3>
<p>获取 AccessToken 后，在项目的入口处进行配置，全局执行一次即可：</p>
<pre><code class="language-js">import * as mapvthree from '@baidumap/mapv-three';
// 配置 Cesium accessToken
mapvthree.CesiumConfig.accessToken = '您的accessToken';
</code></pre>
<p><strong>我的理解</strong>：全局配置后，使用 Cesium 的所有服务都不需要再配置了！</p>
<h3 id="临时配置-accesstoken">临时配置 AccessToken</h3>
<p>如果没有全局配置，可以在构造函数参数中临时配置：</p>
<pre><code class="language-js">const mapView = engine.add(new mapvthree.MapView({
terrainProvider: new mapvthree.CesiumTerrainTileProvider({
accessToken: '您的accessToken', // 临时配置 Cesium accessToken
}),
}));
</code></pre>
<p><strong>我的发现</strong>：可以全局配置，也可以临时配置，根据需求选择！</p>
<h2 id="第二步加载-cesium-地形">第二步：加载 Cesium 地形</h2>
<p>看到需要配置 AccessToken 后，我想：怎么加载地形？</p>
<p>文档说可以用 <code>CesiumTerrainTileProvider</code> 来加载 Cesium 地形！</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: 50000,
pitch: 50,
provider: null, // 设置为 null，稍后手动添加
},
});
// 添加 Cesium 地形
const mapView = engine.add(new mapvthree.MapView({
terrainProvider: new mapvthree.CesiumTerrainTileProvider({
// accessToken: '您的accessToken', // 如果没有全局配置，可以在这里直接传入
}),
imageryProvider: new mapvthree.BingImageryTileProvider(),
}));
</code></pre>
<p><strong>我的发现</strong>：地形数据会让场景有真实的起伏，看起来更真实！</p>
<p><strong>我的理解</strong>：</p>
<ul>
<li>优点：真实的地形数据，场景更立体</li>
<li>缺点：需要网络请求，加载时间较长</li>
<li>适用场景：需要真实地形展示的场景</li>
</ul>
<h3 id="自定义地形服务">自定义地形服务</h3>
<p>如果不提供 url 自定义地形服务，默认使用 Cesium 官方服务。如果需要使用自定义地形服务：</p>
<pre><code class="language-js">const mapView = engine.add(new mapvthree.MapView({
terrainProvider: new mapvthree.CesiumTerrainTileProvider({
url: '您的自定义地形服务地址',
accessToken: '您的accessToken',
}),
}));
</code></pre>
<p><strong>我的发现</strong>：可以使用自定义地形服务，也可以使用 Cesium 官方服务！</p>
<h2 id="第三步配合影像图层使用">第三步：配合影像图层使用</h2>
<p>看到可以加载地形后，我想：地形是灰色的，能不能加上影像？</p>
<p>文档说可以配合影像图层使用，比如 <code>BingImageryTileProvider</code>！</p>
<pre><code class="language-js">const mapView = engine.add(new mapvthree.MapView({
terrainProvider: new mapvthree.CesiumTerrainTileProvider({
// 地形数据
}),
imageryProvider: new mapvthree.BingImageryTileProvider({
// 影像数据
}),
}));
</code></pre>
<p><strong>我的发现</strong>：地形提供高度信息，影像提供颜色信息，两者配合才能看到完整的地图！</p>
<p><strong>我的理解</strong>：</p>
<ul>
<li><code>terrainProvider</code>：提供地形高度数据</li>
<li><code>imageryProvider</code>：提供影像颜色数据</li>
<li>两者配合使用，效果最好</li>
</ul>
<h2 id="第四步理解-mapview-结构">第四步：理解 MapView 结构</h2>
<p>看到可以加载地形和影像后，我想：它们是怎么组织的？</p>
<p>文档说 <code>MapView</code> 是引擎中底图的容器，包含 <code>RasterSurface</code> 和 <code>VectorSurface</code>。</p>
<p><strong>我的理解</strong>：</p>
<ul>
<li><code>terrainProvider</code>：地形数据，属于 <code>RasterSurface</code></li>
<li><code>imageryProvider</code>：影像数据，属于 <code>RasterSurface</code></li>
<li>多个 <code>ImageryTileProvider</code> 可以叠加渲染</li>
</ul>
<p><strong>我的发现</strong>：</p>
<ul>
<li><code>RasterSurface</code> 能保证图层之间叠加顺序的正确性</li>
<li>适合二维地图的渲染</li>
<li>多个影像图层可以叠加，并分层设置透明度</li>
</ul>
<h2 id="第五步完整示例">第五步：完整示例</h2>
<p>我想写一个完整的示例，把学到的都用上：</p>
<pre><code class="language-js">import * as mapvthree from '@baidumap/mapv-three';
// 全局配置 Cesium accessToken
mapvthree.CesiumConfig.accessToken = '您的accessToken';
const container = document.getElementById('container');
const engine = new mapvthree.Engine(container, {
map: {
center: ,
range: 50000,
pitch: 50,
provider: null, // 设置为 null，稍后手动添加
},
});
// 添加 Cesium 地形和影像
const mapView = engine.add(new mapvthree.MapView({
terrainProvider: new mapvthree.CesiumTerrainTileProvider({
// 使用默认的 Cesium 官方服务
}),
imageryProvider: new mapvthree.BingImageryTileProvider({
// 使用 Bing 影像服务
}),
}));
</code></pre>
<p><strong>我的感受</strong>：写一个完整的示例，把学到的都用上，感觉很有成就感！</p>
<h2 id="第六步踩过的坑">第六步：踩过的坑</h2>
<p>作为一个初学者，我踩了不少坑，记录下来避免再犯：</p>
<h3 id="坑-1地形不显示">坑 1：地形不显示</h3>
<p><strong>原因</strong>：没有配置 Cesium Ion AccessToken，或者 AccessToken 配置错误。</p>
<p><strong>解决</strong>：确保正确配置了 Cesium Ion AccessToken，可以全局配置或临时配置。</p>
<h3 id="坑-2地形显示为灰色">坑 2：地形显示为灰色</h3>
<p><strong>原因</strong>：只加载了地形，没有加载影像图层。</p>
<p><strong>解决</strong>：同时配置 <code>terrainProvider</code> 和 <code>imageryProvider</code>。</p>
<h3 id="坑-3地形加载很慢">坑 3：地形加载很慢</h3>
<p><strong>原因</strong>：地形数据量大，网络请求需要时间。</p>
<p><strong>解决</strong>：这是正常现象，地形数据需要从服务器加载，请耐心等待。</p>
<h3 id="坑-4accesstoken-过期">坑 4：AccessToken 过期</h3>
<p><strong>原因</strong>：Cesium Ion AccessToken 可能过期。</p>
<p><strong>解决</strong>：重新获取 AccessToken 并更新配置。</p>
<h3 id="坑-5自定义地形服务不工作">坑 5：自定义地形服务不工作</h3>
<p><strong>原因</strong>：地形服务地址错误，或者格式不对。</p>
<p><strong>解决</strong>：确保地形服务地址正确，格式符合 Cesium Terrain 规范。</p>
<h2 id="我的学习总结">我的学习总结</h2>
<p>经过这一天的学习，我掌握了：</p>
<ol>
<li><strong>配置 Cesium Ion AccessToken</strong>：全局配置或临时配置</li>
<li><strong>加载 Cesium 地形</strong>：使用 <code>CesiumTerrainTileProvider</code></li>
<li><strong>配合影像图层</strong>：使用 <code>imageryProvider</code> 提供影像数据</li>
<li><strong>自定义地形服务</strong>：可以使用自定义地形服务地址</li>
<li><strong>MapView 结构</strong>：理解地形和影像在 MapView 中的组织方式</li>
</ol>
<p><strong>我的感受</strong>：Cesium 数据加载功能真的很强大！虽然配置有点复杂，但是用起来其实不难。关键是要理解地形和影像的关系，然后正确配置 AccessToken！</p>
<p><strong>下一步计划</strong>：</p>
<ol>
<li>学习更多地形和影像的配置选项</li>
<li>尝试使用自定义地形服务</li>
<li>做一个完整的地形展示项目</li>
</ol>
<hr>
<blockquote>
<p>学习笔记就到这里啦！作为一个初学者，我觉得 Cesium 数据加载虽然配置有点复杂，但是用起来其实不难。关键是要理解地形和影像的关系，然后正确配置 AccessToken！希望我的笔记能帮到其他初学者！大家一起加油！</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/map-3d-vis/p/19305996
頁:
[1]