SuperMap iClient3D for WebGL 多源数据加载篇—常用汇总

前言

最近小编整理了SuperMap iClient3D for WebGL常见的多源数据加载方式和示例代码，供大家参考。本文章适用于稍微有基础的同学。
如有遗漏，欢迎大家补充。

一、地形

1.1、SuperMap iServer地形

地形服务生产：
数据生成TIN或者DEM缓存后。可加载到场景中，保存工作空间，然后发布iServer。也可直接发布sct配置文件，数据来源选择三维切片缓存，服务类型选择REST-三维服务。
详细可参考博客：https://www.jianshu.com/p/8df809ee93cb
地形服务使用：
详细可参考博客：https://blog.csdn.net/supermapsupport/article/details/89448119

（1）单独加地形

注意：地形服务源自SuperMap iServer发布时需设置isSct为true
使用接口：CesiumTerrainProvider
示例代码：

var viewer = new Cesium.Viewer('cesiumContainer',{
   
            terrainProvider:new Cesium.CesiumTerrainProvider({
   
                url:'http://localhost:8090/iserver/services/3D-SiChuanDiXingYingXiang/rest/realspace/datas/DatasetDEM',
                invisibility:true
                isSct : true//地形服务源自SuperMap iServer发布时需设置isSct为true
            })
        });

（2）通过scene.open加载

通过scene.open打开可直接查看到地形效果，该效果只限于将地形保存于工作空间发布iServer的情况。

1.2、stk全球地形服务

由于国外的stk服务地址（//assets.agi.com/stk-terrain/world）有时候访问慢或直接访问不到，所以我们使用SuperMap iServer进行了一次转发，效果和stk一样。
使用接口：CesiumTerrainProvider
示例代码：

var terrainProvider= new Cesium.CesiumTerrainProvider({
   
            url : "https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path",
            requestWaterMask : true,//开启法向量
            requestVertexNormals : true,//开启水面特效
            isSct: false
        })
    viewer.terrainProvider=terrainProvider;

二、二维底图

2.1、第三方在线地图服务

2.1.1、天地图

接口：TiandituImageryProvider
示例代码：

 //初始化天地图全球中文注记服务，并添加至影像图层
 var labelImagery = new Cesium.TiandituImageryProvider({
   
  mapStyle: Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务（经纬度投影），如果不加这行代码默认就是使用IMG_W墨卡托投影全球影像底图
  token: "10a5ea344938a74c3b311e9351a20490"
   });
 viewer.imageryLayers.addImageryProvider(labelImagery);

2.1.2、BingMap

接口：BingMapsImageryProvider
示例代码：

    viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
   
        key : URL_CONFIG.BING_MAP_KEY,//可至官网（https://www.bingmapsportal.com/）申请key
        url : URL_CONFIG.BINGMAP
    }));

2.1.3、谷歌

接口：UrlTemplateImageryProvider
示例代码：

var GG = new Cesium.UrlTemplateImageryProvider({
   
    url: 'http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali',
    tilingScheme:new Cesium.WebMercatorTilingScheme(),
    subdomains: '1234',
});
viewer.imageryLayers.addImageryProvider(GG );

2.1.3、高德

接口：UrlTemplateImageryProvider
示例代码：

var GD = new Cesium.UrlTemplateImageryProvider({
   
    url: 'https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',