Cesium介绍和入门

简介: 这篇文章介绍了Cesium的基本概念及其在Web开发中的应用,包括如何集成Cesium并使用它来创建和展示3D地图。

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

相关文章
|
1月前
|
Web App开发 数据可视化 前端开发
Pixi入门第一章:绘制一个小精灵
这篇文章是关于Pixi.js的入门教程第一部分,指导读者如何创建并显示一个基本的2D精灵,适用于开始学习Pixi.js进行2D图形开发的初学者。
60 0
Pixi入门第一章:绘制一个小精灵
|
6月前
|
数据可视化 JavaScript 定位技术
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可免费商用,在航空航天、国防、城市规划、教育等领域得到了广泛应用。
307 0
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
|
6月前
|
JavaScript 开发工具 git
Three.js第1篇,Three.js新手教学,如何在项目中使用Three.js(three.js使用流程详细,three.js的使用方式,three.js创建3d物体)
Three.js封装了WebGL的底层细节,是一款运行在浏览器中的 3D 引擎,可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象,目前在Git上已经拥有90k+的star。
147 0
Three.js第1篇,Three.js新手教学,如何在项目中使用Three.js(three.js使用流程详细,three.js的使用方式,three.js创建3d物体)
|
JavaScript 定位技术 异构计算
WebGis——从零开始vue使用cesium添加点线(四)
WebGis——从零开始vue使用cesium添加点线(四)
|
JavaScript 前端开发
vue中集成cesium和threejs
vue中集成cesium和threejs
520 0
|
JavaScript 前端开发 定位技术
OpenLayers入门(一)
OpenLayers入门(一)
876 0
OpenLayers入门(一)
|
移动开发 资源调度 JavaScript
【Three.js】入门教程
【Three.js】入门教程
260 0
|
JavaScript 应用服务中间件 定位技术
从零开始vue使用cesium开发3d地形terrainProvider(二)
从零开始vue使用cesium开发3d地形terrainProvider(二)
|
JavaScript 前端开发 API
Three.js学习笔记 一
在react中快速实现三维模型的创建
Three.js学习笔记   一
Threejs学习笔记-三
精灵例子和精灵贴图的简单使用
Threejs学习笔记-三