cesium加载影像服务接口分析

---

---

cesium加载影像

提示：Cesium本身提供了不同接口来加载各类影像地图服务，包括本地和服务数据，总结接口使用情况如下：个人建议影像服务还是加载本地服务数据比较好，接口推荐createTileMapServiceImageryProvider，数据类型TMS瓦片数据，数据来源：91位图之类的工具下载然后导出为TMS格式，直接iis下发布请求即可：

/*
 * @Author: Wang JianLei 
 * @Date: 2020-03-24 14:33:33 
 * @Last Modified by: Wang JianLei
 * @Last Modified time: 2020-04-13 10:36:38
 */
/**************************************************************
**主要记录的是cesium加载各类影像服务的接口，不包括地形服务数据加载**
**************************************************************/
$(function () {
    $("#ImageTypes").change(function () {
        var option = $(this).val();
        switch (option) {
            case "ArcGisMapServerImageryProvider":
                this.title = "支持ArcGIS Online和Server的相关服务";
                viewer.imageryLayers.addImageryProvider(
                    new Cesium.ArcGisMapServerImageryProvider({
                        url: "http://atlasmaps.esri.com/arcgis/rest/services/Esri/USA_Population_Density/MapServer",
                        enablePickFeatures: false
                    }));
                console.log("ArcGisMapServerImageryProvider 成功!");
                break;
 
            case "BingMapsImageryProvider":
                this.title = "Bing地图影像，可以指定mapStyle，详见BingMapsStyle类,其中可以指定mapStyle，选择多种风格，目前Cesium中支持AERIAL、AERIAL_WITH_LABELS、ROAD、ORDNANCE_SURVEY、COLLINS_BART五种";
                viewer.imageryLayers.addImageryProvider(
                    new Cesium.BingMapsImageryProvider({
                        url: "https://dev.virtualearth.net/",
                        key: 'At7n9JV-UZwwyTWeZEFjGQsgIdGifcEvTxZJEDuC1yU2vTwdAeNSKnDlBQIHXkMR',
                        mapStyle: Cesium.BingMapsStyle.AERIAL
                    }));
                console.log("BingMapsImageryProvider 成功!");
                break;
 
            case "createOpenStreetMapImageryProvider":
                this.title = "OSM影像服务，根据不同的url选择不同的风格";
                viewer.imageryLayers.addImageryProvider(
                    new Cesium.createOpenStreetMapImageryProvider({
                        url: "https://a.tile.openstreetmap.org/"
                    }));
                console.log("createOpenStreetMapImageryProvider 成功!");
                break;
 
            case "createTileMapServiceImageryProvider":
                this.title = "看文档是根据MapTiler规范，貌似是可以自己下载瓦片，发布服务，类似ArcGIS影像服务的过程";
                viewer.imageryLayers.addImageryProvider(
                    new Cesium.createTileMapServiceImageryProvider({
                        url: RootURL + "/91WT/Image_World/tiles"
                    }));//暂定项目影像服务加载解决方案
                console.log("createTileMapServiceImageryProvider 成功!");
                break;
 
            case "MapboxImageryProvider":
                this.title = "Mapbox影像服务，根据mapId指定地图风格";
                viewer.imageryLayers.addImageryProvider(
                    new Cesium.MapboxImageryProvider({
                        url: "https://api.mapbox.com/v4/",
                        mapId: 'mapbox.streets'
                    }));
                console.log("MapboxImageryProvider 成功!");
                break;
 
            case "SingleTileImageryProvider":
                this.title = "单张图片的影像服务，适合离线数据或对影像数据要求并不高的场景下";
                viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
                    url: RootURL + '/91WT/world.png',
                    rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0)
                }));
                console.log("SingleTileImageryProvider 成功!");
                break;
 
            case "UrlTemplateImageryProvider":
                this.title = "指定url的format模版，方便用户实现自己的Provider，比如国内的高德，腾讯等影像服务，url都是一个固定的规范，都可以通过该Provider轻松实现。而OSM也是通过该类实现的。";
                viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
                    // url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"//谷歌影像
                    // url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'//高德影像
                    // url: 'https://wprd02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8&ltype=11'//高德路网数据
                    // url: 'https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=229', customTags: {
                    //     sx: function (imageryProvider, x, y, level) {
                    //         return x >> 4;
                    //     },
                    //     sy: function (imageryProvider, x, y, level) {
                    //         return ((1 << level) - y) >> 4;
                    //     }
                    // }//腾讯地图
                    url: RootURL + "/91WT/Image_World/tiles/{z}/{x}/{y}.png"//本地影像TMS //区别于createTileMapServiceImageryProvider加载的URL
                }));
                console.log("SingleTileImageryProvider 成功!");
                break;
 
            case "WebMapServiceImageryProvider":
                this.title = "符合WMS规范的影像服务都可以通过该类封装，指定具体参数实现";
                viewer.imageryLayers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
                    url: 'http://localhost:8080/geoserver/CesiumTest_WMS/wms?', // 服务地址
                    layers: 'CesiumTest_WMS:world', // 图层名称
                    parameters: {
                        transparent: true, // 是否透明
                        format: 'image/png', // 返回格式
                        srs: 'EPSG:4326',  // 坐标系
                        styles: ''
                    }
                }));
                console.log("WebMapServiceImageryProvider 成功!");
                break;
 
            case "WebMapTileServiceImageryProvider"://10f42f91b6e50d2a8eec980577e6a2e6
                this.title = "服务WMTS1.0.0规范的影像服务，都可以通过该类实现，比如国内的天地图";
                // viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({//加载全球矢量服务（经纬度）
                //     url: 'http://t0.tianditu.gov.cn/vec_c/wmts?tk=10f42f91b6e50d2a8eec980577e6a2e6',
                //     layer: 'vec',
                //     style: 'default',
                //     tileMatrixSetID: 'c',
                //     format: 'tiles',
                //     maximumLevel: 18
                // }));
                viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({//加载全球中文注记（经纬度）
                    url: 'http://t0.tianditu.gov.cn/cia_w/wmts?tk=10f42f91b6e50d2a8eec980577e6a2e6',
                    layer: 'cia',
                    style: 'default',
                    tileMatrixSetID: 'w',
                    format: 'tiles',
                    maximumLevel: 18
                }));
                console.log("WebMapTileServiceImageryProvider 成功!");
                break;
 
            case "TileCoordinatesImageryProvider":
                this.title = "渲染每一个瓦片的围，方便调试";
                var TileCoordinatesImagery = new Cesium.TileCoordinatesImageryProvider();
                var TileCoordinatesImageryLayer = viewer.imageryLayers.addImageryProvider(TileCoordinatesImagery);//添加瓦片坐标图层
                viewer.imageryLayers.raiseToTop(TileCoordinatesImageryLayer);//将瓦片坐标图层置顶
                console.log("TileCoordinatesImageryProvider 成功!");
                break;
 
            case "GridImageryProvider":
                this.title = "渲染每一个瓦片内部的格网，了解每个瓦片的精细度";
                var GridImagery = new Cesium.GridImageryProvider();
                var GridImageryLayer = viewer.imageryLayers.addImageryProvider(GridImagery);//添加瓦片坐标图层
                viewer.imageryLayers.raiseToTop(GridImageryLayer);//将瓦片坐标图层置顶
                console.log("GridImageryProvider 成功!");
                break;
 
            default:
                break;
        }
    });
})

