cesium + mapbox 的三种方式

 

<!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>

 

posted @ 2021-04-23 10:53  贝尔塔猫  阅读(2952)  评论(0)    收藏  举报