三維地圖 cesium知識

教程視頻網站：https://ke.qq.com/course/468292

教程學習網站：簡書 cesium官方教程

快速上手：推薦使用：marsGIS for Cesium 平台

 

 Cesium功能點介紹

Viewer 地球對象

 

 

scene 場景對象

 

 

影像圖層

 

 地形圖層

坐標轉換：笛卡爾空間直角坐標，地理坐標（弧度制），地理坐標（經緯度）之間可以互轉

 笛卡爾空間直角坐標轉地理坐標經緯度

var position2 = new Cesium.Cartesian3(-2180753.065987198,4379023.266141494,4092583.575045952);
var cartographic = Cesium.Cartographic.fromCartesian(position2)
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var lng = Cesium.Math.toDegrees(cartographic.longitude);
let position = Cesium.Cartesian3.fromDegrees(lng, lat, cartographic.height); // 116.47329915346744 39.91549386849083 10.773370964241405

 

camera相機：

 

 交互性

 

 實體和底層primitive

 

 三維模型：

 

 

 

 

第一步：添加元素

<div id="cesiumContainer"></div>

第二步：添加樣式

#cesiumContainer {
        width: 100%;
        height: 100%;
}

第三步：添加地球

window.$_viewer = this.viewer = new Cesium.Viewer( // 加載底圖
                "cesiumContainer",
                {
                    animation: false, //動畫
                    navigation: false, //去掉右側導航欄
                    homeButton: false, //home鍵
                    geocoder: false, //地址搜素
                    baseLayerPicker: false, //圖層選擇控件
                    timeline: false, //時間軸
                    fullscreenButton: false, //全屏顯示
                    //allOverlays: true,  //是否疊加圖層
                    infoBox: true, // 點擊要素之后浮窗
                    sceneModePicker: false, //投影方式  三維/二維
                    navigationInstructionsInitiallyVisible: false, //導航指令
                    navigationHelpButton: false, //幫助信息
                    selectionIndicator: false, // 選擇
                    navigationHelpButton: false,
                    skyBox: new Cesium.SkyBox({
                        sources: {
                            positiveX: require('@/assets/skybox/漫天彩雲_LF.jpg'),
                            negativeX: require('@/assets/skybox/漫天彩雲_RT.jpg'),
                            positiveY: require('@/assets/skybox/漫天彩雲_UP.jpg'),
                            negativeY: require('@/assets/skybox/漫天彩雲_DN.jpg'),
                            positiveZ: require('@/assets/skybox/漫天彩雲_FR.jpg'),
                            negativeZ: require('@/assets/skybox/漫天彩雲_BK.jpg'),
                        },
                    }),
                }
)

this.viewer.scene.skyBox.show = false; // 不顯示天空

this.viewer.scene.sun.show = false; // 不顯示太陽

this.viewer.scene.undergroundMode = true; //重要，開啟地下模式，設置基色透明，這樣就看不見黑色地球了

this.viewer.scene.underGlobe.show = true;

this.viewer.scene.underGlobe.baseColor = new Cesium.Color(0, 0, 0, 1);

this.viewer.scene.globe.show = false; // 隱藏地球

第四步：控制顯示

this.viewer._cesiumWidget._creditContainer.style.display = "none" // 隱藏cesium icon
this.viewer.scene.undergroundMode = true; //重要，開啟地下模式，設置基色透明，這樣就看不見黑色地球了
this.viewer.scene.underGlobe.show = true;
this.viewer.scene.underGlobe.baseColor = new Cesium.Color(0, 0, 0, 1);
this.viewer.scene.globe.show = false; // 隱藏地球
this.viewer._cesiumWidget._creditContainer.style.display = "none" // 隱藏cesium icon

第五步：添加底圖

this.imageLayer = this.viewer.imageryLayers.addImageryProvider(
    new Cesium.TileMapServiceImageryProvider({
           //影像圖
           url: "http://121.196.59.85:8016/yx_g",
           fileExtension: "jpg" //url為文件夾地址
    })
)
this.imageLayer.show = true //默認顯示影像圖

第六步：添加模型

let promise = this.viewer.scene.open(BIMData.serviceUrl, undefined, {
     autoSetView: false
 });
 promise.then((layers) => {
}):

第七步：控制模型顯示

this.layers.forEach(layer => {
        layer.setObjsVisible(ids, true);
});

第八步：控制模型點擊

// 點擊模型出現屬性框
this.viewer.pickEvent.addEventListener((feature) => {
       this.$refs.propertyinfo.serviceloading = true;
});

 控制視圖定位在某個區域

this.orientation = {
      heading: Cesium.Math.toRadians(348.4202942851978),
      pitch: Cesium.Math.toRadians(-89.74026687972041),
      roll: Cesium.Math.toRadians(0)
};
this.destination = Cesium.Rectangle.fromDegrees(MaxMinXYData.minx, MaxMinXYData.miny, MaxMinXYData.maxx, MaxMinXYData.maxy)
this.viewer.camera.flyTo({ // 相機飛到矩形對應位置
     destination: this.destination, // 位置
     orientation: this.orientation,
     complete: () => {
            // 定位完成之后的回調函數
     }
});

 控制視圖定位在某個坐標和對應海拔

position = Cesium.Cartesian3.fromDegrees(parseFloat(lng), parseFloat(lat), 3000);
this.viewer.camera.flyTo({ // 相機飛到矩形對應位置
        destination: position, // 位置
});

 獲取海拔

 let height = this.viewer.camera.positionCartographic.height.toFixed(6)