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