<!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.112/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.112/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style >
body{
margin: 0;
}
#cesiumContainer{
margin: 0;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script type="module">
// Your access token can be found at: https://ion.cesium.com/tokens.
// This is the default access token from your ion account
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3YzM5NWM0OS0xZjNjLTQxOWItYTQ4ZC0xODFhZTJlNTM1NTEiLCJpZCI6MTc4OTMwLCJpYXQiOjE3MDAxOTQxODR9.SAW21kpek-PHZh_fBdOpwJJSJFpGvh4F04RJqonS-CY';
var viewer = new Cesium.Viewer('cesiumContainer',{
imageryProvider1 : new Cesium.UrlTemplateImageryProvider({
url: 'http://127.0.0.1:8887/quanqiu/{z}/{x}/{y}/tile.png',
credit: '我的地图',
maximumLevel: 12
})
});
const box = new Cesium.BoxGeometry({
vertexFormat : Cesium.VertexFormat.POSITION_ONLY,
maximum : new Cesium.Cartesian3(20, 20, 20),
minimum : new Cesium.Cartesian3(0, 0, 0)
});
const geometry = Cesium.BoxGeometry.createGeometry(box);
// // 定义立方体的位置
var position = Cesium.Cartesian3.fromDegrees(126.146869737466616, 43.929544523535149, 50);
//
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(126.146869737466616, 43.929544523535149, 50)
);
// 创建立方体的外观
var boxInstance = new Cesium.GeometryInstance({
geometry: geometry,
// modelMatrix: Cesium.Matrix4.fromTranslation(position)
modelMatrix: modelMatrix
});
// 将立方体添加到场景中
var boxPrimitive = viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances: [boxInstance] ,
appearance : new Cesium.MaterialAppearance({
material : new Cesium.Material({
fabric : {
type : 'Color',
uniforms : {
color : new Cesium.Color(1.0, 1.0, 0.0, 1.0)
}
}
}),
faceForward : true
})
}));
viewer.camera.setView({
// Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州
// fromDegrees()方法,将经纬度和高程转换为世界坐标
destination: Cesium.Cartesian3.fromDegrees(126.146869737466616, 43.929544523535149, 500),
orientation: {
// 指向
heading: 195,
// 视角
pitch: -39,
roll: 0.0
}
});
</script>
</div>
</body>
</html>
cesium学习记录Primitive——BoxGeometry立方体图形
最新推荐文章于 2024-03-15 11:32:32 发布