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的三种启动方式