Cesium学习（未完继续）

添加底图

viewer.imageryLayers.addImageryProvider(imageryProvider)

常见 ImageryProvider 实现类

• ArcGisMapServerImageryProvider：用于从 ArcGIS Server 获取影像数据。

• BingMapsImageryProvider：用于从 Bing Maps 获取影像数据。

• OpenStreetMapImageryProvider：用于从 OpenStreetMap 获取影像数据。

• TileMapServiceImageryProvider：用于从 Tile Map Service 获取影像数据。

• WebMapServiceImageryProvider：用于从 WMS 服务获取影像数据。

• WebMapTileServiceImageryProvider：用于从 WMTS 服务获取影像数据。

举例：

imageryProvider = new Cesium.ArcGisMapServerImageryProvider({url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'});

注意事项

• 透明度设置：可以通过设置 ImageryLayer 的 alpha 属性来调整图层的透明度。

  JavaScript复制

  wmsLayer.alpha = 0.5; // 设置透明度为50%

• 图层顺序调整：可以使用 imageryLayers.raiseToTop(layer) 或 imageryLayers.lowerToBottom(layer) 方法来调整图层的显示顺序。

• 图层显示控制：可以通过设置 ImageryLayer 的 show 属性来控制图层的显示或隐藏。

wmsLayer.show = false; // 隐藏图层

添加3dTiles

const tileset = await Cesium3DTileset.fromUrl(url, {enableCollision: true,
});tileset.style = new Cesium3DTileStyle({color: "color('red')",show: true,pointSize: 10,
})viewer.scene.primitives.add(tileset);

地形

如使用官方地形服务需注册Cesium ion并配置访问令牌 Ion.defaultAccessToken

地形的作用：为Cesium地球提供真实地形高程数据，使地表呈现3D起伏效果（如山脉、山谷）

terrainProvider: new Cesium.CesiumTerrainProvider({
url: "http://data.marsgis.cn/terrain",
requestWaterMask: true,requestVertexNormals: true
}),
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
})//ArcGIS
terrainProvider: new Cesium.ArcGISTiledElevationTerrainProvider({url: 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',}),imageryProvider: new Cesium.UrlTemplateImageryProvider({url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"})// 局部地形
terrainProvider: new Cesium.CesiumTerrainProvider({url: appConfig.dataServiceBaseUrl + "localter",requestWaterMask: true, //水波纹requestVertexNormals: true //法向量}),imageryProvider: new Cesium.UrlTemplateImageryProvider({url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"})//terrainExaggeration: 3, //地形夸张系数 

相机及视角

相机操作-fly

this.viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(107,33,1000),duration: 3 //持续时间});

从地球飞到西安的上空

放大缩小向右向左

// 缩小
viewer.camera.zoomOut(500); 
// 放大
viewer.camera.zoomIn(500);  
// 向右
viewer.camera.moveRight(500); 
// 向右
viewer.camera.moveLeft(500); 

绕Z轴旋转

viewer.camera.rotate(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(10));

zoomTo

const viewer = cesiumInit.viewer;var entity = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(103.851959, 1.290270),box: {dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),material: Cesium.Color.RED.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.RED}});viewer.zoomTo(entity);

元素相关

点击改变颜色

	// 鼠标左键单击事件viewer.screenSpaceEventHandler.setInputAction((click) => {const pickedObject = viewer.scene.pick(click.position); // 获取鼠标点击的实体对象if (Cesium.defined(pickedObject)) {if (Cesium.defined(pickedObject)) {// 改变实体的颜色为绿色pickedObject.color = Cesium.Color.GREEN;}}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

显示隐藏

    viewer.screenSpaceEventHandler.setInputAction((click:any) => {const pickedObject = viewer.scene.pick(click.position); // 获取鼠标点击的实体对象if (defined(pickedObject)) {if (defined(pickedObject)) {// 改变实体的颜色为绿色console.log(pickedObject);pickedObject.show = false;}}}, ScreenSpaceEventType.LEFT_CLICK);

在鼠标事件函数的回调里，我们可以得到构件的实体对象，可以看到构件的所有信息

获取元素id

console.log(pickedFeature.getProperty("element"));