cesium 1.52 demo _ Circles and Ellipses.html
阿新 • • 發佈:2018-12-28
<!DOCTYPE html> <html lang="en"> <head> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- Tell IE to use the latest, best version. --> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <!-- Make the app on mobile take up the full browser screen and disable user scaling. --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>Circles and Ellipses</title> <!-- The Cesium library. --> <script src="../ThirdParty/Cesium/Cesium.js"></script> <!-- Style our app. --> <style> @import url(../ThirdParty/Cesium/Widgets/widgets.css); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <div id="cesiumContainer"></div> <script> Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNDhhYmQxOC1mYzMwLTRhYmEtOTI5Ny1iNGExNTQ3ZTZhODkiLCJpZCI6NTQ1NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MzM3Mzc0NH0.RU6ynAZcwQvdfygt_N_j2rb2lpsuyyROzdaLQg0emAg'; let viewer = new Cesium.Viewer('cesiumContainer'); let greenCircle = viewer.entities.add({ name : 'Green circle at height with outline', // 實體名稱。 position: Cesium.Cartesian3.fromDegrees(-111.0, 40.0, 150000.0), // 實體中心位置。(經度,維度,中心高度) ellipse : { // 實體型別:橢圓 semiMinorAxis : 300000.0, // 短半軸 semiMajorAxis : 300000.0, // 長半軸 height: 200000.0, // 指定橢圓中心相對於橢球面的高度。上下兩個高度不一致,以最新的為準。 material : Cesium.Color.GREEN, // 填充顏色。 outline : true // 要想顯示輪廓線,高度必須設定。輪廓線顏色,預設黑色。 } }); let redEllipse = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0), // 實體中心位置。預設中心高度0. name : 'Red ellipse on surface', ellipse : { semiMinorAxis : 250000.0, semiMajorAxis : 400000.0, material : Cesium.Color.RED.withAlpha(0.5) // 填充顏色及透明度。 } }); let blueEllipse = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0), // 實體中心位置。(經度,維度,中心高度) name : 'Blue translucent, rotated, and extruded ellipse with outline', ellipse : { semiMinorAxis : 150000.0, semiMajorAxis : 300000.0, extrudedHeight : 200000.0, // 拉伸高度,即實體高度。 rotation : Cesium.Math.toRadians(45), // 旋轉 material : Cesium.Color.BLUE.withAlpha(0.5), outline : true } }); viewer.zoomTo(viewer.entities); </script> </body> </html>