一、Cesium的Hello World
2020-03-20 本文已影响0人
仙人掌开不了花
1.创建一个html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
2.引入Cesium的脚本和样式文件
<script src="https://cesium.com/downloads/cesiumjs/releases/1.67/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.67/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
3.创建地图的容器cesiumContainer
<div id="cesiumContainer" style="width: 700px; height:400px"></div>
4.初始化地图容器
var viewer = new Cesium.Viewer('cesiumContainer');
完整的代码如下图所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cesium.com/downloads/cesiumjs/releases/1.67/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.67/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer" style="width: 700px; height:400px"></div>
<script>
Cesium.Ion.defaultAccessToken = 'your_access_token';
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
效果如下图所示
HelloWorld
其中defaultAccessToken可以自己注册申请一个，之后便可以通过AccessId加载官方发布的一些示例数据。
