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