JSAPIThree 加载 Mapbox 数据学习笔记：使用 Mapbox 矢量瓦片地图
<blockquote><p>作为一个刚开始学习 mapvthree 的小白，今天要学习加载 Mapbox 数据了！听说这个功能可以加载 Mapbox 的矢量瓦片地图，还能自定义样式！想想就期待！</p>
</blockquote>
<h2 id="第一次听说-mapbox-数据加载">第一次听说 Mapbox 数据加载</h2>
<p>今天在文档里看到了"Mapbox"这个词。文档说 Mapbox 数据加载可以：</p>
<ul>
<li>加载 Mapbox 官方地图</li>
<li>支持自定义 MVT 路径</li>
<li>需要配置 AccessToken</li>
</ul>
<p><strong>我的理解</strong>：简单说就是"用 Mapbox 的矢量瓦片地图"，让场景有 Mapbox 风格的地图底图！</p>
<h2 id="第一步配置-mapbox-accesstoken">第一步：配置 Mapbox AccessToken</h2>
<p>作为一个初学者，我习惯先看看需要什么配置。文档说使用 Mapbox 服务需要配置 Mapbox AccessToken！</p>
<p><strong>我的发现</strong>：Mapbox 需要 AccessToken 才能使用，这是必须的配置！</p>
<h3 id="获取-mapbox-accesstoken">获取 Mapbox AccessToken</h3>
<ol>
<li>访问 Mapbox Console 获取 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';
// 配置 Mapbox accessToken
mapvthree.MapboxConfig.accessToken = '您的accessToken';
</code></pre>
<p><strong>我的理解</strong>：全局配置后，使用 Mapbox 的所有服务都不需要再配置了！</p>
<h3 id="临时配置-accesstoken">临时配置 AccessToken</h3>
<p>如果没有全局配置，可以在构造函数参数中临时配置：</p>
<pre><code class="language-js">const mapView = engine.add(new mapvthree.MapView({
vectorProvider: new mapvthree.MapboxVectorTileProvider({
accessToken: '您的accessToken', // 临时配置 Mapbox accessToken
}),
}));
</code></pre>
<p><strong>我的发现</strong>：可以全局配置，也可以临时配置，根据需求选择！</p>
<h2 id="第二步加载-mvt-地图">第二步：加载 MVT 地图</h2>
<p>看到需要配置 AccessToken 后，我想：怎么加载 Mapbox 地图？</p>
<p>文档说可以用 <code>MapboxVectorTileProvider</code> 来加载 MVT 地图！</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: 1000,
provider: null, // 设置为 null，稍后手动添加
projection: 'EPSG:3857',
},
});
// 添加 Mapbox 矢量地图
const mapView = engine.add(new mapvthree.MapView({
terrainProvider: null,
vectorProvider: new mapvthree.MapboxVectorTileProvider({
// accessToken: '您的accessToken', // 如果没有全局配置，可以在这里直接传入
}),
}));
</code></pre>
<p><strong>我的发现</strong>：MVT 地图是 Mapbox 标准的矢量瓦片地图，具有创建效率高、传输渲染速度快等特点！</p>
<p><strong>我的理解</strong>：</p>
<ul>
<li>优点：矢量瓦片，无级缩放不模糊，传输渲染速度快</li>
<li>缺点：需要 AccessToken</li>
<li>适用场景：需要 Mapbox 风格地图的场景</li>
</ul>
<h2 id="第三步自定义-mvt-路径">第三步：自定义 MVT 路径</h2>
<p>看到可以加载 Mapbox 地图后，我想：能不能使用不同的地图样式？</p>
<p>文档说可以通过 <code>style</code> 参数来自定义 MVT 路径！</p>
<pre><code class="language-js">const mapView = engine.add(new mapvthree.MapView({
terrainProvider: null,
vectorProvider: new mapvthree.MapboxVectorTileProvider({
style: 'mapbox://styles/mapbox/streets-v9', // 自定义样式
}),
}));
</code></pre>
<p><strong>我的发现</strong>：可以通过 <code>style</code> 参数指定不同的 Mapbox 样式！</p>
<p><strong>我的理解</strong>：</p>
<ul>
<li><code>mapbox://styles/mapbox/streets-v9</code>：街道样式</li>
<li>可以使用其他 Mapbox 官方样式</li>
<li>也可以使用自定义样式</li>
</ul>
<p><strong>我的尝试</strong>：</p>
<pre><code class="language-js">// 使用不同的样式
const mapView1 = engine.add(new mapvthree.MapView({
vectorProvider: new mapvthree.MapboxVectorTileProvider({
style: 'mapbox://styles/mapbox/streets-v9', // 街道样式
}),
}));
const mapView2 = engine.add(new mapvthree.MapView({
vectorProvider: new mapvthree.MapboxVectorTileProvider({
style: 'mapbox://styles/mapbox/satellite-v9', // 卫星样式
}),
}));
</code></pre>
<p><strong>我的发现</strong>：可以切换不同的地图样式，让地图更符合项目需求！</p>
<h2 id="第四步理解-mapview-结构">第四步：理解 MapView 结构</h2>
<p>看到可以加载和修改样式后，我想：Mapbox 地图是怎么组织的？</p>
<p>文档说 <code>MapView</code> 是引擎中底图的容器，Mapbox 地图使用 <code>VectorSurface</code> 渲染。</p>
<p><strong>我的理解</strong>：</p>
<ul>
<li><code>MapboxVectorTileProvider</code> 是 <code>VectorTileProvider</code></li>
<li>通过 <code>vectorProvider</code> 添加到 <code>VectorSurface</code></li>
<li><code>VectorSurface</code> 渲染矢量数据时具备无级缩放不模糊的特点</li>
</ul>
<p><strong>我的发现</strong>：</p>
<ul>
<li><code>VectorSurface</code> 会作为 3D 场景物体渲染</li>
<li>一般单个 <code>VectorSurface</code> 即可满足需求</li>
<li>多个 <code>VectorSurface</code> 叠加渲染时，需要注意图层之间的深度冲突</li>
</ul>
<h2 id="第五步完整示例">第五步：完整示例</h2>
<p>我想写一个完整的示例，把学到的都用上：</p>
<pre><code class="language-js">import * as mapvthree from '@baidumap/mapv-three';
// 全局配置 Mapbox accessToken
mapvthree.MapboxConfig.accessToken = '您的accessToken';
const container = document.getElementById('container');
const engine = new mapvthree.Engine(container, {
map: {
center: ,
range: 1000,
provider: null, // 设置为 null，稍后手动添加
projection: 'EPSG:3857',
},
});
// 添加 Mapbox 矢量地图
const mapView = engine.add(new mapvthree.MapView({
terrainProvider: null,
vectorProvider: new mapvthree.MapboxVectorTileProvider({
style: 'mapbox://styles/mapbox/streets-v9', // 自定义样式
}),
}));
</code></pre>
<p><strong>我的感受</strong>：写一个完整的示例，把学到的都用上，感觉很有成就感！</p>
<h2 id="第六步踩过的坑">第六步：踩过的坑</h2>
<p>作为一个初学者，我踩了不少坑，记录下来避免再犯：</p>
<h3 id="坑-1地图不显示">坑 1：地图不显示</h3>
<p><strong>原因</strong>：没有配置 Mapbox AccessToken，或者 AccessToken 配置错误。</p>
<p><strong>解决</strong>：确保正确配置了 Mapbox AccessToken，可以全局配置或临时配置。</p>
<h3 id="坑-2样式不生效">坑 2：样式不生效</h3>
<p><strong>原因</strong>：样式路径错误，或者 AccessToken 没有权限访问该样式。</p>
<p><strong>解决</strong>：</p>
<ol>
<li>确保样式路径正确</li>
<li>确保 AccessToken 有权限访问该样式</li>
</ol>
<h3 id="坑-3地图显示空白">坑 3：地图显示空白</h3>
<p><strong>原因</strong>：在引擎初始化时设置了 <code>provider</code>，但没有正确配置。</p>
<p><strong>解决</strong>：如果手动添加 MapView，需要将 <code>provider</code> 设置为 <code>null</code>。</p>
<h3 id="坑-4性能问题">坑 4：性能问题</h3>
<p><strong>原因</strong>：创建了多个 MapView 实例，或者使用了复杂的样式。</p>
<p><strong>解决</strong>：</p>
<ol>
<li>MapView 性能开销较大，尽可能少创建 MapView 实例</li>
<li>选择合适的地图样式，避免过于复杂</li>
</ol>
<h2 id="我的学习总结">我的学习总结</h2>
<p>经过这一天的学习，我掌握了：</p>
<ol>
<li><strong>配置 Mapbox AccessToken</strong>：全局配置或临时配置</li>
<li><strong>加载 MVT 地图</strong>：使用 <code>MapboxVectorTileProvider</code></li>
<li><strong>自定义 MVT 路径</strong>：通过 <code>style</code> 参数指定不同的样式</li>
<li><strong>MapView 结构</strong>：理解 Mapbox 地图在 MapView 中的组织方式</li>
</ol>
<p><strong>我的感受</strong>：Mapbox 数据加载功能真的很强大！虽然配置有点复杂，但是用起来其实不难。关键是要理解 MVT 地图的特点，然后正确配置 AccessToken 和样式！</p>
<p><strong>下一步计划</strong>：</p>
<ol>
<li>学习更多 Mapbox 样式的配置选项</li>
<li>尝试创建自定义的 Mapbox 样式</li>
<li>做一个完整的 Mapbox 地图展示项目</li>
</ol>
<hr>
<blockquote>
<p>学习笔记就到这里啦！作为一个初学者，我觉得 Mapbox 数据加载虽然配置有点复杂，但是用起来其实不难。关键是要理解 MVT 地图的特点，然后正确配置 AccessToken 和样式！希望我的笔记能帮到其他初学者！大家一起加油！</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/map-3d-vis/p/19311892
頁:
[1]