Cesium入门-3-官方完整实例

实例核心代码

//资源访问令牌 Cesium token
Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MWI5NTY0Mi1iOGE3LTQ3ZTMtOGQ4OC03NThiN2VkZGI4NTYiLCJpZCI6NzY2Niwic2NvcGVzIjpbImFzbCIsImFzciIsImFzdyIsImdjIl0sImlhdCI6MTU1MDIyNTM5OX0.2Abc9p46PA9kJ3E-BaKMXiyb0rvgo7AFUR1nR78VF7c'

//创建Cesium 场景
var viewer=new Cesium.Viewer('cesiumContainer',{ scene3DOnly:true, selectionIndicator:true, baseLayerPicker:true, timeline:true,//时间轴 animation:true,//动画轴 }); //增加地图图片资源提供者（CesiumIon） Cesium官方 viewer.imageryLayers.remove(0); //图片层级管理 移除默认的基础层级提供者 viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({assetId:3954})); //设置地形 viewer.terrainProvider=Cesium.createWorldTerrain({ requestWaterMask:true,//水渲染需求 requestVertexNormals:true//顶点法线渲染需求 }); viewer.scene.globe.depthTestAgainstTerrain=true;//深度显示（用于湖泊河流 水深对周围景观的影响） viewer.scene.globe.enableLighting=true;//全局日照（受太阳，月亮的位置而影响光照信息） //创建初始化摄像机视图 var initialPosition=new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);//摄像机位置 ，经度，纬度，高度 var initialOrientation=new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);//飞行 专用的 表示旋转角度之类的东西： 飞行中飞机机体轴相对于地面的角位置 var homeCameraView={ destination:initialPosition, orientation:{ heading:initialOrientation.heading, //偏航角 pitch:initialOrientation.pitch, //俯仰角 roll:initialOrientation.roll //滚转角 } }; viewer.scene.camera.setView(homeCameraView); //飞行时，相机的动画属性设置 homeCameraView.dutaion=2.0; homeCameraView.maximumHeight=2000; homeCameraView.pitchAdjustHeight=2000; homeCameraView.endTransform=Cesium.Matrix4.IDENTITY; // //覆盖初始相机视图 viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(e){ e.canvel=true; viewer.scene.camera.flyTo(homeCameraView) //貌似没效果 -.- }) //设置时间轴 viewer.clock.shouldAnimate=true;//右下角圆盘指针控制的时钟动画 viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z"); //开始时间 使用iso8601国际标准 viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z"); //停止时间 viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");//当前时间 viewer.clock.multiple=2; //时间流逝 速率 viewer.clock.clockStep=Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER;//时钟的 步长 viewer.clock.clockRange=Cesium.ClockRange.LOOP_STOP;//循环 viewer.timeline.zoomTo(viewer.clock.startTime,viewer.clock.stopTime);//设置时间轴可见趋近 /**加载KML数据--添加地理标记 从KML文件中获取数据 由Cesium.KmlDataSource数据加载器加载--**/ var kmlOptions = { camera : viewer.scene.camera, canvas : viewer.scene.canvas, clampToGround : true }; // 从KML 文件中加载地理标记点 geocache //KML全称：Keyhole Markup Language，是基于XML（eXtensible Markup Language,可扩展标记语言）语法标准的一种标记语言（markup language）,由Google（谷歌）旗下的Keyhole公司发展并维护，用来表达地理标记 var geocachePromise = Cesium.KmlDataSource.load('https://gist.githubusercontent.com/rahwang/bf8aa3a46da5197a4c3445c5f5309613/raw/04e17770dd552fd2694e2597986fd480b18b5014/sampleGeocacheLocations.kml', kmlOptions); // 从geocachePromise中解析标记点 并转化为 Cesium中的 实体对象（entity) geocachePromise.then(function(dataSource) { //数据源添加到实际场景viewer 中的dataSources数据源中 viewer.dataSources.add(dataSource); // Get the array of entities var geocacheEntities = dataSource.entities.values; for (var i = 0; i < geocacheEntities.length; i++) { var entity = geocacheEntities[i]; if (Cesium.defined(entity.billboard)) { // Adjust the vertical origin so pins sit on terrain entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM; // Disable the labels to reduce clutter entity.label = "KML billboard 兴趣点"+i; // Add distance display condition 满足的距离条件时，显示兴趣点 entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0); // Compute latitude and longitude in degrees 位置和角度 var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now())); //转化成经纬度 var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude); var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude); // Modify description 兴趣点属性 描述 var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>'; description += '<tr><th>' + "Latitude" + '</th><td>' + latitude + '</td></tr>'; description += '<tr><th>' + "Longitude" + '</th><td>' + longitude + '</td></tr>'; description += '</tbody></table>'; entity.description = description; } } }); /**加载GeoJson数据 ，添加邻近区图形 从GeoJson文件中获取数据 由GeoJsonDataSource数据加载器加载**/ var geojsonOptions = { clampToGround : true }; // 从Geojson文件中获取 多边形 边界信息数据 var neighborhoodsPromise = Cesium.GeoJsonDataSource.load('https://gist.githubusercontent.com/rahwang/2c421916bb955ca722a4dbc8ab079c76/raw/ae8a1c5680fbd2fc6940dd3a8f941ad397bdc085/sampleNeighborhoods.geojson', geojsonOptions); //从neighborhoodsPromise 数据源转化为Cesium中的数据实体entity var neighborhoods; neighborhoodsPromise.then(function(dataSource) { // 数据源添加到实际场景viewer 中的dataSources数据源中 viewer.dataSources.add(dataSource); neighborhoods = dataSource.entities; // 获取总的数据实体 数组 var neighborhoodEntities = dataSource.entities.values; for (var i = 0; i < neighborhoodEntities.length; i++) { var entity = neighborhoodEntities[i]; if (Cesium.defined(entity.polygon)) { // Use kml neighborhood value as entity name entity.name = entity.properties.neighborhood; // 设置多边形 的材质 和透明 entity.polygon.material = Cesium.Color.fromRandom({ red : 0.1, maximumGreen : 0.5, minimumBlue : 0.5, alpha : 0.6 }); // Tells the polygon to color the terrain. ClassificationType.CESIUM_3D_TILE will color the 3D tileset, and ClassificationType.BOTH will color both the 3d tiles and terrain (BOTH is the default) entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN; // 计算生成polygon的中心位置 var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions; var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center; polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter); entity.position = polyCenter; // 实体标签 显示的信息设置 entity.label = { text : entity.name,//文字 showBackground : false,//背景 scale : 0.6,//标签缩放大小 horizontalOrigin : Cesium.HorizontalOrigin.CENTER, verticalOrigin : Cesium.VerticalOrigin.BOTTOM, distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0), disableDepthTestDistance : Number.POSITIVE_INFINITY }; } } }); /**加载Czml数据 ，从czml文件中 由Cesium.CzmlDataSource 数据加载器加载飞行路径信息**/ // 从czml文件中加载数据 var dronePromise = Cesium.CzmlDataSource.load('https://gist.githubusercontent.com/rahwang/0d1afa6f9e5aa342cb699d26851d97df/raw/5fec1c0cebc097661579143096e796a097c9b629/sampleFlight.czml'); // Save a new drone model entity var drone; dronePromise.then(function(dataSource) { viewer.dataSources.add(dataSource); drone = dataSource.entities.values[0]; // 加载一个gtlf格式的3D模型 drone.model = { uri : 'https://gist.githubusercontent.com/rahwang/9843cb77fc1c6d07c287566ed4e08ee3/raw/dc3a9ff6fc73b784519ac9371c0e2cbd3ab3dc47/CesiumDrone.gltf', minimumPixelSize : 128, maximumScale : 2000 }; // 实时计算飞行时，模型的巡航角度 drone.orientation = new Cesium.VelocityOrientationProperty(drone.position); // 圆滑路径，使路径相对平滑过渡 插值过渡 drone.position.setInterpolationOptions({ interpolationAlgorithm : Cesium.HermitePolynomialApproximation, //插值算法 interpolationDegree : 2 }); //3D笛卡尔坐标点 drone.viewFrom = new Cesium.Cartesian3(-30, 0, 0); }); /**加载3dTile 数据集 瓦片数据 ，其实就是景观建筑群数据**/ var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) }));//我账号没有该地理资源。。。 // Adjust the tileset height so it's not floating above terrain var heightOffset = -32; city.readyPromise.then(function(tileset) { //3D瓦片的position 位置 var boundingSphere = tileset.boundingSphere; var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center); 

转载于:https://www.cnblogs.com/telwanggs/p/11289313.html