加载影像数据

Cesium为我们提供了ImageryLayerCollection、ImageryLayer以及相关的ImageryProvider类来加载不同的影像图层。虽然Cesium把此类图层叫做Imagery*，但并不是特指卫星影像数据，还包括一些互联网地图、TMS、WMS、WMTS、单个图片等。

影像图层类

ImageryLayerCollection 影像图层集合

它是ImageryLayer的集合，可以用于添加、移除和管理多个影像图层。通过ImageryLayerCollection，您可以在Cesium应用程序中同时显示多个影像图层，以实现不同来源或类型的影像数据的叠加显示。使用ImageryLayerCollection，您可以方便地管理和控制影像图层的可见性、透明度、顺序等属性，以及对它们进行动态的添加、移除和排序操作。

ImageryLayer 影像图层

它可以加载和显示各种类型的影像数据，包括卫星图像、航空摄影图像等。您可以使用ImageryLayer将影像数据叠加在三维地球上，以创建逼真的地球可视化效果。ImageryLayer提供了许多属性和方法，可以设置图层的可见性、透明度、色调等，以及对图层进行动态的加载、卸载和更新操作。通过ImageryLayer，您可以自定义和控制影像图层的显示方式，以满足您的应用需求。

ImageryProvider 影像提供者

它定义了加载和显示影像数据所需的方法和属性。ImageryProvider可以从各种来源获取影像数据，如在线地图服务、本地文件、自定义数据源等。Cesium提供了一些内置的ImageryProvider，如WebMapServiceImageryProvider、UrlTemplateImageryProvider等，用于加载常见的地图服务或图像切片。您还可以自定义自己的ImageryProvider，以满足特定的数据源需求。通过ImageryProvider，您可以将影像数据加载到ImageryLayer中，并在Cesium应用程序中进行显示和操作。

加载不同类型的影像图层

ArcGisMapServerImageryProvider

用于加载ArcGIS地图服务影像数据

ArcGIS电子+街道

const arcgis_img = await Promise.resolve(Cesium.ArcGisMapServerImageryProvider.fromUrl(
    "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
))

const arcgis_img = await Promise.resolve(Cesium.ArcGisMapServerImageryProvider.fromUrl(
    "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
))

BingMapsImageryProvider

用于加载Bing地图影像数据

GoogleEarthEnterpriseImageryProvider

用于加载Google Earth Enterprise影像数据

const geeMetadata = Cesium.GoogleEarthEnterpriseMetadata.fromUrl(
    new Cesium.Resource({
        url: "http://www.earthenterprise.org/3d",
        proxy: new Cesium.DefaultProxy("/proxy/"),
    })
);
const google_img = new Cesium.ImageryLayer(
    Cesium.GoogleEarthEnterpriseImageryProvider.fromMetadata(await geeMetadata, {}), {}
);

viewer.scene.imageryLayers.add(google_img);

imageryLayers.raiseToTop(google_img)

const geeMetadata = Cesium.GoogleEarthEnterpriseMetadata.fromUrl(
    new Cesium.Resource({
        url: "http://www.earthenterprise.org/3d",
        proxy: new Cesium.DefaultProxy("/proxy/"),
    })
);
const google_img = new Cesium.ImageryLayer(
    Cesium.GoogleEarthEnterpriseImageryProvider.fromMetadata(await geeMetadata, {}), {}
);

viewer.scene.imageryLayers.add(google_img);

imageryLayers.raiseToTop(google_img)

GridImageryProvider

用于创建网格样式影像，在三维地球上显示网格状的影像，用于可视化和分析应用

IonImageryProvider

用于加载Cesium Ion平台影像数据

MapboxImageryProvider

用于加载Mapbox地图影像数据

MapboxStyleImageryProvider

用于加载Mapbox地图样式影像数据

OpenStreetMapImageryProvider

用于加载OpenStreetMap地图影像数据

SingleTileImageryProvider

用于加载单个瓦片的影像数据

TileCoordinatesImageryProvider

用于在地图上显示瓦片的坐标

TileMapServiceImageryProvider

用于加载瓦片地图服务的影像数据

UrlTemplateImageryProvider

用于加载基于URL模板的影像数据, 如：高德，百度，腾讯，天地图等影像服务

腾讯影像

const tx_img = new Cesium.UrlTemplateImageryProvider({
    url: 'https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=229',
    customTags: {
        sx: function (_imageryProvider: any, x: any, _y: any, _level: any) {
            return x >> 4;
        },
        sy: function (_imageryProvider: any, _x: any, y: any, _level: any) {
            return ((1 << _level) - y) >> 4;
        }
    }
});

const tx_img = new Cesium.UrlTemplateImageryProvider({
    url: 'https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=229',
    customTags: {
        sx: function (_imageryProvider: any, x: any, _y: any, _level: any) {
            return x >> 4;
        },
        sy: function (_imageryProvider: any, _x: any, y: any, _level: any) {
            return ((1 << _level) - y) >> 4;
        }
    }
});

高德矢量

申请key

const gd_vec = new Cesium.UrlTemplateImageryProvider({
    url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
    minimumLevel: 3,
    maximumLevel: 18
})

