Cesium介绍和入门

baker_zhuang

已于 2024-05-23 16:27:47 修改

阅读量344

点赞数

分类专栏： cesium 文章标签： Cesium

于 2023-09-01 11:12:20 首次发布

本文链接：https://blog.youkuaiyun.com/qq_26881073/article/details/132972291

版权

cesium 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了Cesium，一个基于WebGL的开源地图库，支持2D、2.5D和3D展示，可用于各种几何图形和3D模型，需申请免费token。示例展示了如何在HTML中集成和初始化CesiumViewer。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Cesium是一个跨平台，跨浏览器的展示三维地球的地图的javascript库；使用WebGL来进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持WebGL；是基于Apach2.0许可的开源程序，他可以免费用于商业和非商业用途。 Cesium支持2D，2.5D，3D形式的地图展示，并可以在地图上绘制出各种几何图形，或者是3D建模的模型，也可以导入图片进行展示，并且对触摸设备有良好的支持，也就是可以在平板和手机上使用。不过使用之前要到官网申请一个token，免费的，类似百度地图的引用，下面可以先上代码，通过代码中的注释来说明用法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
	<style>
	html,body,#cesiumContainer{
		width:100%;
		height:100%;
		padding:0;
		margin:0;
	}
	</style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    // 首先得去网站申请一个token，地址: https://cesium.com/ion/tokens.
    // 用自己的token 替代`token` .
    Cesium.Ion.defaultAccessToken = 'token';
    // 初始化一个id为 `cesiumContainer`的HTML元素作为我们的容器，
    const viewer = new Cesium.Viewer('cesiumContainer');    
	
  </script>
 </div>
</body>
</html>

效果图图片1.png