努力加载中 ……

Cesium进阶之路:Cesium简介

 IKangXu
 2020-03-31 21:12:30

# 简介

摘抄于官网CesiumJS

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. Developers across industries, from aerospace to smart cities to drones, use CesiumJS to create interactive web apps for sharing dynamic geospatial data.

Built on open formats, CesiumJS is designed for robust interoperability. Bring in data from Cesium ion or from some other source, visualize with CesiumJS, and share with users on desktop or mobile. With more than 500,000 downloads, CesiumJS powers apps that reach millions of users.

CesiumJS is released under the Apache 2.0 license and is free for both commercial and non-commercial use. Read about how we build with open source.

译文:

CesiumJS是一个开源JavaScript库,用于创建具有最佳性能,精度,视觉质量和易用性的世界级3D地球仪和地图。从航空航天到智慧城市再到无人机,各行各业的开发人员都使用CesiumJS创建用于共享动态地理空间数据的交互式Web应用程序。

CesiumJS建立在开放格式上,旨在实现强大的互操作性。从Cesium ion或其他来源获取数据,使用CesiumJS进行可视化,并与台式机或移动设备上的用户共享。CesiumJS的下载量超过500,000,为数百万用户提供了强大的应用程序。

CesiumJS是根据Apache 2.0许可发布的,并且对于商业和非商业用途都是免费的。 了解我们如何使用开源构建

# 示例

基于Cesium1.67版本进行演示

# 编写代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始化Cesium</title>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.67/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        #cesiumContainer {
            width: 100%;
            height: 100vh;
        } 
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>

    <script src="https://cesium.com/downloads/cesiumjs/releases/1.67/Build/Cesium/Cesium.js"></script>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 效果展示

然后将网页发布出去,即可看见初始好的三维地球

1

# 代码剖析

引入CesiumJS库和样式

<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">
1
2

创建三维地球容器

<div id="cesiumContainer"></div>
1

初始化三维地球

new Cesium.Viewer('cesiumContainer');
1
-->