const gd_vec = new Cesium.UrlTemplateImageryProvider({
    url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
    minimumLevel: 3,
    maximumLevel: 18
})

高德影像

const gd_img = new Cesium.UrlTemplateImageryProvider({
    url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
    minimumLevel: 3,
    maximumLevel: 18
})

const gd_img = new Cesium.UrlTemplateImageryProvider({
    url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
    minimumLevel: 3,
    maximumLevel: 18
})

高德注记

const gd_cva = new Cesium.UrlTemplateImageryProvider({
    url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
    minimumLevel: 3,
    maximumLevel: 18
})

const gd_cva = new Cesium.UrlTemplateImageryProvider({
    url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
    minimumLevel: 3,
    maximumLevel: 18
})

星图影像

申请key

const xt_img = new Cesium.UrlTemplateImageryProvider({
    url: "https://tiles{s}.geovisearth.com/base/v1/img/{z}/{x}/{y}?token=" + xt_key,
    minimumLevel: 3,
    maximumLevel: 18,
    subdomains: "123"
})

const xt_img = new Cesium.UrlTemplateImageryProvider({
    url: "https://tiles{s}.geovisearth.com/base/v1/img/{z}/{x}/{y}?token=" + xt_key,
    minimumLevel: 3,
    maximumLevel: 18,
    subdomains: "123"
})

星图注记

const xt_cia = new Cesium.UrlTemplateImageryProvider({
    url: "https://tiles{s}.geovisearth.com/base/v1/cia/{z}/{x}/{y}?token=" + xt_key,
    minimumLevel: 3,
    maximumLevel: 18,
    subdomains: "123"
})

const xt_cia = new Cesium.UrlTemplateImageryProvider({
    url: "https://tiles{s}.geovisearth.com/base/v1/cia/{z}/{x}/{y}?token=" + xt_key,
    minimumLevel: 3,
    maximumLevel: 18,
    subdomains: "123"
})

WebMapServiceImageryProvider

用于加载Web地图服务的影像数据，符合WMS规范

WebMapTileServiceImageryProvider

用于加载Web地图切片服务的影像数据，如：天地图

天地图影像

申请key

const tdt_img = new Cesium.WebMapTileServiceImageryProvider({
    url: "http://{s}.tianditu.com/img_w/wmts?tk=" + tdt_key,
    layer: 'img',
    style: 'default',
    tileMatrixSetID: 'w',
    format: 'tiles',
    maximumLevel: 18,
    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
})

const tdt_img = new Cesium.WebMapTileServiceImageryProvider({
    url: "http://{s}.tianditu.com/img_w/wmts?tk=" + tdt_key,
    layer: 'img',
    style: 'default',
    tileMatrixSetID: 'w',
    format: 'tiles',
    maximumLevel: 18,
    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
})

天地图标注

const tdt_cia = new Cesium.WebMapTileServiceImageryProvider({
    url: 'http://{s}.tianditu.gov.cn/cia_w/wmts?tk=' + tdt_key,
    layer: 'cia',
    style: 'default',
    tileMatrixSetID: 'w',
    format: 'tiles',
    maximumLevel: 18,
    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
})

const tdt_cia = new Cesium.WebMapTileServiceImageryProvider({
    url: 'http://{s}.tianditu.gov.cn/cia_w/wmts?tk=' + tdt_key,
    layer: 'cia',
    style: 'default',
    tileMatrixSetID: 'w',
    format: 'tiles',
    maximumLevel: 18,
    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
})

加载影像数据 ​

影像图层类 ​

ImageryLayerCollection 影像图层集合 ​

ImageryLayer 影像图层 ​

ImageryProvider 影像提供者 ​

加载不同类型的影像图层 ​

ArcGisMapServerImageryProvider ​

ArcGIS电子+街道 ​

BingMapsImageryProvider ​

GoogleEarthEnterpriseImageryProvider ​

GridImageryProvider ​

IonImageryProvider ​

MapboxImageryProvider ​

MapboxStyleImageryProvider ​

OpenStreetMapImageryProvider ​

SingleTileImageryProvider ​

TileCoordinatesImageryProvider ​

TileMapServiceImageryProvider ​

UrlTemplateImageryProvider ​

腾讯影像 ​

高德矢量 ​

高德影像 ​

高德注记 ​

星图影像 ​

星图注记 ​

WebMapServiceImageryProvider ​

WebMapTileServiceImageryProvider ​

天地图影像 ​

天地图标注 ​

加载影像数据

影像图层类

ImageryLayerCollection 影像图层集合

ImageryLayer 影像图层

ImageryProvider 影像提供者

加载不同类型的影像图层

ArcGisMapServerImageryProvider

ArcGIS电子+街道

BingMapsImageryProvider

GoogleEarthEnterpriseImageryProvider

GridImageryProvider

IonImageryProvider

MapboxImageryProvider

MapboxStyleImageryProvider

OpenStreetMapImageryProvider

SingleTileImageryProvider

TileCoordinatesImageryProvider

TileMapServiceImageryProvider

UrlTemplateImageryProvider

腾讯影像

高德矢量

高德影像

高德注记

星图影像

星图注记

WebMapServiceImageryProvider

WebMapTileServiceImageryProvider

天地图影像

天地图标注