Cesium学习笔记

已于 2024-07-30 16:52:17 修改
阅读量151 收藏
点赞数 3
文章标签： 前端 学习 笔记
于 2024-07-12 10:10:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38524734/article/details/140370675
版权

一、创建vue3 cesium项目流程

  1. 在某个文件夹中cmd，输入：pnpm create vite 名称
  2. 选好条件后：pnpm i
  3. pnpm i cesium@1.99 vite-plugin-cesium
  4. 修改vite.config.js文件
          特定位置添加：import cesium from 'vite-plugin-cesium'   和
                                   plugins: [vue(), cesium()],
  5. 注释掉main.js里的： import './style.css' //不要默认样式了
  6. 在App.vue中引入cesium：import * as Cesium from 'cesium'
    在onMounted中挂载地图并设置样式：​​​​​​

二、初始化一个干净的地球，去除不必要的控件

const viewer = new Cesium.Viewer("cesiumContainer", {
    baseLayerPicker: false, //是否显示图层选择控件
    animation: false, //是否显示动画控件
    timeline: false,  //是否显示时间轴
    fullscreenButton: false, //是否显示全屏按钮
    geocoder: false,  //是否显搜索框
    homeButton: false, //是否显示主页按钮
    sceneModePicker: false, //是否显示投影方式按钮
    navigationHelpButton: false //是否显示帮助按钮
  })

三、手动指定影像图层（默认使用的谷歌的影像图层）

const ersi = new Cesium.ArcGisMapServerImageryProvider({		        
    url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
})
const viewer = new Cesium.Viewer("cesiumContainer", {
	imageryProvider: ersi,
})

四、经纬度 转 笛卡尔坐标

​
​const cartesian = Cesium.Cartesian3.fromDegrees(110,20,100) //参数：经度、维度、高度

笛卡尔坐标对象：

五、笛卡尔 转 经纬度坐标

// 笛卡尔转经纬度坐标(笛卡尔坐标->弧度坐标->经纬度坐标)
const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
// let lon = 180 / Math.PI * cartographic.longitude
let lon = Cesium.Math.toDegrees(cartographic.longitude)
let lat = Cesium.Math.toDegrees(cartographic.latitude)
console.log(lon, lat, cartographic.height)

弧度坐标对象：

六、相机

// 相机
// setView通过定义相机飞行目的地，直接跳转到目的地
viewer.camera.setView({
    destination: position,
    // 方向（默认分别是 0 -90 0）
    orientation: {
	    heading: Cesium.Math.toRadians(0), //左右看
	    pitch: Cesium.Math.toRadians(-90), //上下看
	    roll: Cesium.Math.toRadians(0), //歪头看
    },
})
// flyTo有飞行动画
viewer.camera.flyTo({
	destination: position,
	duration: 3, //飞行时长 单位（秒）
	orientation: {
		heading: Cesium.Math.toRadians(0), //左右看
		pitch: Cesium.Math.toRadians(0), //上下看
		roll: Cesium.Math.toRadians(0), //歪头看
	},
})
// lookAt将视角固定在设置的点位上
const position2 = Cesium.Cartesian3.fromDegrees(110, 20, 20000)
viewer.camera.lookAt(
	position2,
	new Cesium.HeadingPitchRange(
		Cesium.Math.toRadians(0),
		Cesium.Math.toRadians(-90),
		20000
	)
)

七、常用实体

​
// 点
viewer.entities.add({
	position: Cesium.Cartesian3.fromDegrees(121, 30),
	point: {
		pixelSize: 20,
		color: Cesium.Color.RED,
	},
})

