cesium基础-加载影像

ImageryLayerCollection类

Cesium.Viewer类对象中包含的imageryLayers属性就是ImageryLayerCollection类的实例，它包含了当前Cesium应用程序所有的ImageryLayer类对象，即所有影像图层，所以Cesium种的影像图层可以添加多个。
Cesium.ImageryLayerCollection类是ImageryLayer类对象的容器，它可以装载、放置多个ImageryLayer或ImageryProvider类对象，而且它内部放置的ImageryLayer或ImageryProvider类对象是有序的。

 

 

 

 

ImageryLayer类
Cesium.ImageryLayer类用于表示Cesium中的影像图层，它就相当于皮毛、衣服，将数据源包裹在内，它需要数据源（imageryProvider）为其提供内在丰富的地理空间信息和属性信息。同时，通过该类还能设置影像图层相关属性，比如透明度、亮度、对比度、色调等。

 

 

ImageryProvider类
Cesium.ImageryProvider类及其子类封装了加载各种影像图层的方法，其中Cesium.ImageryProvider类是抽象类、基类或者可将其理解为接口，它不能被直接实例化。上图中Cesium.ImageryLayer的第一个参数就是需要的图层数据，我们可以把ImageryProvider看作是影像图层的数据源（包裹在ImageryLayer类内部），我们想使用哪种影像图层数据或服务就用对应的ImageryProvider子类去加载，目前Cesium（1.6.2）提供了以下14种ImageryProvider。

 

 示例1：

const imageryLayers = viewer.scene.imageryLayers;

    const osmImageryProvider = new Cesium.UrlTemplateImageryProvider({
      url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      subdomains: ["a", "b", "c"],
    });
    imageryLayers.addImageryProvider(osmImageryProvider);

示例2：

var cesiumAsset= "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjOWJkZDkxYS0yNTg3LTQxNzktYmY2MC1iZTRiN2M4ZjcxMjMiLCJpZCI6Njg0NDAsImlhdCI6MTYzMjU3OTQwOX0.5FzD9jZYCHbOziDOF3VNG5ErOhP3TzPaCZHZudmU5zg";
    var tiandituTk='9b8b9b2f9280bb14599a178b89973ffa';
    // 服务负载子域
    var subdomains=['0','1','2','3','4','5','6','7'];
    Cesium.Ion.defaultAccessToken = cesiumAsset;


    const viewer = new Cesium.Viewer("cesiumContainer", {
     infoBox: false, // If set to false, the InfoBox widget will not be created.
    //    baseLayerPicker: false,
    });

    const imageryLayers = viewer.scene.imageryLayers;

    var tdt_base = new Cesium.WebMapTileServiceImageryProvider({
        //影像底图
        url: "http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+tiandituTk,
        subdomains: subdomains,
        layer: "tdtImgLayer",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
        show: true
    });

    var tdt_legend = new Cesium.WebMapTileServiceImageryProvider({   
        //影像注记
        url: "http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk="+tiandituTk,
        subdomains: subdomains,
        layer: "tdtCiaLayer",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatible",
        show: true
    })

    imageryLayers.addImageryProvider(tdt_base);
    imageryLayers.addImageryProvider(tdt_legend);

    // 将三维球定位到中国
    viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
            orientation: {
                heading :  Cesium.Math.toRadians(348.4202942851978),
                pitch : Cesium.Math.toRadians(-89.74026687972041),
                roll : Cesium.Math.toRadians(0)
            },
            complete:function callback() {
                // 定位完成之后的回调函数
            }
        });

参考博客：https://blog.csdn.net/ls870061011/article/details/122710390?spm=1001.2014.3001.5501

https://blog.csdn.net/sinat_31213021/article/details/119873221

https://blog.csdn.net/m0_37755995/article/details/123525107

提供一个比较完整的Cesium-Viewer参数及属性信息，参考的一位博主的，担心源码消失，先引用过来：https://blog.csdn.net/weixin_42078760/article/details/81675838

Viewer是Cesium渲染器的核心功能，直接将地图和场景显示在浏览器中。

    var viewer = new Cesium.Viewer( 'cesiumContainer', {    
        animation : false,//是否创建动画小器件，左下角仪表    
        baseLayerPicker : false,//是否显示图层选择器    
        fullscreenButton : false,//是否显示全屏按钮    
        geocoder : false,//是否显示geocoder小器件，右上角查询按钮    
        homeButton : false,//是否显示Home按钮    
        infoBox : false,//是否显示信息框    
        sceneModePicker : false,//是否显示3D/2D选择器    
        selectionIndicator : false,//是否显示选取指示器组件    
        timeline : false,//是否显示时间轴    
        navigationHelpButton : false,//是否显示右上角的帮助按钮    
        scene3DOnly : true,//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源    
        clock : new Cesium.Clock(),//用于控制当前时间的时钟对象    
        selectedImageryProviderViewModel : undefined,//当前图像图层的显示模型，仅baseLayerPicker设为true有意义    
        imageryProviderViewModels : Cesium.createDefaultImageryProviderViewModels(),//可供BaseLayerPicker选择的图像图层ProviderViewModel数组    
        selectedTerrainProviderViewModel : undefined,//当前地形图层的显示模型，仅baseLayerPicker设为true有意义    
        terrainProviderViewModels : Cesium.createDefaultTerrainProviderViewModels(),//可供BaseLayerPicker选择的地形图层ProviderViewModel数组    
        imageryProvider : new Cesium.OpenStreetMapImageryProvider( {    
            credit :'',    
            url : '//192.168.0.89:5539/planet-satellite/'    
        } ),//图像图层提供者，仅baseLayerPicker设为false有意义    
        terrainProvider : new Cesium.EllipsoidTerrainProvider(),//地形图层提供者，仅baseLayerPicker设为false有意义    
        skyBox : new Cesium.SkyBox({    
            sources : {    
              positiveX : 'Cesium-1.7.1/Skybox/px.jpg',    
              negativeX : 'Cesium-1.7.1/Skybox/mx.jpg',    
              positiveY : 'Cesium-1.7.1/Skybox/py.jpg',    
              negativeY : 'Cesium-1.7.1/Skybox/my.jpg',    
              positiveZ : 'Cesium-1.7.1/Skybox/pz.jpg',    
              negativeZ : 'Cesium-1.7.1/Skybox/mz.jpg'    
            }    
        }),//用于渲染星空的SkyBox对象    
        fullscreenElement : document.body,//全屏时渲染的HTML元素,    
        useDefaultRenderLoop : true,//如果需要控制渲染循环，则设为true    
        targetFrameRate : undefined,//使用默认render loop时的帧率    
        showRenderLoopErrors : false,//如果设为true，将在一个HTML面板中显示错误信息    
        automaticallyTrackDataSourceClocks : true,//自动追踪最近添加的数据源的时钟设置    
        contextOptions : undefined,//传递给Scene对象的上下文参数（scene.options）    
        sceneMode : Cesium.SceneMode.SCENE3D,//初始场景模式    
        mapProjection : new Cesium.WebMercatorProjection(),//地图投影体系    
        dataSources : new Cesium.DataSourceCollection()    
        //需要进行可视化的数据源的集合    
    } );