cesium-影像图&地形图&3dtiles模型

• ImageryLayer类：

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

常用属性如下：

1. name(名称),

2. alpha(透明度)

3. brightness(亮度)

4. contrast(对比度)

5. gamma(伽马)

6. hue(色调)

7. saturation(饱和度)

8. show(显示)

属性举例：

var layers = viewer.scene.imageryLayers;
layers.get(0).alpha = 0.1;
layers.get(0).brightness = 2.0;
layers.get(0).show = false;

常用方法如下：

http://cesium.xin/cesium/cn/Documentation1.62/ImageryLayerCollection.html?classFilter=ImageryLayer

layers.add(layer, index) //在集合中添加一个图层
layers.addImageryProvider(imageryProvider, index) //使用ImageryProvider创建一个新层将其添加到集合中
layers.contains(layer) //检查集合是否包含给定的图层
layers.get(index)  //从集合中按索引获取图层
layers.indexOf(layer) //确定集合中给定图层的索引
layers.lower(layer) ///在集合中的一个位置上降低一层
layers.lowerToBottom(layer) //将图层降低到集合的底部
layers.raise(layer) //在集合中的一个位置上提升一层
layers.raiseToTop(layer) //将一个图层提升到集合的顶部
layers.remove(layer, destroy) //从该集合中删除一个图层（如果存在）
layers.removeAll(destroy) //从该集合中删除所有图层

方法举例：

add：

//以指定位置添加单张图片为例
var imgProvider = new Cesium.SingleTileImageryProvider({
    url : './testimg.jpg',
    rectangle : Cesium.Rectangle.fromDegrees(-70.0, 28.0, -67.0, 29.75)
});
var layer = new Cesium.ImageryLayer(imgProvider);
//index越大显示层级越高
var firstLayer = layers.add(layer,1);

addImageryProvider：

var secondLayer = layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
    url : './testimg.jpg',
    rectangle : Cesium.Rectangle.fromDegrees(-70.0, 28.0, -67.0, 29.75)
}),2);

contains：

console.log(layers.contains(firstLayer));  //true

• ImageryProvider类：

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

1. ArcGisMapServerImageryProvider 加载ArcGIS online和Server上的数据

2. BingMapsImageryProvider Bing地图影像

3. OpenStreetMapImageryProvider 加载OpenStreetMap

4. TileMapServiceImageryProvider

5. GoogleEarthEnterpriseImageryProvider

6. GoogleEarthEnterpriseMapsProvider

7. GridImageryProvider 展示内部渲染网格划分情况

8. IonImageryProvider

9. MapboxImageryProvider

10. MapboxStyleImageryProvider

11. SingleTileImageryProvider 单张图片的影像服务，适合离线数据或对影像数据要求并不高的场景下

12. TileCoordinatesImageryProvider 展示内部渲染网格瓦片划分情况，包括网格瓦片等级、X、Y序号，便于调试地形和图像渲染问题。当然也可以和GridImageryProvider一起叠加使用。

13. UrlTemplateImageryProvider 指定url的format模版，方便用户实现自己的Provider.比如国内的高德，腾讯等影像服务，url都是一个固定的规范，都可以通过该Provider轻松实现。

14. WebMapServiceImageryProvider 服务WMTS1.0.0规范的影像服务，都可以通过该类实现，比如国内的天地图。

15. WebMapTileServiceImageryProvider

参考博文：https://blog.youkuaiyun.com/m0_37755995/article/details/123525107

举例两种，加载天地图和瓦片地图：

//定义viewer时加载天地图图层
var viewer = new Cesium.Viewer('container',{
    imageryProvider:new Cesium.WebMapTileServiceImageryProvider({
        url: "http://t0.tianditu.gov.cn/vec_w/wmts?tk=你的天地图key",
        layer: "vec",
        style: "default",
        tileMatrixSetID: "w",
        format: "tiles",
        maximumLevel: 18,
    })
});
//也可以定义完再加载（适用于需要多种地图切换的场景）
//获取全部图层
var layers = viewer.scene.imageryLayers;
//添加瓦片图层
var localLayer = layers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
    url:"http://localhost:8083/service/v1/tile?map=googleimage&x={x}&y={y}&z={z}",
}));

• TerrainProvider类

Cesium提供了TerrainProvider基类，该Provider负责每一个Tile对应的地形数据的构建，定义了一套地形Provider需要实现的接口和规范，terrainProvider不像上一讲介绍的影像图层（有专门的ImageryLayer）那样，Cesium中的地形类是直接通过不同的terrainProvider控制的，然后把某一个实例化的terrainProvider赋值给Viewer.terrainProvider来控制地形数据的显隐。所以Cesium中的地形图层只能有一个。基于此类，cesium封装了5个现成的继承类操作地形数据：

1. ArcGISTiledElevationTerrainProvider

2. EllipsoidTerrainProvider

3. CesiumTerrainProvider

4. VRTheWorldTerrainProvider

5. GoogleEarthEnterpriseTerrainProvider

举例：

let terrainProvider = new Cesium.CesiumTerrainProvider({
    url:"http://localhost:8011/mapdata/terrain", //本地地形服务
    visible: true
});
viewer.terrainProvider = terrainProvider;

• 3dtiles模型

cesium原生方式：

var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url : this.$url.CITY_MODEL_URL + "/beijing/tileset.json",
    skipLevelOfDetail : true, //跳级加载图层，避免某些图层不加载
}));
//删除
viewer.scene.primitives.remove(tileset);

mars3d方式：(支持原生cesium的全部属性)

var bj = {
    "type": "3dtiles",
    "url": this.$url.CITY_MODEL_URL + "/beijing/tileset.json",
    "visible":true,
    "flyTo":true,
    "skipLevelOfDetail" : true,
    "center": { 
        "y": 39.75, "x": 116.33, "z": 1000, "heading": 0.06, "pitch": -30, "roll": 0 
    }
};
this.cityModelLayerBj = mars3d.layer.createLayer(bj,viewer);

//设置显隐的方式
this.cityModelLayerBj.setVisible(true);
this.cityModelLayerBj.setVisible(false);
//删除
this.cityModelLayerBj.remove();