// 标注
const billboard = viewer.entities.add({
	position: Cesium.Cartesian3.fromDegrees(116, 40, 1000),
	billboard: {
		image: "/src/assets/img/点位.png",
		scale: 0.9, //控制图片大小
		// color: Cesium.Color.YELLOWGREEN                //封装好的颜色
		color: Cesium.Color.fromCssColorString("#fff"), //也可以自定义颜色
	},
    // 文本
	label: {
		text: "测试文字",
		showBackground: true, //开启背景色
		backgroundColor: Cesium.Color.BLACK.withAlpha(0.5), //颜色+开启透明度
		pixelOffset: new Cesium.Cartesian2(0, -40),
	},
})

// 线
const polyline = viewer.entities.add({
	polyline: {
		// positions: Cesium.Cartesian3.fromDegreesArray([100, 20, 100, 25, 115, 20]), //如果线是不需要高度的 就用这个
		positions: Cesium.Cartesian3.fromDegreesArrayHeights([
			100, 20, 5000, 100, 25, 5000, 115, 20, 500000,
		]),       //如果想让线有高度 就用这个
		width: 10,
		material: Cesium.Color.RED,
	},
})

// 多边形
const ploygon = viewer.entities.add({
	polygon: {
		hierarchy: {
			positions: Cesium.Cartesian3.fromDegreesArray([
				101, 21, 101, 26, 116, 21,
			]),
		},
		material: Cesium.Color.BLUE,
		height: 100000,
		extrudedHeight: 200000, //向上挤出高度
		outline: true,
		outlineColor: Cesium.Color.WHITE, //描边 外线
		fill: true, //是否填充
	},
})

// 盒子(立方体)
const box = viewer.entities.add({
	position: Cesium.Cartesian3.fromDegrees(119, 30, 3000),
	box: {
		dimensions: new Cesium.Cartesian3(2000, 1000, 3000),
		material: new Cesium.Color(1, 1, 0),
	},
})

// 椭圆
const ellipse = viewer.entities.add({
	position: Cesium.Cartesian3.fromDegrees(118, 30),
	ellipse: {
		semiMajorAxis: 500, //半长轴
		semiMinorAxis: 300, //半短轴
		material: Cesium.Color.YELLOW,
		rotation: Math.PI / 2, //旋转角度
	},
})

// 矩形
const rectangle = viewer.entities.add({
	rectangle: {
		coordinates: Cesium.Rectangle.fromDegrees(120, 40, 123, 45),
		material: "/src/assets/img/点位.png",  //也可以使用图片填充
		extrudedHeight: 30000
	},
})

​

八、动态实体

// CallbackProperty 生成一个动态实体
let lon, lat,num = 0
const line = viewer.entities.add({
	polyline: {
		// CallbackProperty会产生一个死循环 持续输出Cesium.Cartesian3.fromDegreesArray
		positions: new Cesium.CallbackProperty(() => {
			console.log(1)
			num += 0.005
			lon = 120 + num
			lat = 30 + num
			if (lon < 121) {
				return Cesium.Cartesian3.fromDegreesArray([120, 30, lon, lat])
			} else {
				// 跳不出死循环
				// return Cesium.Cartesian3.fromDegreesArray([
				// 	120, 30, 121, 31,
				// ])

				// 跳出死循环  (给positions赋值一个新的对象，不再需要CallbackProperty提供)
				line.polyline.positions =
					Cesium.Cartesian3.fromDegreesArray([120, 30, 121, 31])
			}
		}, false),
		material: Cesium.Color.YELLOW,
		width: 5,
	},
})

九、加载不同格式的数据dataSource

// 加载geojson格式的线
const linestring = turf.lineString([
 	[-24, 63],
 	[-23, 60],
 	[-25, 65],
 	[-20, 69],
])
const promise = Cesium.GeoJsonDataSource.load(linestring)
console.log(promise)
promise.then((res) => {
 	const entity = res.entities.values[0]
 	viewer.entities.add(entity)
})

