三维地图 cesium知识

时间：2024-02-23 21:25:28

教程视频网站：https://ke.qq.com/course/468292

教程学习网站：简书 cesium官方教程

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

 

 Cesium功能点介绍

Viewer 地球对象

 

 

scene 场景对象

 

 

影像图层

 

 地形图层

坐标转换：笛卡尔空间直角坐标，地理坐标（弧度制），地理坐标（经纬度）之间可以互转

 笛卡尔空间直角坐标转地理坐标经纬度

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

 

camera相机：

 

 交互性

 

 实体和底层primitive

 

 三维模型：

 

 

 

 

第一步：添加元素

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

第二步：添加样式

1 #cesiumContainer {
2         width: 100%;
3         height: 100%;
4 }

第三步：添加地球

 1 window.$_viewer = this.viewer = new Cesium.Viewer( // 加载底图
 2                 "cesiumContainer",
 3                 {
 4                     animation: false, //动画
 5                     navigation: false, //去掉右侧导航栏
 6                     homeButton: false, //home键
 7                     geocoder: false, //地址搜素
 8                     baseLayerPicker: false, //图层选择控件
 9                     timeline: false, //时间轴
10                     fullscreenButton: false, //全屏显示
11                     //allOverlays: true,  //是否叠加图层
12                     infoBox: true, // 点击要素之后浮窗
13                     sceneModePicker: false, //投影方式  三维/二维
14                     navigationInstructionsInitiallyVisible: false, //导航指令
15                     navigationHelpButton: false, //帮助信息
16                     selectionIndicator: false, // 选择
17                     navigationHelpButton: false,
18                     skyBox: new Cesium.SkyBox({
19                         sources: {
20                             positiveX: require(\'@/assets/skybox/漫天彩云_LF.jpg\'),
21                             negativeX: require(\'@/assets/skybox/漫天彩云_RT.jpg\'),
22                             positiveY: require(\'@/assets/skybox/漫天彩云_UP.jpg\'),
23                             negativeY: require(\'@/assets/skybox/漫天彩云_DN.jpg\'),
24                             positiveZ: require(\'@/assets/skybox/漫天彩云_FR.jpg\'),
25                             negativeZ: require(\'@/assets/skybox/漫天彩云_BK.jpg\'),
26                         },
27                     }),
28                 }
29 )

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; // 隐藏地球

第四步：控制显示

1 this.viewer._cesiumWidget._creditContainer.style.display = "none" // 隐藏cesium icon
2 this.viewer.scene.undergroundMode = true; //重要，开启地下模式，设置基色透明，这样就看不见黑色地球了
3 this.viewer.scene.underGlobe.show = true;
4 this.viewer.scene.underGlobe.baseColor = new Cesium.Color(0, 0, 0, 1);
5 this.viewer.scene.globe.show = false; // 隐藏地球
6 this.viewer._cesiumWidget._creditContainer.style.display = "none" // 隐藏cesium icon

第五步：添加底图

1 this.imageLayer = this.viewer.imageryLayers.addImageryProvider(
2     new Cesium.TileMapServiceImageryProvider({
3            //影像图
4            url: "http://121.196.59.85:8016/yx_g",
5            fileExtension: "jpg" //url为文件夹地址
6     })
7 )
8 this.imageLayer.show = true //默认显示影像图

第六步：添加模型

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

第七步：控制模型显示

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

第八步：控制模型点击

1 // 点击模型出现属性框
2 this.viewer.pickEvent.addEventListener((feature) => {
3        this.$refs.propertyinfo.serviceloading = true;
4 });

 控制视图定位在某个区域

 1 this.orientation = {
 2       heading: Cesium.Math.toRadians(348.4202942851978),
 3       pitch: Cesium.Math.toRadians(-89.74026687972041),
 4       roll: Cesium.Math.toRadians(0)
 5 };
 6 this.destination = Cesium.Rectangle.fromDegrees(MaxMinXYData.minx, MaxMinXYData.miny, MaxMinXYData.maxx, MaxMinXYData.maxy)
 7 this.viewer.camera.flyTo({ // 相机飞到矩形对应位置
 8      destination: this.destination, // 位置
 9      orientation: this.orientation,
10      complete: () => {
11             // 定位完成之后的回调函数
12      }
13 });

 控制视图定位在某个坐标和对应海拔

1 position = Cesium.Cartesian3.fromDegrees(parseFloat(lng), parseFloat(lat), 3000);
2 this.viewer.camera.flyTo({ // 相机飞到矩形对应位置
3         destination: position, // 位置
4 });

 获取海拔

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

 

相关文章