cesium + mapbox 的三種方式

本文轉載自查看原文 2021-04-23 10:53 579

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <script src="https://cesium.com/downloads/cesiumjs/releases/1.80/Build/Cesium/Cesium.js"></script>
        <link href="https://cesium.com/downloads/cesiumjs/releases/1.80/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />

        <style>
            html,
            body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            *,
            *::after,
            *::before {
                box-sizing: border-box;
            }
        </style>
    </head>

    <body>
        <div id="container"></div>
    </body>
    <script>
        Cesium.Ion.defaultAccessToken = '...'

        // mapbox 風格：https://docs.mapbox.com/api/maps/styles/#mapbox-styles
        var mapbox1 = new Cesium.MapboxStyleImageryProvider({
            styleId: 'dark-v10',
            accessToken: '...',
        })

        // mapbox Tilesets: https://studio.mapbox.com/tilesets/
        var mapbox2 = new Cesium.MapboxImageryProvider({
            mapId: 'mapbox.mapbox-streets-v8',
            accessToken: '...',
        })

        // mapbox custom studio: https://studio.mapbox.com/
        var mapbox3 = new Cesium.MapboxStyleImageryProvider({
            url: 'https://api.mapbox.com/styles/v1/',
            styleId: 'ckntom98z09ev17p8kbc3ghyc',
            username: 'dragon8mapbox',
            accessToken: '...',
        })

        const viewer = new Cesium.Viewer('container', {
            terrainProvider: Cesium.createWorldTerrain(),
            imageryProvider: mapbox3,
        })
    </script>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 串行通信的三種方式三種存儲方式三種交換方式 join的三種方式緩存的三種方式分頁的三種方式 Cesium 基於MapBox底圖加載3DTiles 模型 Cesium 相機視角與 Mapbox 視角轉換 selenium的三種等待方式 maven的三種啟動方式