// 加载geojson格式的多条线
const multiLine = turf.multiLineString([
 	[
 		[0, 0],
 		[4, 4],
 	],
 	[
 		[6, 6],
 		[10, 10],
 	],
])
const promise = Cesium.GeoJsonDataSource.load(multiLine)
promise.then((res) => {
    data = res
 	viewer.dataSources.add(res)
 	console.log(viewer.dataSources)
})

// 加载geojson格式的多边形
let polygon = turf.polygon([
 	[
		[-5, 52],
		[-4, 56],
 		[-2, 51],
 		[-5, 52],
 	],
])
const promise = Cesium.GeoJsonDataSource.load(polygon)
// 可以不用.then 直接加
viewer.dataSources.add(promise)
viewer.zoomTo(promise)

// 加载topojson格式数据
const promise = Cesium.GeoJsonDataSource.load("/src/assets/usa.topojson")
viewer.dataSources.add(promise)
viewer.zoomTo(promise)

// 加载Kml(kmz)格式的数据
const promise = Cesium.KmlDataSource.load("/src/assets/gdp2008.kmz")
viewer.dataSources.add(promise)
viewer.zoomTo(promise)

// 加载Czml格式的数据
const promise = Cesium.CzmlDataSource.load("/src/assets/Vehicle.czml")
promise.then((res) => {
	viewer.dataSources.add(res)
	let entity = res.entities.getById("Vehicle")
	viewer.trackedEntity = entity // trackedEntity 可以实现一直移动相机跟踪entity目标
})

十、加载3D瓦片的两种方式

1、使用Ion资源加载3DTiles数据：
const tileset1 = viewer.scene.primitives.add(
	new Cesium.Cesium3DTileset({
		url: Cesium.IonResource.fromAssetId(69380), //75343
	})
)

2、加载本地中的3DTiles数据：
const tileset2 = viewer.scene.primitives.add(
	new Cesium.Cesium3DTileset({
		url: '/src/assets/b3dm/tileset.json', //tileset.json是入口文件
	})
)

十一、鼠标点击事件

​
//1、点击地图某个位置添加一个点
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
handler.setInputAction((event)=>{
	// 获取点击位置的笛卡尔坐标
	let position = viewer.scene.pickPosition(event.position)
	// 如果有这个坐标 则添加一个点
	if(Cesium.defined(position)){
		viewer.entities.add({
			position: position,
			point: {
				color: Cesium.Color.RED,
				pixelSize: 30
			}
		})
	}
},Cesium.ScreenSpaceEventType.LEFT_CLICK)

//2、点击拾取的对象，变为蓝点
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
handler.setInputAction((event)=>{
	let pick = viewer.scene.pick(event.position)
	if(pick && pick.id){
		pick.id.point.color = Cesium.Color.BLUE
	}
},Cesium.ScreenSpaceEventType.LEFT_CLICK)

​//3、画线
let arr = []
const line = viewer.entities.add({
	polyline: {
		positions: [],
		material: Cesium.Color.YELLOW,
		width: 5,
		clampToGround: true
	}
})

handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
handler.setInputAction((event)=>{
	let position = viewer.scene.pickPosition(event.position)
	if(Cesium.defined(position)){
		const point = viewer.entities.add({
			position: position,
			name: 'point',
			point: {
				color: Cesium.Color.RED,
				pixelSize: 30
			}
		})
		arr.push(position)
		pointList.push(point)
		line.polyline.positions = arr
	}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)

handler.setInputAction(()=>{
	// 结束所有事件 且只保留一条线  
	handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
	handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
	pointList.forEach((item) => {
		viewer.entities.remove(item)
	})
	pointList = []
},Cesium.ScreenSpaceEventType.RIGHT_CLICK)

十二、鼠标移动事件

// 鼠标移到哪个要素上哪个要素变红
let lastPick
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
handler.setInputAction((event)=>{
	let pick = viewer.scene.pick(event.endPosition) 
	if(pick){
		if(lastPick){
			lastPick.color = Cesium.Color.WHITE
		}
		pick.color = Cesium.Color.ORANGERED
		lastPick = pick
	}
},Cesium.ScreenSpaceEventType.MOUSE_MOVE)

十三、三维模型

const position = Cesium.Cartesian3.fromDegrees(114,30,300)
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
	position,
	Cesium.HeadingPitchRoll.fromDegrees(0,0,0)
)

