<!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>polyline</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 redLine = viewer.entities.add({ name : 'Red line on terrain', polyline : { positions : Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]), width : 5, material : Cesium.Color.RED, clampToGround : true } }); let glowingLine = viewer.entities.add({ name : 'Glowing blue line on the surface', polyline : { positions : Cesium.Cartesian3.fromDegreesArray([-75, 37, -125, 37]), width : 10, material : new Cesium.PolylineGlowMaterialProperty({ glowPower : 0.2, // 总线宽变成原来的20%。 color : Cesium.Color.BLUE }) } }); let orangeOutlined = viewer.entities.add({ name : 'Orange line with black outline at height and following the surface', polyline : { positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 39, 250000, -125, 39, 250000]), width : 5, material : new Cesium.PolylineOutlineMaterialProperty({ color : Cesium.Color.ORANGE, outlineWidth : 2, outlineColor : Cesium.Color.BLACK }) } }); let purpleArrow = viewer.entities.add({ name : 'Purple straight arrow at height', polyline : { positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 43, 500000, -125, 43, 500000]), width : 10, followSurface : false, // 跟随地球表面，默认true。 material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE) } }); let dashedLine = viewer.entities.add({ name : 'Blue dashed line', polyline : { positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 45, 500000, -125, 45, 500000]), width : 4, material : new Cesium.PolylineDashMaterialProperty({ color: Cesium.Color.CYAN // 青色 }) } }); viewer.zoomTo(viewer.entities); </script> </body> </html> 