zoukankan html css js c++ java

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>

查看全文

相关阅读:
第九章 jQuery验证插件简介
 第八章 jQuery与Ajax应用
 第七章 jQuery操作表格及其它应用
 [wpf笔记] 1.xaml
[2014-10-11]wpf数据绑定
 [2014-9-15]异步委托线程高级
 [2014-9-13]委托多线程
 [2014-9-12]多线程
 [2014-9-11]异步编程继续
 [2014-9-10]异步编程

原文地址：https://www.cnblogs.com/CyLee/p/14692813.html