const entity = viewer.entities.add({
	position, //位置
	orientation, //方向
	model: {
		uri: '/src/assets/Cesium_Air.glb',
		minimumPixelSize: 200  //模型最小像素
	}
})

十四、粒子效果

//粒子效果
viewer.scene.primitives.add(new Cesium.ParticleSystem({
	image: '/src/assets/img/fire.png',
	imageSize: new Cesium.Cartesian2(20,20), //尺寸
	startScale: 1.0, //初始大小
	endScale: 4.0, //最后大小
	particleLife: 3.0, //设置每一个粒子存在的时间
	speed: 5.0, //发射粒子的速度
	emitter: new Cesium.CircleEmitter(2), //设置发射器（圆形发射器）
	// emitter: new Cesium.BoxEmitter(new Cesium.Cartesian3(10,10,10)),
	emissionRate: 5, //粒子发射数量
	modelMatrix: entity.computeModelMatrix(
		viewer.clock.startTime, //时间空间中的起始时间
		new Cesium.Matrix4() //4*4矩阵数据
	), //设置位置
	lifetime: 16, //生命期属性为所需的持续时间
	// loop: false, //只循环一次
}))

十五、点聚合

let viewer,data
const toDel = () =>{
	viewer.dataSources.remove(data)
}

const pinBuilder = new Cesium.PinBuilder();
  const pin300 = pinBuilder
    .fromText("300+", Cesium.Color.RED, 48)
    .toDataURL();
  const pin100 = pinBuilder
    .fromText("100+", Cesium.Color.ORANGE, 48)
    .toDataURL();
  const pin50 = pinBuilder
    .fromText("50+", Cesium.Color.YELLOW, 48)
    .toDataURL();
  const pin30 = pinBuilder
    .fromText("30+", Cesium.Color.GREEN, 48)
    .toDataURL();
  const pin10 = pinBuilder
    .fromText("10+", Cesium.Color.BLUE, 48)
    .toDataURL();

onMounted(() => {
	Cesium.Ion.defaultAccessToken =
		"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4NWNkMTZkYy1hY2I5LTQwNDgtYjM5ZC0yNTY5NTc3NDUwMDAiLCJpZCI6MTgxMTUzLCJpYXQiOjE3MDExNDM4ODB9.MT-iAoFv-Ok7r1DIM-zd-8fsrah5iK2wMeNoftoPNig"
	viewer = new Cesium.Viewer("cesiumContainer", {})

	Cesium.GeoJsonDataSource.load('/src/assets/camera.json').then(res => {
		data = res
		res.clustering.enabled = true;
    	res.clustering.pixelRange = 30;
    	res.clustering.minimumClusterSize = 3;
		res.clustering.clusterEvent.addEventListener((clusteredEntities, cluster)=>{
			cluster.billboard.show = true
			cluster.label.show = false
			if (clusteredEntities.length >= 300) {
				cluster.billboard.image = pin300
			} else if (clusteredEntities.length >= 100) {
				cluster.billboard.image = pin100
			} else if (clusteredEntities.length >= 50) {
				cluster.billboard.image = pin50
			} else if (clusteredEntities.length >= 30) {
				cluster.billboard.image = pin30
			} else if (clusteredEntities.length >= 10) {
				cluster.billboard.image = pin10
			}
		})

		viewer.dataSources.add(res)
		res.entities.values.forEach(item=>{
			item.billboard.image = '/src/assets/img/点位.png'
			// item.billboard.scale = 0.15
		})
		viewer.flyTo(res)
	})
})

