Mapbox Based-map in CesiumJS
source link: https://javascript.plainenglish.io/mapbox-based-map-in-cesiumjs-a6782738a9e9
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
CesiumJS Tutorial
Mapbox Based-map in CesiumJS
Let’s add your favorite basemap to the 3D virtual globe
CesiumJS is an open-source JavaScript library for creating world-class 3D globes and maps with the best possible performance, precision, visual quality, and ease of use. If you are new to Cesium, please check the basic tutorial of Cesium from https://cesium.com/docs
This short article shows step-by-step on how to add Mapbox based-map to the CesiumJS web application. Let’s begin!
Step 1. Prepare Mapbox API Key
You can get the Mapbox API key by registering an account and get your access token from https://account.mapbox.com/access-tokens/
Step 2. Pick or Create Mapbox Style
- Pick the existing Mapbox official style or create your own Mapbox style
- After you get the desired Mapbox style, copy the Style ID.
Usually, You will get the Mapbox style URL in the following format:
mapbox://styles/<User>/<Style ID>e.g.
mapbox://styles/mapbox/streets-v11 (mapbox official)
mapbox://styles/thunyathep/cklwtkdc25om317p66ibh77qe (my style)
Step 3. Adding MapboxStyleImageryProvider to the Cesium Viewer
In the CesiumJS JavaScript part, you can add the Mapbox based-map as an imagery provider in the viewer section with the prepared style ID and access token.
Sample Script by Author
That’s about it! Have fun and enjoy! 🗺
More content at plainenglish.io
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK