Cesium快速上手5-地形影像的加载

地形的加载

Globe绘制的是全球地形，它需要两个东西，一个是地形高程信息，另外一个是影像图层，也就是地球的表皮。影像图层可以叠加多个，但是地形高程只能有一个。整个地形的绘制也是渐进式的，即视线看到的地方才会去调度相关的地形高程信息，找到对应位置的地形影像贴上
TerrainProvider 地形高程信息

Cesium基于地形提供器支持请求地形的若干种方法。大多数地形提供器使用HTTP上的REST接口来请求地形切片。地形提供器根据请求的格式和地形数据的组织方式而有所不同。CesiumJS支持以下地形提供器：

• CesiumTerrainProvider: 支持量化网格地形切片，针对地形流进行了优化。兼容Cesium ion所服务的地形和来自[3D
  tiling pipeline])(/3d-tiling-pipeline/terrain/)的输出数据。
• GoogleEarthEnterpriseTerrainProvider: 支持由您的Google Earth Enterprise服务器生成的高程地图地形。
• VRTheWorldTerrainProvider: 支持从VT MAK VR-TheWorld Server服务器请求的高度地图地形图
• EllipsoidTerrainProvider:按照程序创建椭球的表面。缺乏地形的真实外观，但不从服务器请求数据。
  地形提供器的构造与图层提供器类似，如果服务器不支持跨域资源共享CORS，则通常包括地形服务器的URL和可选的代理

影像的加载

const viewer = new Cesium.Viewer("cesiumContainer", {
  imageryProvider: Cesium.createWorldImagery({
    style: Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS,
  }),
  baseLayerPicker: false,
});

const layers = viewer.scene.imageryLayers;
const blackMarble = layers.addImageryProvider(
  new Cesium.IonImageryProvider({ assetId: 3812 })
);

blackMarble.alpha = 0.5;

blackMarble.brightness = 2.0;
//添加最简单的影像贴图
layers.addImageryProvider(
  new Cesium.SingleTileImageryProvider({
    url: "../images/Cesium_Logo_overlay.png",
    rectangle: Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75),
  })
); 

实战过程中，影像图可以添加多个，根据自己的服务来选择对应的Api

   this.cesium_viewer.imageryLayers.addImageryProvider(
      new Cesium.UrlTemplateImageryProvider({
        // vec_w 矢量
        url:
          this.mapUrlApi +
          `DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${arr[rnd]}`,
        layer: "cqgj:tianditu",
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        // tileMatrixSetID: "GoogleMapsCompatible",
        minimumLevel: 0,
        maximumLevel: 17,
      })
    );
    // 标注 中文
    this.cesium_viewer.imageryLayers.addImageryProvider(
      new Cesium.UrlTemplateImageryProvider({
        url:
          this.mapUrlApi +
          `DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${arr[rnd]}`,
        layer: "cqgj:tianditu",
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        minimumLevel: 0,
        maximumLevel: 17,
      })
    );
       // 边界
    this.cesium_viewer.imageryLayers.addImageryProvider(
      new Cesium.WebMapServiceImageryProvider({
        name: "矢量-geoserverDarkLayer",
        // url: `${_this.baseConfig.ApiUrl.geoserverUrl}/geoserver/BJV2/wms`,
        url: `${window.SYS_CONFIG.ProxyApi.cupCommonApi}/gis-service/proxy/region_edge/wms`,
        layers: "cqgj:region_edge",
        parameters: {
          service: "WMS",
          format: "image/png",
          transparent: true,
          cql_filter: "layer=2",
        },
      })
    );
    //还可以通过imageryLayers来判断影像图层的显隐
    this.cesium_viewer.imageryLayers.get(1).show = false;