鸡尾酒、、
关注
cesium 学习笔记
最爱松露巧克力
06-30 2244
Cesium简介 Cesium是一个基于JavaScript的开源框架，可用于在浏览器中绘制3D的地球，并在其上绘制地图（支持多种格式的瓦片服务），该框架不需要任何插件支持，但是浏览器必须支持WebGL。 Cesium支持多种数据可视化方式，可以绘制各种几何图形、导入图片，甚至3D模型。同时，Cesium还支持基于时间轴的动态数据展示，例如，我们可以用它绘制卫星运行轨迹。 Cesium HelloWorld 下面的例子在浏览器中显示一个太空背景、具有地图覆盖的3D地球： index.html X
cesium 获取圆形边界位置_Cesium学习笔记-工具篇33-cesium雷达扫描
weixin_39575007的博客
12-21 868
通过设置fragmentShader告诉cesium我们运行后处理的内容(2)The shader mustcontain a sampler uniform declaration for colorTexture,depthTexture, or both.Shader代码中必须包含colorTexture和colorTexture至少一个声明(3)The shader mustcontain...
【Cesium学习笔记】三、画点、画线、画多边形
jg10000119的博客
04-11 1150
对Cesium画点、画线、画多边形、组合图形
cesium学习笔记
Sukla的博客
08-22 248
1. cesium.js是一个可以显示三维地球的开源框架 2. 先知道几个坐标系：经纬高坐标系、屏幕坐标系、世界坐标系 3. 要看一下什么是瓦片数据，也可以理解为栅格系统，每个栅格对应一个图片的uri，在配置里填上对应的能响应约定的栅格图片的地图服务，就能仿真一个地球出来了 4. 要知道什么是相机，需要在浏览器里指定一个元素作为视口，我们通过这个视口，能看到一个三维的场景，这个视口的画面是相...
Cesium 学习笔记
qq_34583944的博客
12-19 480
Cesium是一个由美国航空航天局（NASA）开发的开源JavaScript库，用于创建高性能的3D地理空间应用程序。官网：https://cesium.com，它最初是作为NASA的一个项目，旨在提供一个可视化和交互式的地球浏览工具。Cesium的发展始于2011年，最初是由Patrick Cozzi在NASA的研究项目中开发的。随着时间的推移，Cesium逐渐成为一个独立的开源项目，并吸引了来自全球开发者社区的贡献和支持。
Cesium学习笔记01
weixin_41377008的博客
08-22 369
一、环境部署 1.1 、node.js安装 安装node.js 环境 1）下载node.js 官网：https://nodejs.org/en/， 下载了8.11.4LtS版本 下载完成后双击安装，选择 D:\nodejs\ 为安装路径，其他均为默认。 确认node.js是否安装成功：命令窗口（windows+r，输入cmd，enter确认）输入命令：node空格 -v，如果成功，...
Cesium学习笔记之第一章
u011365716的博客
07-08 389
第一章 1、Cesium中的几种坐标和相互转换 https://blog.csdn.net/qq_34149805/article/details/78393540 1、Cartesian3:笛卡尔空间直角坐标系，也叫世界坐标 2、经纬度：地理坐标系，cesium中没有具体的经纬度对象，要得到经纬度首先要计算弧度，再进行转换 3、弧度：球上的弧度 2、CesiumLab V...
cesium绘制网格_Cesium学习笔记-工具篇37-风场绘制
weixin_39640024的博客
12-22 1030
这两天重新接触到流场，于是研究下，在大牛们的轮子上也算实现了效果：1二维2三维主要参考以下三篇文章：《WebGL风向图》给出制作风向图通常步骤：1. 在屏幕上生成一系列随机粒子位置并绘制粒子。2. 对于每一个粒子，查询风数据以获得其当前位置的粒子速度，并相应地移动它。3. 将一小部分粒子重置为一个随机的位置。这就确保了风从不会变成空的区域。4. 淡出当前屏幕，并在顶部绘制新定位的粒子。风场数据获取...
cesium学习笔记---经纬网
qq_35327656的博客
03-14 1167
参考网上下载资料（http://cesium.xin/wordpress/），自己修改了一下，实现效果如下：
Cesium学习笔记——及时计算多边形面积
DarkAfraid的博客
08-06 4008
一个可点击选择位置的以创建多边形的entities，并且对这个entities进行面积的计算。 提供Cesium的网址，以作参考：https://cesiumjs.org/ 具体如图： 下面是script部分的代码，细节有注释，html部分的自己发挥,viewer本文是在全局引入，根据自己情况设置 <script> export default { ...
Cesium初学笔记总结
m0_37755995的博客
03-16 4239
Cesium初学笔记总结 Cesium基本了解
Cesium学习笔记2
最新发布
qq_58473164的博客
08-06 551
click.position是一个Cesium.Cartesian2对象，表示的是屏幕上的点击位置，而这个位置通常情况下是由屏幕空间事件处理器也即screenSpaceEventHandler来进行提供，当用户在屏幕上点击时，该事件处理器提供这些信息，click.position中的x，y分别表示位置在屏幕上的水平和竖直坐标。ray是指射线，是一个Cesium.ray对象，表示从摄像机指向屏幕点击位置的射线，该射线正是由第四行代码的运行产生的，第四行代码运行后返回一个Cesium.Ray对象。
cesium笔记
weixin_48828067的博客
08-19 316
//相机高度小于10000 //console.log(that.viewer.camera.positionCartographic.height.toFixed(0),1234)
自己学习Cesium的笔记简介
weixin_47024018的博客
07-20 316
Cesium的学习总结笔记
Cesium笔记记录，覆盖所有面试知识点
m0_60226911的博客
03-18 707
);// 4. 飞向利用方位角(heading)、俯仰角(pitch)、滚动角(roll)表示方向(orientatin)的位置roll : 0.0});4.3 orientation角度详解roll是围绕 X 轴旋转；pitch是围绕 Y 轴旋转；heading是围绕 Z 轴旋转[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ytZfFEdO-1627047403797)(695334-20190326182805986-694175803.png)]
Cesium笔记记录，覆盖所有面试知识点，2024年前端开发书籍推荐
m0_60229361的博客
03-18 960
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。
cesium学习笔记（问题记录）——（一）
CheryW的博客
11-17 3433
cesium学习笔记
cesium学习资料
10-01
关于Cesium的学习资料，有以下推荐： 1. 官方文档：Cesium官方网站提供全面的文档，包含了详细的API参考和使用指南。你可以在官网上找到基本的快速入门教程，了解如何在Cesium中创建和展示地球、添加模型和图层等等。 2. Cesium教程：网络上有很多Cesium的教程可供学习。有一些博客、文章和视频提供了针对初学者的入门教程，介绍了如何安装Cesium、创建场景、添加要素等等。 3. 书籍：一些出版的书籍也介绍了Cesium的基础知识和应用实例。例如《Cesium.js权威指南》提供了全面的介绍，涵盖了Cesium的核心概念和实际应用案例。 4. 示例代码：Cesium官方网站上提供了许多示例代码，可以帮助你学习如何使用Cesium进行各种地理可视化和3D地球开发。你可以在Cesium的github页面上找到示例代码库，并参考这些代码进行学习和实践。 5. 在线论坛和社区：Cesium有一个活跃的在线社区，你可以在论坛和社交媒体上找到其他Cesium用户的讨论和经验分享。通过这些交流渠道，你可以获取更多的学习资料和解答问题的方法。 总的来说，通过官方文档、教程、书籍、示例代码以及在线社区，你可以获得丰富的学习资料来学习Cesium，掌握其基本概念和使用方法。不断实践和积累经验，才能在Cesium的开发中更加熟练和高效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值