一、ArcGisMapServerImageryProvider

支持ArcGIS Online和Server的相关服务，后台检测可以发现实际上返回的是一个.json文件，地址：http://atlasmaps.esri.com/arcgis/rest/services/Esri/USA_Population_Density/MapServer/?callback=loadJsonp195730&f=json

二、BingMapsImageryProvider

Bing地图影像，其中可以指定mapStyle，选择多种风格，目前Cesium中支持AERIAL、AERIAL_WITH_LABELS、ROAD、ORDNANCE_SURVEY、COLLINS_BART五种，详见BingMapsStyle类，注意的是需要申请一个key，地址：https://www.bingmapsportal.com/

三、WebMapTileServiceImageryProvider

服务WMTS1.0.0规范（定义了 GetCapabilities、GetTile、GetFeatureInfo 3个操作）的影像服务，都可以通过该类实现.

GetCapabilities：返回服务元数据 ServiceMetadata，即服务能力和信息内容。

GetTile：返回瓦片地图 Tile。

GetFeatureInfo：返回显示在瓦片地图上的要素信息 FeatureInfo，是可选操作

说白了，也就是用来加载Web Map Tile Service (WMTS) 服务。参数API；最常见的国内的天地图数据加载这里要注意的是国家天地图从2019年1月1日起，调用服务前需申请开发授权，官网申请 token。

天地图WMTS各类服务地址：https://service.tianditu.gov.cn/#/

三、WebMapServiceImageryProvider

符合WMS规范(定义了 GetCapabilities，GetMap，GetFeatureInfo 三个操作)的影像服务都可以通过该类封装，指定具体参数实现。

GetCapabilities：返回服务级元数据的xml文档，里面记录有图层Layer，Bounds范围等信息；

GetMap：返回地理空间参数和大小已明确定义的地图图像；

GetFeatureInfo：返回显示在地图上的某些特殊要素（feature）的信息

说白了，这个接口就是用来加载Web Map Service (WMS) 服务的，它的参数有很多：（参数API）

（1） layers：需要加载的图层，多个图层以逗号隔开即可，可以对应的能力文档的Layer的Name或Title,例如 layers: ‘图层，图层2’ 或 layers:‘BaseMap_R@Jingjin#1’;

（2）parameters：在GetMap URL中传递给WMS服务器的其他参数，常见参数比如‘transparent’(地图背景透明)，‘format’(返回的图片格式)，默认为‘image/jpeg’,

（3）getFeatureInfoParameters：在GetFeatureInfo URL中传递给WMS服务器的其他参数，这里可设置‘query_layers’( 查询图层列表)和‘info_format’(要素信息的返回格式)等，填写规则和layers一样，若不设置query_layers，则默认和layers的设置一样，同时，能力文档中queryable为1的图层可查询，为0不能查询；

（4）enablePickFeatures：是否点击地图获取查询图层的要素，默认为true,设置为fales,不会进行GetFeatureInfo操作，即getFeatureInfoParameters参数不生效；

（5）getFeatureInfoFormat：GetFeatureInfoFormat数组，简单说，就是根据GetFeatureInfo要素信息的返回格式触发相应的回调，不设置则触发默认的事件

（6）rectangle：图像覆盖的范围。默认为全球范围，可根据添加的图层的BoundingBox进行设置
注意：若同时设置了getFeatureInfoParameters中的‘info_format’和getFeatureInfoFormat，则以info_format为准，若只设置getFeatureInfoFormat，则以该数组中的第一个GetFeatureInfoFormat为准，两者都不设置的话，默认为’application/json’

利用Geoserver将TIF文件（91位图下载导出为单张tif）发布WMS服务（服务发布过程），接口调用