CesiumJS 案例 P4：创建三角形、创建多边形、创建折线、创建盒子、创建圆柱
CesiumJS
-
CesiumJS API：https://cesium.com/learn/cesiumjs/ref-doc/index.html
-
CesiumJS 是一个开源的 JavaScript 库，它用于在网页中创建和控制 3D 地球仪（地图）
一、创建三角形
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>创建 Entity - 三角形</title><link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" /><style>* {margin: 0;padding: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}.container {width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>const viewer = new Cesium.Viewer("container");// 创建实体实例const entity = viewer.entities.add({polygon: {hierarchy: Cesium.Cartesian3.fromDegreesArray([-110.0,25.0, // 第一个顶点的经度、纬度-100.0,25.0, // 第二个顶点的经度、纬度-100.0,35.0, // 第三个顶点的经度、纬度]),material: Cesium.Color.BLUE.withAlpha(0.5),},});// 设置相机当前正在跟踪的实体实例viewer.trackedEntity = entity;</script>
</html>
二、创建多边形
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>创建 Entity - 多边形</title><link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" /><style>* {margin: 0;padding: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}.container {width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>const viewer = new Cesium.Viewer("container");// 创建实体实例const entity = viewer.entities.add({polygon: {hierarchy: Cesium.Cartesian3.fromDegreesArray([-110.0,30.0, // 第一个顶点的经度、纬度-105.0,25.0, // 第二个顶点的经度、纬度-100.0,30.0, // 第三个顶点的经度、纬度-105.0,35.0, // 第四个顶点的经度、纬度-105.0,40.0, // 第五个顶点的经度、纬度]),material: Cesium.Color.BLUE.withAlpha(0.5),},});// 设置相机当前正在跟踪的实体实例viewer.trackedEntity = entity;</script>
</html>
三、创建折线
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>创建 Entity - 折线</title><link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" /><style>* {margin: 0;padding: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}.container {width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>const viewer = new Cesium.Viewer("container");// 创建实体实例const entity = viewer.entities.add({polyline: {positions: Cesium.Cartesian3.fromDegreesArray([-75.59777, 40.03883, -122.43747, 37.77493]),width: 5,material: Cesium.Color.BLUE.withAlpha(0.5),},});// 设置相机当前正在跟踪的实体实例viewer.trackedEntity = entity;</script>
</html>
四、创建盒子
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>创建 Entity - 盒子</title><link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" /><style>* {margin: 0;padding: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}.container {width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>const viewer = new Cesium.Viewer("container");// 创建实体实例const entity = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000.0),box: {dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),material: Cesium.Color.BLUE.withAlpha(0.5),},});// 设置相机当前正在跟踪的实体实例viewer.trackedEntity = entity;</script>
</html>
五、创建圆柱
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>创建 Entity - 圆柱</title><link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" /><style>* {margin: 0;padding: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}.container {width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>const viewer = new Cesium.Viewer("container");// 创建实体实例const entity = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0.0),cylinder: {length: 200000.0,topRadius: 100000.0,bottomRadius: 100000.0,material: Cesium.Color.BLUE.withAlpha(0.5),},});// 设置相机当前正在跟踪的实体实例viewer.trackedEntity = entity;</script>
</html>