Cesium

幸运程序员

已于 2022-09-16 15:12:16 修改

阅读量363

点赞数

分类专栏：前端文章标签： javascript 动画前端

于 2022-08-31 22:57:09 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42046017/article/details/126634018

版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文档详细介绍了Cesium的使用，包括如何部署地图、关键类如Viewer、Scene、Entity和DataSourceCollection的运用，以及坐标转换、相机系统、空间数据加载与管理、鼠标交互和时间系统的操作。通过实例展示了在Cesium中加载模型、绘制图形和进行空间数据查询的方法。

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

Cesium笔记

1、如何部署出地图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cesium第一颗</title>
	//引入Cesium的两个重要文件
    <script src="../../libs/Cesium/Cesium.js"></script>
    <link href="../../libs/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html,
        body {
            margin: 0px;
            padding: 0px;
            height: 100%;
        }
        #cesiumContainer {
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>
        //官网申请的token令牌
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjMDNiZGQwYy0yNmJmLTRjOWYtODllYy0zODEzNGRlNjY4OTkiLCJpZCI6MTA2NDY0LCJpYXQiOjE2NjE5MjQyOTN9.hz6rQ0QG-K7TmXAkyf5RC0sWwcAEhhXl3ry6vet6n9k';
		//初始化Cesium
        const viewer = new Cesium.Viewer('cesiumContainer');
    </script>
</body>
</html>

2、Cessium的四个重要类

Viewer(查看器类)

介绍：它是Cesium展示三维要素内容的主要窗口，它不仅仅是包含三维地图的视窗，还包含了一些基础控件，在定义Viewer对象的同时需要设定基础部件、图层等的初始化状态

使用：new Cesium.Viewer(cesiumContainer,option)，第一个参数是页面的id，第二个是配置种类多样

案例：
```
const viewer = new Cesium.Viewer('cesiumContainer',{
    animation:false,  //控制动画播放控件显示，默认是true
    timeline:false,  //控制地图下方时间轴的显示，默认是true
    baseLayerPicker:false,  //去掉地球换肤功能
});
```
Scene(场景类)

介绍：在Cesium中Scene是非常重要的类，是所有3D图形对象的容器，是在viewer内部隐式创建的，我们可以对基础地理环境进行设置，还可以对场景数据进行设置，Cesium底层空间数据绘制方法是依赖Prmitive，prmitive API功能强大而且非常灵活，为程序员绘制高级图形提供了很大自由度，开发者可根据图形学原理自定义高级图形，除了以上，Scene还可以对场景进行交互，如鼠标事件，相机事件等，更可以在图层上绘制几何体，点、线、面

示例：viewer.scene.globe.show = true;//是否显示地球

案例：
```
//使用scene类中相机camera的setView方法
viewer.scene.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(114.357763,35.924515,1500)//经度，纬度，高度
})
```
Entity(实体类)

介绍：Entity是由Primitive封装而来，Entity并不属于Scene，相较而言Entity封装程度高，构造简单，使用便捷，使得开发者专注于数据的呈现，而不必担心底层的可视化机制，它还提供了用于构建复杂的、时间动态可视化的结构与静态数据自然的结合在一起，Entity API 能够提供灵活的、高性能的可视化，同时提供一致性，易于学习的，易于使用的接口

Entity在使用中主要用于加载实体模型，几何图形，对其进行样式设置，动效修改等

案例：
```
// 在地图上加载一个尺寸为100像素的绿色圆点
const entity = viewer.entities.add({
    //设置圆点的位置，参数：经度，纬度，高度
    position:Cesium.Cartesian3.fromDegrees(114.357763,35.924515,400),
    point:{
        pixelSize:100,//设置圆点大小
        color:new Cesium.Color(0,1,0,1) //设置圆点颜色
    }
})
viewer.trackedEntity = entity;  //将摄像头设置到圆点处，让我们能够观测到它
```
DataSourceCollection(数据源集合类)

介绍：它是Cesium中加载矢量数据的主要方式之一，最大的特点是支持加载矢量数据集和外部文件的调用，主要有三种调用方法，分别为 CzmlDataSource、kmlDataSource、GeoJsonDataSource，分别对应加载CZML、KML、GeoJSON 格式数据，在GIS开发中加载矢量数据是必不可少的功能，将矢量数据转换为以上任何一种方式，便可以在Cesium中实现矢量数据的加载和存取

案例：
```
viewer.dataSources.add(
    Cesium.GeoJsonDataSource.load(	//加载资源的路径
        "../../libs/SampleData/ne_10m_us_states.topojson"
    )
)
```

3、Cesium的坐标与转换

Cesium坐标系

WGS84经纬度坐标系（没有实际的对象）
WGS84弧度坐标系（Cartographic）

new Cesium.Cartographic(longitude(经度),latitude(纬度),height(高度))
笛卡尔空间直角坐标系（Cartesian3）

new Cesium.Cartesian3(x,y,z)
平面坐标系（Cartesian2）

new Cesium.Cartesian2(x,y,z)
4D笛卡尔坐标系（Cartesian4）

4、Cesium相机系统

