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); var surfacePosition = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); var offsetPosition = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset); var translation = Cesium.Cartesian3.subtract(offsetPosition, surfacePosition, new Cesium.Cartesian3()); tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation); }); //定义Tile样式 // Define a white, opaque building style var defaultStyle = new Cesium.Cesium3DTileStyle({ color : "color('white')", show : true }); // Define a white, transparent building style var transparentStyle = new Cesium.Cesium3DTileStyle({ color : "color('white', 0.3)", show : true }); // Define a style in which buildings are colored by height 针对不同高度给与不同的样式 var heightStyle = new Cesium.Cesium3DTileStyle({ color : { conditions : [ ["${height} >= 300", "rgba(45, 0, 75, 0.5)"], ["${height} >= 200", "rgb(102, 71, 151)"], ["${height} >= 100", "rgb(170, 162, 204)"], ["${height} >= 50", "rgb(224, 226, 238)"], ["${height} >= 25", "rgb(252, 230, 200)"], ["${height} >= 10", "rgb(248, 176, 87)"], ["${height} >= 5", "rgb(198, 106, 11)"], ["true", "rgb(127, 59, 8)"] ] } }); // Set the tileset style to default 最终设置给tile的样式 city.style = defaultStyle; //鼠标事件互动 var previousPickedEntity; var handler=viewer.screenSpaceEventHandler;//在屏幕空间发生的事件柄 handler.setInputAction(function(movement){ var pickedPrimitive=viewer.scene.pick(movement.endPosition);//拾取对象 var pickedEntity=Cesium.defined(pickedPrimitive)?pickedPrimitive.id:undefined; //高亮挑选的实体对象 if(Cesium.defined(previousPickedEntity)){ previousPickedEntity.billboard.scale=1.0; previousPickedEntity.billboard.color=Cesium.Color.WHITE; } // //高亮当前拾取的Entity对象 if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) { pickedEntity.billboard.scale = 2.0; pickedEntity.billboard.color = Cesium.Color.ORANGERED; previousPickedEntity = pickedEntity; } },Cesium.ScreenSpaceEventType.MOUSE_MOVE);//鼠标移动事件 //切换相机 var freeModeElement=document.getElementById('freeMode');//获取dom元素 var droneModeElement=document.getElementById('droneMode'); freeModeElement.addEventListener('change',setViewMode); droneModeElement.addEventListener('change',setViewMode); function setViewMode(){ if(droneModeElement.checked){ viewer.trackedEntity=drone//相机跟踪实体对象 }else{ viewer.trackedEntity=undefined; viewer.scene.camera.flyTo(homeCameraView); } } //用户双击实体是，会自动跟踪实体，可以添加一些处理Ui的逻辑 viewer.trackedEntityChanged.addEventListener(function(){ if (viewer.trackedEntity === drone) { freeModeElement.checked = false; droneModeElement.checked = true; } } ) //同理设置一些显示 var shadowsElement = document.getElementById('shadows'); var neighborhoodsElement = document.getElementById('neighborhoods'); shadowsElement.addEventListener('change', function (e) { viewer.shadows = e.target.checked;//场景是否阴影 }); neighborhoodsElement.addEventListener('change', function (e) { neighborhoods.show = e.target.checked;//polygon 邻近区图形是否显示 }); //加载城市建筑群数据完成，关掉遮罩层，我账号无此资源，直接注释 // // Finally, wait for the initial city to be ready before removing the loading indicator. // var loadingIndicator = document.getElementById('loadingIndicator'); // loadingIndicator.style.display = 'block'; // city.readyPromise.then(function () { // loadingIndicator.style.display = 'none';// // }); 

重要知识点

创建场景

创建地形

• Cesium.CesiumTerrainProvider 地形提供者

 let viewer=new Cesium.Viewer('cesiumContainer',{//世界地形 terrainProvider:new Cesium.CesiumTerrainProvider({ url:Cesium.IonResource.fromAssetId(1), requestWaterMask:true,//水效果 requestVertexNormals: true//顶点法线效果 }) }) 

添加图片层级（图片资源提供者xxxImageryProvider）

创建初始化摄像机视图

加载数据

• KML数据加载

    var geocachePromise = Cesium.KmlDataSource.load(“URL”） 

• 加载GeoJson数据 ，添加邻近区图形

    var neighborhoodsPromise = Cesium.GeoJsonDataSource.load("URL") 

• CZML数据加载

    var dronePromise = Cesium.CzmlDataSource.load("URL") 

• 3DTile 瓦片数据加载 (景观，建筑群，)

    var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) })); 

3DTile样式定义

•   var defaultStyle = new Cesium.Cesium3DTileStyle({ color : "color('white')", show : true }); 

• // Define a style in which buildings are colored by height 针对不同高度给与不同的样式var heightStyle = new Cesium.Cesium3DTileStyle({ color : { conditions : [ ["${height} >= 300", "rgba(45, 0, 75, 0.5)"], ["${height} >= 200", "rgb(102, 71, 151)"], ["${height} >= 100", "rgb(170, 162, 204)"], ["${height} >= 50", "rgb(224, 226, 238)"], ["${height} >= 25", "rgb(252, 230, 200)"], ["${height} >= 10", "rgb(248, 176, 87)"], ["${height} >= 5", "rgb(198, 106, 11)"], ["true", "rgb(127, 59, 8)"] ] }}); 

•   // Set the tileset style to default 最终设置给tile的样式 city.style = defaultStyle; 

事件互动

• 获取事件柄

    var handler=viewer.screenSpaceEventHandler;//在屏幕空间发生的事件柄 

• 事件处理

  handler.setInputAction(处理函数,具体事件)

        handler.setInputAction(function(movement){ var pickedPrimitive=viewer.scene.pick(movement.endPosition);//拾取对象 var pickedEntity=Cesium.defined(pickedPrimitive)?pickedPrimitive.id:undefined; //高亮挑选的实体对象 if(Cesium.defined(previousPickedEntity)){ previousPickedEntity.billboard.scale=1.0; previousPickedEntity.billboard.color=Cesium.Color.WHITE; } // //高亮当前拾取的Entity对象 if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) { pickedEntity.billboard.scale = 2.0; pickedEntity.billboard.color = Cesium.Color.ORANGERED; previousPickedEntity = pickedEntity; } },Cesium.ScreenSpaceEventType.MOUSE_MOVE);//鼠标移动事件 

本文由 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: 2019/02/20 20:19