JSAPIThree 加載 Mapbox 數據學習筆記：使用 Mapbox 矢量瓦片地圖詳情 - 前端 map_3d_vis 博客

作為一個剛開始學習 mapvthree 的小白，今天要學習加載 Mapbox 數據了！聽説這個功能可以加載 Mapbox 的矢量瓦片地圖，還能自定義樣式！想想就期待！

第一次聽説 Mapbox 數據加載

今天在文檔裏看到了"Mapbox"這個詞。文檔説 Mapbox 數據加載可以：

加載 Mapbox 官方地圖
支持自定義 MVT 路徑
需要配置 AccessToken

我的理解：簡單説就是"用 Mapbox 的矢量瓦片地圖"，讓場景有 Mapbox 風格的地圖底圖！

第一步：配置 Mapbox AccessToken

作為一個初學者，我習慣先看看需要什麼配置。文檔説使用 Mapbox 服務需要配置 Mapbox AccessToken！

我的發現：Mapbox 需要 AccessToken 才能使用，這是必須的配置！

獲取 Mapbox AccessToken

訪問 Mapbox Console 獲取 accessToken
在項目中配置

全局配置 AccessToken

獲取 AccessToken 後，在項目的入口處進行配置，全局執行一次即可：

import * as mapvthree from '@baidumap/mapv-three';

// 配置 Mapbox accessToken
mapvthree.MapboxConfig.accessToken = '您的accessToken';

我的理解：全局配置後，使用 Mapbox 的所有服務都不需要再配置了！

臨時配置 AccessToken

如果沒有全局配置，可以在構造函數參數中臨時配置：

const mapView = engine.add(new mapvthree.MapView({
    vectorProvider: new mapvthree.MapboxVectorTileProvider({
        accessToken: '您的accessToken', // 臨時配置 Mapbox accessToken
    }),
}));

我的發現：可以全局配置，也可以臨時配置，根據需求選擇！

第二步：加載 MVT 地圖

看到需要配置 AccessToken 後，我想：怎麼加載 Mapbox 地圖？

文檔説可以用 MapboxVectorTileProvider 來加載 MVT 地圖！

import * as mapvthree from '@baidumap/mapv-three';

const container = document.getElementById('container');

const engine = new mapvthree.Engine(container, {
    map: {
        center: [113.266, 23.131],
        range: 1000,
        provider: null, // 設置為 null，稍後手動添加
        projection: 'EPSG:3857',
    },
});

// 添加 Mapbox 矢量地圖
const mapView = engine.add(new mapvthree.MapView({
    terrainProvider: null,
    vectorProvider: new mapvthree.MapboxVectorTileProvider({
        // accessToken: '您的accessToken', // 如果沒有全局配置，可以在這裏直接傳入
    }),
}));

我的發現：MVT 地圖是 Mapbox 標準的矢量瓦片地圖，具有創建效率高、傳輸渲染速度快等特點！

我的理解：

優點：矢量瓦片，無級縮放不模糊，傳輸渲染速度快
缺點：需要 AccessToken
適用場景：需要 Mapbox 風格地圖的場景

第三步：自定義 MVT 路徑

看到可以加載 Mapbox 地圖後，我想：能不能使用不同的地圖樣式？

文檔説可以通過 style 參數來自定義 MVT 路徑！

const mapView = engine.add(new mapvthree.MapView({
    terrainProvider: null,
    vectorProvider: new mapvthree.MapboxVectorTileProvider({
        style: 'mapbox://styles/mapbox/streets-v9', // 自定義樣式
    }),
}));

我的發現：可以通過 style 參數指定不同的 Mapbox 樣式！

我的理解：

mapbox://styles/mapbox/streets-v9：街道樣式
可以使用其他 Mapbox 官方樣式
也可以使用自定義樣式

我的嘗試：

// 使用不同的樣式
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', // 衞星樣式
    }),
}));

我的發現：可以切換不同的地圖樣式，讓地圖更符合項目需求！

第四步：理解 MapView 結構

看到可以加載和修改樣式後，我想：Mapbox 地圖是怎麼組織的？

文檔説 MapView 是引擎中底圖的容器，Mapbox 地圖使用 VectorSurface 渲染。

我的理解：

MapboxVectorTileProvider 是 VectorTileProvider
通過 vectorProvider 添加到 VectorSurface
VectorSurface 渲染矢量數據時具備無級縮放不模糊的特點

我的發現：

VectorSurface 會作為 3D 場景物體渲染
一般單個 VectorSurface 即可滿足需求
多個 VectorSurface 疊加渲染時，需要注意圖層之間的深度衝突

第五步：完整示例

我想寫一個完整的示例，把學到的都用上：

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: [113.266, 23.131],
        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', // 自定義樣式
    }),
}));

我的感受：寫一個完整的示例，把學到的都用上，感覺很有成就感！

第六步：踩過的坑

作為一個初學者，我踩了不少坑，記錄下來避免再犯：

坑 1：地圖不顯示

原因：沒有配置 Mapbox AccessToken，或者 AccessToken 配置錯誤。

解決：確保正確配置了 Mapbox AccessToken，可以全局配置或臨時配置。

坑 2：樣式不生效

原因：樣式路徑錯誤，或者 AccessToken 沒有權限訪問該樣式。

解決：

確保樣式路徑正確
確保 AccessToken 有權限訪問該樣式

坑 3：地圖顯示空白

原因：在引擎初始化時設置了 provider，但沒有正確配置。

解決：如果手動添加 MapView，需要將 provider 設置為 null。

坑 4：性能問題

原因：創建了多個 MapView 實例，或者使用了複雜的樣式。

解決：

MapView 性能開銷較大，儘可能少創建 MapView 實例
選擇合適的地圖樣式，避免過於複雜

我的學習總結

經過這一天的學習，我掌握了：

配置 Mapbox AccessToken：全局配置或臨時配置
加載 MVT 地圖：使用 MapboxVectorTileProvider
自定義 MVT 路徑：通過 style 參數指定不同的樣式
MapView 結構：理解 Mapbox 地圖在 MapView 中的組織方式

我的感受：Mapbox 數據加載功能真的很強大！雖然配置有點複雜，但是用起來其實不難。關鍵是要理解 MVT 地圖的特點，然後正確配置 AccessToken 和樣式！

下一步計劃：

學習更多 Mapbox 樣式的配置選項
嘗試創建自定義的 Mapbox 樣式
做一個完整的 Mapbox 地圖展示項目

學習筆記就到這裏啦！作為一個初學者，我覺得 Mapbox 數據加載雖然配置有點複雜，但是用起來其實不難。關鍵是要理解 MVT 地圖的特點，然後正確配置 AccessToken 和樣式！希望我的筆記能幫到其他初學者！大家一起加油！

map_3d_vis 博客

map_3d_vis 博客

博客 / 詳情