3DTiles 模型采用 CATIA V5 R22 --->3dxml --->GLB--->B3DM
var extent = Cesium.Rectangle.fromDegrees(75, 60.808406, 135.313421, 10); Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent; Cesium.Camera.DEFAULT_VIEW_FACTOR = 0; Cesium.Ion.defaultAccessToken = "你的Token"; Cesium.CreditDisplay.cesiumCredit = "測驗"; var viewer = new Cesium.Viewer('cesiumContainer', { animation: false,//是否創建影片小器件，左下角儀表 baseLayerPicker: false,//是否顯示圖層選擇器 fullscreenButton: true,//是否顯示全屏按鈕 geocoder: true,//是否顯示geocoder小器件，右上角查詢按鈕 homeButton: true,//是否顯示Home按鈕 infoBox: false,//是否顯示資訊框 sceneModePicker: true,//是否顯示3D/2D選擇器 selectionIndicator: false,//是否顯示選取指示器組件 timeline: false,//是否顯示時間軸 navigationHelpButton: false,//是否顯示右上角的幫助按鈕 scene3DOnly: true,//如果設定為true，則所有幾何圖形以3D模式繪制以節約GPU資源 clock: new Cesium.Clock(),//用于控制當前時間的時鐘物件 selectedImageryProviderViewModel: undefined,//當前影像圖層的顯示模型，僅baseLayerPicker設為true有意義 //imageryProviderViewModels: Cesium.createDefaultImageryProviderViewModels(),//可供BaseLayerPicker選擇的影像圖層ProviderViewModel陣列 selectedTerrainProviderViewModel: undefined,//當前地形圖層的顯示模型，僅baseLayerPicker設為true有意義 terrainProviderViewModels: Cesium.createDefaultTerrainProviderViewModels(),//可供BaseLayerPicker選擇的地形圖層ProviderViewModel陣列 skyBox: new Cesium.SkyBox({ sources: { positiveX: '/Build/Cesium/Assets/Textures/SkyBox/tycho2t3_80_px.jpg', negativeX: '/Build/Cesium/Assets/Textures/SkyBox/tycho2t3_80_mx.jpg', positiveY: '/Build/Cesium/Assets/Textures/SkyBox/tycho2t3_80_py.jpg', negativeY: '/Build/Cesium/Assets/Textures/SkyBox/tycho2t3_80_my.jpg', positiveZ: '/Build/Cesium/Assets/Textures/SkyBox/tycho2t3_80_pz.jpg', negativeZ: '/Build/Cesium/Assets/Textures/SkyBox/tycho2t3_80_mz.jpg' } }),//用于渲染星空的SkyBox物件 fullscreenElement: document.body,//全屏時渲染的HTML元素, useDefaultRenderLoop: true,//如果需要控制渲染回圈，則設為true targetFrameRate: undefined,//使用默認render loop時的幀率 showRenderLoopErrors: false,//如果設為true，將在一個HTML面板中顯示錯誤資訊 automaticallyTrackDataSourceClocks: true,//自動追蹤最近添加的資料源的時鐘設定 contextOptions: undefined,//傳遞給Scene物件的背景關系引數（scene.options） sceneMode: Cesium.SceneMode.SCENE3D //初始場景模式 }); var mapbox = new Cesium.MapboxImageryProvider({ mapId: 'mapbox.satellite', accessToken: '你的Token' }); viewer.imageryLayers.addImageryProvider(mapbox); var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: '/files/test/tileset.json' })); viewer.scene.primitives.add(tileset); tileset.readyPromise.then(function (tileset) { viewer.scene.primitives.add(tileset); viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, tileset.boundingSphere.radius * 1.0)); }).otherwise(function (error) { console.log(error); }); Cesium.CreditDisplay.cesiumCredit = null; // 創建DIV標簽 var bubbleDiv = document.createElement('div'); viewer.container.appendChild(bubbleDiv); bubbleDiv.className = 'bubble'; bubbleDiv.style.display = 'none'; bubbleDiv.style.position = 'absolute'; bubbleDiv.style.bottom = '0'; bubbleDiv.style.left = '0'; bubbleDiv.style['pointer-events'] = 'none'; bubbleDiv.style.padding = '4px'; bubbleDiv.style.zIndex = 100; // 有關當前選定功能的資訊 var selected = { feature: undefined, originalColor: new Cesium.Color() }; var selectedEntity = new Cesium.Entity(); // 獲取默認的滑鼠左鍵處理程式 var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); // 如果不支持輪廓，請在滑鼠懸停時將特征顏色更改為黃色，在單擊滑鼠時將特征顏色更改為綠色， if (Cesium.PostProcessStageLibrary.isSilhouetteSupported(viewer.scene)) { //支持剪影 var silhouetteBlue = Cesium.PostProcessStageLibrary.createEdgeDetectionStage(); silhouetteBlue.uniforms.color = Cesium.Color.BLUE; silhouetteBlue.uniforms.length = 0.01; silhouetteBlue.selected = []; var silhouetteGreen = Cesium.PostProcessStageLibrary.createEdgeDetectionStage(); silhouetteGreen.uniforms.color = Cesium.Color.LIME; silhouetteGreen.uniforms.length = 0.01; silhouetteGreen.selected = []; viewer.scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createSilhouetteStage([silhouetteBlue, silhouetteGreen])); viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) { // 如果先前選擇了功能，請撤消突出顯示 silhouetteGreen.selected = []; // P選擇一個新功能 var pickedFeature = viewer.scene.pick(movement.position); if (!Cesium.defined(pickedFeature)) { clickHandler(movement); return; } //選擇功能（如果尚未選擇） if (silhouetteGreen.selected[0] === pickedFeature) { return; } // 保存所選功能的原始顏色 var highlightedFeature = silhouetteBlue.selected[0]; if (pickedFeature === highlightedFeature) { silhouetteBlue.selected = []; } //突出顯示新選擇的功能 silhouetteGreen.selected = [pickedFeature]; }, Cesium.ScreenSpaceEventType.LEFT_CLICK); var highlighted = { feature: undefined, originalColor: new Cesium.Color() }; //將特征懸停上色為黃色， viewer.screenSpaceEventHandler.setInputAction(function onm ouseMove(movement) { //如果以前突出顯示某個功能，請撤消突出顯示 if (Cesium.defined(highlighted.feature)) { highlighted.feature.color = highlighted.originalColor; highlighted.feature = undefined; } // 選擇一個新功能 var pickedFeature = viewer.scene.pick(movement.endPosition); if (!Cesium.defined(pickedFeature)) { bubbleDiv.style.display = 'none'; return; } // 選擇了某項功能，因此請顯示其疊加內容 bubbleDiv.style.display = 'block'; bubbleDiv.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px'; bubbleDiv.style.left = movement.endPosition.x + 'px'; var name = pickedFeature.getProperty('name'); if (!Cesium.defined(name)) { name = pickedFeature.getProperty('id'); } bubbleDiv.textContent = name; // 突出顯示該功能（如果尚未選擇） if (pickedFeature !== selected.feature) { highlighted.feature = pickedFeature; Cesium.Color.clone(pickedFeature.color, highlighted.originalColor); pickedFeature.color = Cesium.Color.YELLOW; } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); }
結果發現Mapbox 地圖加載也太慢了，不知道是我們單位的網不好，還是本身就慢，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/160111.html
標籤：JavaScript
上一篇：松軟科技web教程:JavaScript HTML DOM 元素
下一篇：H5自定義屬性