<!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>Rectangle</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 redRectangle = viewer.entities.add({ name : 'Red translucent rectangle', rectangle : { coordinates : Cesium.Rectangle.fromDegrees(-110.0, 20.0, -80.0, 25.0), material : Cesium.Color.RED.withAlpha(0.5) } }); let greenRectangle = viewer.entities.add({ name : 'Green translucent, rotated, and extruded rectangle at height with outline', rectangle : { coordinates : Cesium.Rectangle.fromDegrees(-110.0, 30.0, -100.0, 40.0), material : Cesium.Color.GREEN.withAlpha(0.5), rotation : Cesium.Math.toRadians(45), extrudedHeight : 300000.0, height : 100000.0, // 实体是介于height - extrudedHeight之间的部分。 outline : true, // height must be set for outline to display outlineColor : Cesium.Color.BLACK } }); let rotation = Cesium.Math.toRadians(30); function getRotationValue() { // rotation -= 0.005; rotation += 0.005; return rotation; } viewer.entities.add({ name: 'Rotating rectangle with rotating texture coordinate', rectangle: { coordinates: Cesium.Rectangle.fromDegrees(-92.0, 30.0, -76.0, 40.0), // material, 既可以是颜色,也可以是图片。 material: 'https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/images/Cesium_Logo_Color.jpg', // rotation,旋转经纬度指定的坐标矩形。 rotation: new Cesium.CallbackProperty(getRotationValue, false), // 当回调函数每次返回相同的值时为true,如果值将更改,则为false。 // stRotation, 旋转material,指定的图片内容。 stRotation: new Cesium.CallbackProperty(getRotationValue, false), classificationType : Cesium.ClassificationType.TERRAIN // terrain, 3D Tiles, or both } }); viewer.zoomTo(viewer.entities); </script> </body> </html>
cesium 1.52 demo - Rectangle.html
猜你喜欢
转载自blog.csdn.net/weixin_42193179/article/details/85620795
今日推荐
周排行