【一文带你cesium入门】

最新推荐文章于 2024-07-25 16:27:24 发布

青青子衿~~

最新推荐文章于 2024-07-25 16:27:24 发布

阅读量1k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_45727272/article/details/130728114

版权

引言： Cesium是一个强大的JavaScript库，用于创建交互式的地理空间应用。它提供了丰富的功能和工具，使开发者能够构建令人惊叹的地球模型、地图可视化和地理数据分析。本文将带你逐步了解Cesium的基本概念和用法，并通过代码示例展示其强大的功能。

准备工作

在开始之前，我们需要引入Cesium库。你可以通过以下方式获取Cesium：

通过Cesium官方网站下载最新版本的Cesium库文件。
使用CDN引入Cesium。例如，在HTML文件的头部添加以下代码：

<script src="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Cesium.js"></script> 
<link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Widgets/widgets.css">

创建第一个Cesium应用

我们先来创建一个简单的Cesium应用，显示一个基本的地球模型。

创建HTML文件，命名为index.html，并添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Cesium App</title>
    <style>
        #cesiumContainer {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Cesium.js"></script>
    <script>
        // 在此处编写Cesium代码
    </script>
</body>
</html>

2. script标签中，添加以下代码来创建一个简单的Cesium应用：

var viewer = new Cesium.Viewer('cesiumContainer');

添加地图和标记

现在，让我们在Cesium应用中添加一个地图图层和一些标记点。

修改JavaScript代码，添加以下代码来加载一个地图图层：

var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: new Cesium.OpenStreetMapImageryProvider({
        url: 'https://a.tile.openstreetmap.org/'
    })
});

现在会看到带有地图图层和一个红色标记点的Cesium应用。

添加地理数据

Cesium支持加载和展示各种地理数据，如地形、矢量数据等。下面我们将加载一个3D建筑模型来丰富我们的应用。

下载一个Cesium支持的3D建筑模型文件（例如.glb或.gltf格式）。
将模型文件放入项目文件夹，并修改JavaScript代码，添加以下代码来加载建筑模型：

var position = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
var heading = Cesium.Math.toRadians(135);
var pitch = 0;
var roll = 0;
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

var entity = viewer.entities.add({
    name: 'Building',
    position: position,
    orientation: orientation,
    model: {
        uri: 'path/to/your/model.glb'
    }
});

如此添加了一个建筑模型的Cesium应用

总结：通过本篇博客，我们初步了解了Cesium的基本用法。你学会了创建一个简单的Cesium应用、添加地图和标记，并加载了一个3D建筑模型。Cesium提供了丰富的功能和工具，使得开发地理空间应用变得更加简单和强大。希望这篇入门指南对你在使用Cesium构建交互式地理空间应用的旅程中有所帮助。