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"));