setView

介绍：setView通过定义相机飞行目的地的三维坐标和视线方向将视角直接切换到所设定的视域范围内

场景：适用于快速切换视角的场景

案例：

const position = Cesium.Cartesian3.fromDegrees(114.357763,35.924515,400);
viewer.camera.setView({
    //设定相机的目的地
    destination:position,   
    //设定相机视口的方向
    orientation:{   
        //控制视口方向的水平旋转，也就是沿着Y轴旋转    0：正北方方向
        heading:Cesium.Math.toRadians(0),
        //控制视口的上下旋转，即沿X轴进行旋转    -90：俯视朝向地面
        pitch:Cesium.Math.toRadians(-90),  
        //控制视口的翻转角度，即沿着Z轴进行旋转     0：表示不翻转
        roll:0  
    }
})

flyTo

介绍：flyTo具有空中飞行逐步切换视域的效果，还可以设置飞行时间

const position = Cesium.Cartesian3.fromDegrees(114.357763,35.924515,400);
viewer.camera.flyTo({
    //设定相机的目的地
    destination:position,
    //设定相机视口的方向
    orientation:{   
        //控制视口方向的水平旋转，也就是沿着Y轴旋转    0：正北方方向
        heading:Cesium.Math.toRadians(0),
        //控制视口的上下旋转，即沿X轴进行旋转    -90：俯视朝向地面
        pitch:Cesium.Math.toRadians(-90),  
        roll:0  //控制视口的翻转角度，即沿着Z轴进行旋转     0：表示不翻转
    },
    duration:5  //设置5秒的飞行过程
})

lookAt

介绍：lokkAt方法也是直接将视角跳转到设置的目的地上，但是我们用鼠标任意旋转视角方向，是不会改变其位置的

场景：一般用于锁定某个场景的视角

案例：

const center = Cesium.Cartesian3.fromDegrees(114.357763,35.924515);
const heading = Cesium.Math.toRadians(50); //设置一个水平旋转视口方向的角度
const pitch = Cesium.Math.toRadians(-90); //设置一个垂直旋转视口的角度
const range = 2500;  //设置相机距离目标点的高度
viewer.camera.lookAt(center,new Cesium.HeadingPitchRange(heading,pitch,range))

viewBoundingSphere

介绍：它的视角切换效果也是和setView方法一样的，没有飞行的过渡效果，而是直接切换视口到指定的目的地，但是它可以给一个指定的目标点，让我们可以从多个角度更好的观测

场景：当我们需要对一个物体进行多角度观测或者建筑物进行定点漫游时

案例：

const position = Cesium.Cartesian3.fromDegrees(114.357763,35.924515,400);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position,new Cesium.HeadingPitchRoll(-160,0,0));    //模型的朝向
var entity = viewer.entities.add({
    position:position,
    orientation:orientation,
    model:{ //存储模型的各种信息
        uri:"../../libs/models/Cesium_Air.glb",//模型的路径链接
        minimumPixelSize:100, //设置模型缩放最小情况下的大小
        maximumScale:10000, //设置模型缩放最大的比例
        show:true   //设置模型是否显示
    }
})
//视口给到飞机
viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position,20),new Cesium.HeadingPitchRange(0,0,0))

5、建筑体添加和使用

在Cesium中无论载入几何体还是文字，都是基于空间位置的

//添加引入建筑物
const tileset = viewer.scene.primitives.add(	//primitives属性用于获取大量的基元集合
    new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(75343),//75343：代表官网账号里的建筑资源id
    })	//传输海量异构3D地理空间数据集
);
//添加相机信息
viewer.camera.setView({
    destination: new Cesium.Cartesian3(1333597.291762958,-4667718.246269587,4147626.344790953),
    orientation:{
        heading:0.8384333942956657,
        pitch:-1.299766516859664,
        roll:0,
    }
})
//修改模型样式
tileset.style = new Cesium.Cesium3DTileStyle({
    color:{
        conditions:[
            ['${Height} >= 300','rgba(45,0,75,0.5)'],
            ['${Height} >= 200','rgb(102,71,151)'],
            ['${Height} >= 100','rgb(170,162,204)'],
            ['${Height} >= 50','rgb(225,225,238)'],
            ['${Height} >= 25','rgb(252,230,200)'],
            ['${Height} >= 10','rgb(248,176,87)'],
            ['${Height} >= 5','rgb(198,106,11)'],
            ['true','rgb(127,59,8)']
        ]
    },
    show:'${Height} >= 0'
})

6、Cesium空间数据加载

var position = new Cesium.Cartesian3.fromDegrees(116.39,39.91,0);//位置信息

//绘制圆点
const entity = viewer.entities.add({
    position:position,
    point:{
        pixelSize:100,//圆的大小
        color:new Cesium.Color(1,0,0,1)	//颜色
    }
})

//绘制线条
const entity = viewer.entities.add({
    polyline:{
        show:true,
        //线条位置
        positions: new Cesium.Cartesian3.fromDegreesArray([116.39,39.91,116.40,39.91]),
        width:5,//线条宽度
        material: new Cesium.Color(0,0,1,1)	//颜色
    }
})

