CesiumJS 案例 P27：创建椭圆、创建带边框的椭圆、创建圆、创建带边框的圆、创建椭圆环、创建圆环
CesiumJS
- CesiumJS 是一个开源的 JavaScript 库，它用于在网页中创建和控制 3D 地球仪（地图）
-
CesiumJS 官网：https://www.cesium.com/
-
CesiumJS 下载地址：https://www.cesium.com/platform/cesiumjs/
-
CesiumJS API 文档：https://cesium.com/learn/cesiumjs/ref-doc/index.html
一、创建椭圆
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Entity ellipse - 创建椭圆</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),ellipse: {semiMajorAxis: 50000, // 长轴（米）semiMinorAxis: 25000, // 短轴（米）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 ellipse - 创建带边框的椭圆</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),ellipse: {semiMajorAxis: 5000, // 长轴（米）semiMinorAxis: 2500, // 短轴（米）material: Cesium.Color.BLUE.withAlpha(0.5), // 颜色height: 0,outline: true,outlineColor: Cesium.Color.RED,outlineWidth: 10,},});// 设置相机当前正在跟踪的实体实例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 ellipse - 创建圆</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),ellipse: {semiMajorAxis: 2500, // 长轴（米）semiMinorAxis: 2500, // 短轴（米）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 ellipse - 创建带边框的圆</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),ellipse: {semiMajorAxis: 2500, // 长轴（米）semiMinorAxis: 2500, // 短轴（米）material: Cesium.Color.BLUE.withAlpha(0.5), // 颜色height: 0,outline: true,outlineColor: Cesium.Color.RED,outlineWidth: 10,},});// 设置相机当前正在跟踪的实体实例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 ellipse - 创建椭圆环</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),ellipse: {semiMajorAxis: 5000, // 长轴（米）semiMinorAxis: 2500, // 短轴（米）material: new Cesium.Color(0, 0, 0, 0), // 颜色height: 0,outline: true,outlineColor: Cesium.Color.RED,outlineWidth: 10,},});// 设置相机当前正在跟踪的实体实例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 ellipse - 创建圆环</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),ellipse: {semiMajorAxis: 2500, // 长轴（米）semiMinorAxis: 2500, // 短轴（米）material: new Cesium.Color(0, 0, 0, 0), // 颜色height: 0,outline: true,outlineColor: Cesium.Color.RED,outlineWidth: 10,},});// 设置相机当前正在跟踪的实体实例viewer.trackedEntity = entity;</script>
</html>