//绘制面（也可在面里边填充图片）
const entity = viewer.entities.add({
    position:position,//绘制面位置
    plane:{
        plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z,0),//确认面的朝向,设置沿着Z轴平铺
        dimensions:new Cesium.Cartesian2(500,500),  //用于设置面的长度和宽度
        //材质颜色为红色，透明度为0.5，也可通过给路径在面里边显示图片
        material: Cesium.Color.RED.withAlpha(0.5),
        outline:true,//是否显示边框线
        outlineColor: Cesium.Color.BLUE    //边框线颜色
    }
})

//加载3D飞机模型
const position2 = Cesium.Cartesian3.fromDegrees(114.357763,35.924515,400);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position,new Cesium.HeadingPitchRoll(-160,0,0));    //模型的朝向
const entity = viewer.entities.add({
    position:position2,//模型位置，因为是飞机模型所以需要有高度
    orientation:orientation,
    model:{ //存储模型的各种信息
        uri:"../../libs/models/Cesium_Air.glb",//模型的路径链接
        minimumPixelSize:100, //设置模型缩放最小情况下的大小
        maximumScale:10000, //设置模型缩放最大的比例
        show:true   //设置模型是否显示
    }
})

//绘制多边形
let redPolygon = viewer.entities.add({
    polygon:{
        hierarchy:	//fromDegreesArray录入多个点位信息，因为多边形是需要多个点位绘制的
        	Cesium.Cartesian3.fromDegreesArray([116.39,39.91,116.39,39.915,116.395,39.91]),
        material:Cesium.Color.RED,	//多边形颜色为红色
        extrudedHeight:200  //垂直方向进行拉伸，拉伸高度200，成为一个三维几何，不加就是二维平面
    }
})


viewer.trackedEntity = entity;	//可以通过trackedEntity快速把视口给到模型

7、空间数据管理

entities.add({}) 添加图形

let bluePolygon = viewer.entities.add({
    id: 'BlueModel',
    polygon:{//多边形
        //fromDegreesArray录入多个点位信息，因为多边形是需要多个点位绘制的
        hierarchy: Cesium.Cartesian3.fromDegreesArray([116.38,39.92,116.38,39.915,116.40,39.92]),
        material:Cesium.Color.BLUE,
        extrudedHeight:200  //垂直方向进行拉伸，成为一个三维几何
    }
})

entities.remove(redPolygon) 删除图形
```
viewer.entities.remove(bluePolygon);
```

entities.getById() 修改图形

//注意：BlueModel是需要在添加图形时声明个id
viewer.entities.getById('BlueModel').polygon.material = Cesium.Color.RED;

entities.removeAll() 删除所有图形
```
viewer.entities.removeAll();
```

8、鼠标交互数据查询

第一步首先需要给绘制的图形加id

const entity = viewer.entities.add({

id:‘planeLogo’,

position:position,

plane:{//绘制面

plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z,0),//确认面的朝向,设置沿着Z轴平铺

dimensions:new Cesium.Cartesian2(500,500), //用于设置面的长度和宽度

material: “…/…/libs/img/xingxing.png”, //给面填充图片

outline:true,//是否显示边框线

outlineColor: Cesium.Color.BLUE //边框线颜色

},

//点击显示详细的信息自定义

description:”“ //随机写html标签都可以

})
创建了一个屏幕控制实例，获取scene下所有canvas创建的元素
```
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
```

监听各种点击、移入事件等,setInputAction第一个参数是一个函数，第二个参数是具体是鼠标的哪个事件,本方法监听的是鼠标的左键点击事件

handler.setInputAction(function (movement){
    let pick = viewer.scene.pick(movement.position);//获取点击的对象，获取的是位置信息
    //先判断位置是否为空，在判断是否是我们所需要点击的图形id
    if(Cesium.defined(pick) && (pick.id.id === 'planeLogo')){
        alert('恭喜找到工作')
    }
},Cesium.ScreenSpaceEventType.LEFT_CLICK);

多种点击事件

Cesium.ScreenSpaceEventType.MIDDLE_CLICK 鼠标中键点击事件

Cesium.ScreenSpaceEventType.MOUSE_MOVE 鼠标移入事件

Cesium.ScreenSpaceEventType.RIGHT_CLICK 鼠标右击事件

Cesium.ScreenSpaceEventType.LEFT_CLICK 鼠标左击事件

多种获取方式

scene.pick：包含给定窗口位置基元的对象

scene.drillpick：给定窗口位置所有对象的列表

Globe.pick：给定光线和地形的交点

9、时间系统、粒子系统

//地图时间自动播放
viewer.clock.shouldAnimate = true;
//设定时间速率为1000
viewer.clock.multiplier = 1000;
//默认时间线是当前时间的24小时，可以设置新的时间线
let start = Cesium.JulianDate.fromIso8601('2022-01-05');//开始时间
let end = Cesium.JulianDate.fromIso8601('2022-01-20');//结束时间
viewer.timeline.zoomTo(start,end);//将时间设置上去